在 Office UI Fabric 中设置“PivotItem”的宽度答案

【问题标题】：Set width for `PivotItem` in Office UI Fabric在 Office UI Fabric 中设置“PivotItem”的宽度
【发布时间】：2020-02-28 12:57:43
【问题描述】：

我正在使用 Office UI Fabric 中的 Pivot 和 PivotItem 在选项卡中显示我的内容。目前当标签渲染时，所有选项卡都左转。

我需要显示相同宽度的标签，以便它们占据页面的 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 的代码。但是我们没有PivotItem 的styles 属性。

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

如何将样式应用到PivotItem 以便为其添加宽度？

【问题讨论】：

标签： css reactjs typescript office-ui-fabric

【解决方案1】：

PivotItem的样式可以通过Pivot.styles属性进行调整，至少可以设置如下样式：

link
linkContent
linkIsSelected

示例

以下示例演示如何为枢轴链接设置固定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>
  );
};

【讨论】：