Установите ширину для `PivotItem` в Office UI Fabric - PullRequest
Новая
       48

Установите ширину для `PivotItem` в Office UI Fabric

1 голос
/ 02 ноября 2019

Я использую Pivot и PivotItem из Office UI Fabric для отображения моего контента на вкладках. В настоящее время, когда вкладка отображается, все вкладки выравниваются по левому краю.

enter image description here

Мне нужно отобразить вкладки с одинаковой шириной, чтобы они занимали 100%ширина страницы.

Ниже приведен код для Pivot. 

   <Pivot linkFormat={PivotLinkFormat.tabs} linkSize={PivotLinkSize.large} styles={pivotStyles}>
      <PivotItem headerText="Foo">
        <Label>Pivot #1</Label>
      </PivotItem>
      <PivotItem headerText="Bar">
        <Label>Pivot #2</Label>
      </PivotItem>
      <PivotItem headerText="Bas">
        <Label>Pivot #3</Label>
      </PivotItem>
      <PivotItem headerText="Biz">
        <Label>Pivot #4</Label>
      </PivotItem>
    </Pivot>

Ниже приведен код, который я мог бы найти, чтобы добавить styles к Pivot. Но у нас нет атрибута styles для PivotItem. 

const pivotStyles:IPivotStyles = {
  link: {},
  linkContent: {},
  linkIsSelected: {},
  text: {},
  icon: {},
  count: {},
  root: {
    //background: DefaultPalette.greenDark
  }
};

Как применить стиль к PivotItem, чтобы добавить к нему ширину?

1 Ответ

2 голосов
/ 04 ноября 2019

PivotItem стили могут быть настроены с помощью свойства Pivot.styles, по крайней мере, могут быть установлены следующие стили:

  • link
  • linkContent
  • linkIsSelected

enter image description here

Пример

В следующем примере показано, как установить фиксированныйwidth для сводной ссылки: 

const pivotStyles: Partial<IStyleSet<IPivotStyles>> = {
  link: {
    width: "300px"
  },
  linkIsSelected: {
    width: "300px"
  }
};

, где 

const tabsItems = [
  {
    content: "Pivot #1",
    header: "My Files"
  },
  {
    content: "Pivot #2",
    header: "Recent"
  },
  {
    content: "Pivot #3",
    header: "Shared with me"
  }
];

export const PivotBasicExample: React.FunctionComponent = () => {
  return (
    <Pivot styles={pivotStyles}>
      {tabsItems.map((tabItem,idx) => (
        <PivotItem key={idx} headerText={tabItem.header}>
          <Label>{tabItem.content}</Label>
        </PivotItem>
      ))}
    </Pivot>
  );
};
...