Как центрировать заголовок сводной таблицы в пользовательском интерфейсе Fluent? - PullRequest
Новая
       24

Как центрировать заголовок сводной таблицы в пользовательском интерфейсе Fluent?

1 голос
/ 21 июня 2020

Я хочу использовать поворот в пользовательском интерфейсе Fluent для отображения меню. 

<Pivot linkSize={PivotLinkSize.large}>
        <PivotItem headerText='userInfo' headerButtonProps={}>
            <UserPage />
        </PivotItem>
        <PivotItem headerText='userConfig'>
            <UserSetting />
        </PivotItem>
        <PivotItem headerText='Store'>
            <StorePage />
        </PivotItem>
        <PivotItem headerText='SubInfo'>
            <SubInfo />
        </PivotItem>
</Pivot>

Он отображается следующим образом:

пи c

Но я хочу, чтобы заголовок сводной таблицы был в центре, я пытался изменить атрибут стилей, но не добился никакого прогресса.

Как выровнять стержень Заголовок в центр?

1 Ответ

1 голос
/ 30 июня 2020

Если вы хотите, чтобы все кнопки были центрированы по горизонтали, просто сделайте Pivot гибким боксом и выровняйте все его элементы по центру: 

<Pivot linkSize={PivotLinkSize.large}
       styles={{ root: { display: 'flex', justifyContent: 'center' } }}>
        <PivotItem headerText='userInfo' headerButtonProps={}>
            <UserPage />
        </PivotItem>
        <PivotItem headerText='userConfig'>
            <UserSetting />
        </PivotItem>
        <PivotItem headerText='Store'>
            <StorePage />
        </PivotItem>
        <PivotItem headerText='SubInfo'>
            <SubInfo />
        </PivotItem>
</Pivot>
...