Forum Discussion
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?