How to customize shape of Material-UI tab indicator

user_16335389 0
Viewed 402

I am trying to turn the material-ui tab indicator into a triangle. At the moment, I can only manipulate the indicator into differently sized rectangles/squares. Is it possible to change it into an arrow or an upside down triangle?

Here is what I have so far:
red square is indicator

Here is the code for the indicator:

TabIndicatorProps={{
                style: {
                  alignSelf: "flex-start",
                  height: "15px",
                  width: "15px",
                  transform: "translateY(-100px)",
                  backgroundImage: ArrowDropDownIcon,
                  backgroundColor: "#CC0202",
                  marginLeft: "6px",
                },
              }}
material-ui reactjs javascript
1 Answers

Instead of using the icon, you could create a triangle using CSS and I think it would give the same result you are looking for:

<Tabs
  TabIndicatorProps={{
    style: {
      width: 0,
      height: 0,
      borderLeft: "10px solid transparent",
      borderRight: "10px solid transparent",
      borderTop: "10px solid #f00",
      transform: "translateY(-100px)",
      alignSelf: "flex-start",
      marginLeft: "5px",
    },
  }}
  indicatorColor='primary.main'
>

Example of Indicator with triangle styling

edit:

There is also another way to do this which I think is better since it removes the dependency on borders and pixels, and you have more freedom with your shapes:

TabIndicatorProps={{
  style: {
    top: theme.spacing(2),
    height: 10, 
    width: 12,
    marginLeft: theme.spacing(1),
    backgroundColor: "#be0000",
    clipPath: 'polygon(0 0, 100% 0, 50% 100%)',
  },
}}

Also, since this version uses the clip path, which makes it so the background color only applies in the shape, there is no need to set the indicatorColor to the color your background.

I also replaced some of the formatting being done with pixels to use theme.spacing instead. It should help it be more responsive.

Tab Indicator with Custom Shape V2

user_134190300
Related