2

I am trying to implement a UI which has tabs (or Pivots ) from Office fabirc UI and i was wondering if i could increase the size(or better yet customize my pivot size)? I tried playing around with PivotLinkSize.large but i would like to increase both the height and the width of my Pivot. 

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

I am just getting into learning react and office fabric UI and would appreciate any help here.

novice_coder
  • 147
  • 2
  • 10

1 Answers1

3

IPivotProps.styles property could be utilized to customize the appearance of Pivot control, for example pivot links could be customized like this:

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

enter image description here

Vadim Gremyachev
  • 57,952
  • 20
  • 129
  • 193
  • 1
    Thank you, this worked ! Can you explain why we need to add IStyleSet ? Can we not do the same with just Partial ? Also , why do we add the height and width properties to linkContent and not root ? – novice_coder Sep 25 '19 at 22:20
  • 1
    You're right, there is no real benefit of `IStyleSet` here since `Pivot` does not support style functions for sub components (`subComponentStyles`) – Vadim Gremyachev Sep 26 '19 at 06:47
  • Regarding `root` style, it appears not very useful in this particular example since it defines styles for pivot links container – Vadim Gremyachev Sep 26 '19 at 06:52