你能增加 Pivots 的大小吗？

Question

我正在尝试实现一个 UI，它具有来自 Office fabirc UI 的选项卡（或枢轴），我想知道我是否可以增加大小（或者更好的是自定义我的枢轴大小）？我尝试使用 PivotLinkSize.large，但我想增加 Pivot 的高度和宽度。

   return (
    <div>
      <Pivot linkFormat={PivotLinkFormat.tabs} linkSize={PivotLinkSize.large}>
              <PivotItem headerText="Foo">
                <Label>Pivot #1</Label>
              </PivotItem>
    </Pivot>
    </div>
    );

我刚刚开始学习 React 和 office fabric UI，非常感谢这里的任何帮助。

Answer 1

IPivotProps.styles property 可用于自定义 Pivot 控件的外观，例如可以像这样自定义 Pivot 链接：

import { Label } from "office-ui-fabric-react/lib/Label";
import { IPivotStyles, Pivot, PivotItem } from "office-ui-fabric-react/lib/Pivot";
import { IStyleSet } from "office-ui-fabric-react/lib/Styling";
import * as React from "react";

const pivotStyles: Partial<IStyleSet<IPivotStyles>> = {
    linkContent: {
        fontSize: "18px",
        height: "60px",
        width: "180px"    
      }
  };

export const PivotBasicExample: React.FunctionComponent = () => {
  return (
    <Pivot styles={pivotStyles}>
      <PivotItem headerText="My Files">
        <Label>Pivot #1</Label>
      </PivotItem>
      <PivotItem headerText="Recent">
        <Label>Pivot #2</Label>
      </PivotItem>
      <PivotItem headerText="Shared with me">
        <Label>Pivot #3</Label>
      </PivotItem>
    </Pivot>
  );
};

你能增加 Pivots 的大小吗？

Can you increase the size of Pivots?

typescript

office-ui-fabric

react-tsx