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

Posted 2023-02-22

【中文标题】在 Office UI Fabric 中设置“PivotItem”的宽度

【英文标题】：Set width for `PivotItem` in Office UI Fabric

【发布时间】：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 以便为其添加宽度？

【参考方案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>
  );
;