Forum Discussion

naveenmaurya's avatar
naveenmaurya
Copper Contributor
Nov 03, 2019

Set width for `PivotItem` in Office UI Fabric

I am using Pivot and PivotItem from Office UI Fabric to display my content in tabs. Currently when the tab renders, all the tabs are left aligned.

 

 

I need to display the tabs with equal width so that they occupy the 100% width of the page.
Below is the code for 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>

 

Below is the code that I could figure out to add styles to Pivot. But we do not have styles attribute for PivotItem.


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


How can I apply style to PivotItem so that I can add width to it?

No RepliesBe the first to reply

Resources