Css 在Office UI结构中设置“PivotItem”的宽度

我正在使用Office UI Fabric中的

Pivot

和

PivotItem

在选项卡中显示我的内容。当前，当选项卡渲染时，所有选项卡都是左对齐的

我需要以相等的宽度显示选项卡，以便它们占据页面的100%宽度

下面是透视图的代码

   <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

属性，至少可以设置以下样式：

• 链接

• linkContent

• linkIsSelected

示例

以下示例演示如何为枢轴链接设置固定的

宽度
：

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

const pivotStyles:Partial={
链接：{
宽度：“300px”
},
林克斯当选：{
宽度：“300px”
}
};

在哪里

const tabsItems=[
{
内容：“支点#1”，
标题：“我的文件”
},
{
内容：“支点#2”，
标题：“最近的”
},
{
内容：“支点#3”，
标题：“与我共享”
}
];
导出常量PivotBasicExample:React.FunctionComponent=（）=>{
返回(
{tabsItems.map（（tabItem，idx）=>(
{tabItem.content}
))}
);
};

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>
  );
};