Блог

Я пытаюсь превратить индикатор вкладки material-ui в треугольник. На данный момент я могу манипулировать индикатором только прямоугольниками/квадратами разного размера. Можно ли превратить его в стрелку или перевернутый треугольник?

Вот что у меня есть до сих пор:

Вот код для индикатора:

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

Вместо использования значка вы можете создать треугольник с помощью CSS, и я думаю, что это даст тот же результат, который вы ищете:

 <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'
>
 

Редактировать:

Есть также другой способ сделать это, который, я думаю, лучше, так как он устраняет зависимость от границ и пикселей, и у вас больше свободы с вашими формами:

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

Кроме того, поскольку в этой версии используется путь к клипу, из-за чего цвет фона применяется только к фигуре, нет необходимости устанавливать indicatorColor цвет фона.

Я также заменил часть выполняемого форматирования пикселями, чтобы вместо этого использовать theme.spacing. Это должно помочь ему быть более отзывчивым.