Настройка высоты линии ссылки сводного элемента в пользовательском интерфейсе Fluent - PullRequest
Новая
       30

Настройка высоты линии ссылки сводного элемента в пользовательском интерфейсе Fluent

1 голос
/ 28 мая 2020

Я пытаюсь увеличить высоту строки в выбранной ссылке на элемент Pivot в пользовательском интерфейсе Microsoft Fluent UI с помощью React.

Вот скриншот для пояснения:

enter image description here

Оранжевая стрелка указывает на синюю линию, высоту которой я хотел бы увеличить.

Я попытался установить атрибут стилей компонента Pivot, но пока безуспешно. Вот код 

const pivotStyles: Partial<IStyleSet<IPivotStyles>> = {
    link: { ? },
    linkContent: { ? }
};

<Pivot styles={pivotStyles} linkSize={PivotLinkSize.large}>
    <PivotItem headerText="Zane"></PivotItem>
    <PivotItem headerText="Kai"></PivotItem>
    <PivotItem headerText="Jay"></PivotItem>
</Pivot>

Я экспериментировал с разными атрибутами как link, так и linkContent, но пока не нашел способа. Я считаю, что я пытаюсь манипулировать интерфейсом IStyle , но я не могу найти подробные сведения об его атрибутах. Ссылка там очень расплывчатая. Например, каковы все доступные атрибуты link, linkContent, et c.?

Любые мысли по этому поводу приветствуются!

Спасибо.

1 Ответ

1 голос
/ 29 мая 2020

Оказывается, я был на правильном пути и просто нуждался в точных полях. Вот что в итоге сработало: 

const pivotStyles = {
  linkIsSelected: {
    selectors: {
      ':before': {
        height: '6px',   // was previously defaulted at 2px
      }
    }
  }
};

Я просмотрел около 4,24 миллиона сайтов, чтобы найти этот ответ, но вот некоторые из наиболее полезных, если они интересны:

Глубокое изучение классов с использованием Chrome Dev Tools тоже помогли. ;)

Вот изображение конечного результата:

working image

...