Skip to content
BlazorUI

Navs

Pivot

Bit.BlazorUITabTabPage

The Pivot switches between sections of content from a row (or column) of tab headers. Headers carry icons, counts and dismiss buttons, can be added and reordered, sit on any side, and fold into a menu, a scroll area, slide buttons or extra lines when they do not fit. The selection is a bindable key that can be vetoed before it moves, and the header is one tab stop navigated with the arrow, Home and End keys, as the WAI-ARIA tabs pattern describes.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

A list of BitPivotItems, each a header and the content it shows. The first selectable item starts selected.

Pivot #1: File

Everything that has been saved to this workspace, newest first.

Icon & count

IconName puts an icon before the header text and ItemCount a number after it. Stacked puts the icon above the text, for a shorter tab.

Pivot #1: Files


Stacked:

Pivot #1: Home

HeaderType

Link (default) marks the selected header with an animated indicator, Tab fills it with the pivot's color, and Outline draws it as a bordered tab opening onto the panel, its outer edge in the pivot's color.

Link:

Pivot #1: File


Tab:

Pivot #1: File


Outline:

Pivot #1: File

Alignment, FullWidth & Gap

Alignment places the headers along the header line (any BitAlignment), FullWidth stretches them to share it - a segmented control - and Gap sets the room between them.

Alignment: Center

Pivot #1: File


Alignment: SpaceBetween

Pivot #1: File


FullWidth with Gap 4px:

Pivot #1: Overview


Gap 2rem:

Pivot #1: File

Placement

Placement puts the header on any side: Top (default), Bottom, Start or End. Start and End stack the headers in a column, which the up and down arrows navigate. A pivot nested in a panel keeps its own position and header type.

Bottom:

Pivot #1: File


Start:

Pivot #1: File


End:

Pivot #1: File


Nested:

Account / Profile

Overflow

OverflowBehavior decides what happens to headers that do not fit: Menu folds them behind a More button, Slide adds previous/next buttons, Scroll shows a scroll bar, Wrap runs them onto more lines and None (default) lets them overflow. A tab selected from the keyboard or by key is scrolled into view; the More menu takes the arrow, Home/End and first-letter keys. AutoHideSlideButtons hides the slide buttons while everything fits.

Menu:

Content of the File tab.


Slide:

Content of the File tab.


Scroll:

Content of the File tab.


Wrap:

Content of the File tab.


AutoHideSlideButtons (everything fits, so no buttons):

Content of the File tab.


Vertical Menu and Slide (a vertical header needs a constrained height to overflow, given here by the element around it):

Content of the File tab.

Content of the File tab.

Header content

HeaderStart and HeaderEnd put your own content at either end of the header, outside the tablist, so it keeps its own tab stop and the arrow keys still walk only the tabs.

Pivot #1: File

Templates

Header replaces the header text with your own markup; Body is the named alias of the content, which tells the two apart. An icon still comes before a custom header and a count after it.

Pivot #1: given through the Body template.

Binding

Give each item a Key: @bind-SelectedKey follows the selection both ways, DefaultSelectedKey only picks the starting tab. A key of a disabled or hidden tab is refused. SelectedItem, Items and SelectItemByKey drive the pivot from code.

Pivot #1: Samples



Selected key: 1


DefaultSelectedKey:

Pivot #2: B (starts here)

Events

OnChange reports every selection change, whatever caused it; OnItemClick only an activated header, even one already selected. An item has its own OnClick and a Title tooltip. OnChanging runs first and vetoes the change with Cancel, e.g. for a tab holding unsaved work.

Pivot #1: Foo

Last changed to:
Last header clicked:
Clicks on the Biz header: 0


OnChanging:


Pivot #1: Draft

Last refused:

Panels

Only the selected panel is rendered by default. KeepMounted keeps every panel that has been shown, so its state survives a tab switch; MountAll renders every panel up front. Type into a box, switch tabs, come back. HeaderOnly renders no panel at all, so the selected key can drive content anywhere on the page.

Default:



KeepMounted:



MountAll:



HeaderOnly:


Hello, I am Foo.

Dismiss & add

Dismissible adds a dismiss button to every header (an item overrides it with its own Dismissible); the Delete key does the same. Addable adds a button that raises OnAdd. The items belong to your markup, so OnItemDismiss and OnAdd are where you change the list; a dismissed selected tab hands the selection and the focus to its neighbour.

Home stays: its own Dismissible is false.

Selected key: Home

Reorderable

Reorderable lets headers be dragged, or moved with Ctrl+arrow keys. OnItemReorder reports the item with its old and new index, and your handler moves it. An item's own Reorderable="false" pins it.

Content of the File tab.

Keyboard & accessibility

The header is one tab stop: arrows move between tabs (mirrored in RTL, up/down when vertical), Home/End jump to the ends, Enter/Space select, and disabled or hidden tabs are skipped. Each tab announces its position (tabs folded into the overflow menu still count) and its Delete / Ctrl+arrow shortcuts. Name the tablist with AriaLabel or AriaLabelledBy. SelectOnFocus selects as the focus moves, Loop="false" stops at the ends, and Navigable="false" gives every tab its own tab stop.

Account settings (AriaLabelledBy + SelectOnFocus)

Pivot #1: Profile


Loop="false":

Pivot #1: File


Navigable="false":

Pivot #1: File

Disabled

Disabled disables the whole pivot, or one item when set on it. Disabled tabs are announced as such, skipped by the arrow keys and refused as a selected key.

Disabled pivot:

Pivot #1: File


Disabled item:

Pivot #1: File


Disabled Tab pivot:

Pivot #1: File

Cascading parameters

BitParams carries a BitPivotParams to every pivot under it. It fills in only what a pivot leaves unset, so the second pivot keeps its own HeaderType. Selection, templates and callbacks stay per pivot.

Pivot #1: File

Pivot #1: File

Color

Color (a BitColor) paints the indicator of a Link pivot, the fill of a Tab pivot and the outer edge of an Outline one, as well as the focus ring.

Primary:

Pivot #1: File


Secondary:

Pivot #1: File


Tertiary:

Pivot #1: File


Info:

Pivot #1: File


Success:

Pivot #1: File


Warning:

Pivot #1: File


SevereWarning:

Pivot #1: File


Error:

Pivot #1: File


PrimaryBackground:

Pivot #1: File


SecondaryBackground:

Pivot #1: File


TertiaryBackground:

Pivot #1: File


PrimaryForeground:

Pivot #1: File


SecondaryForeground:

Pivot #1: File


TertiaryForeground:

Pivot #1: File


PrimaryBorder:

Pivot #1: File


SecondaryBorder:

Pivot #1: File


TertiaryBorder:

Pivot #1: File


Tab - Primary:

Pivot #1: File


Tab - Success:

Pivot #1: File


Tab - Error:

Pivot #1: File

External Icons

Icon takes icons from external libraries such as FontAwesome and Bootstrap Icons. See BitIconInfo for usage.

FontAwesome:

Pivot #1: Home


Bootstrap:

Pivot #1: Home

Size

Size scales the headers' text and height: Small, Medium (default) and Large.

Small:

Pivot #1: File


Medium:

Pivot #1: File


Large:

Pivot #1: File

Style & Class

Style and Class land on the root; Styles and Classes reach each part by name (see BitPivotClassStyles). The public --bit-Pivot-* CSS variables re-skin the indicator, divider, items, gap, dismiss button, panel and overflow menu, set on :root, an ancestor or one pivot's Style.

Style & Class:

Pivot #1: File

Pivot #1: File


Styles & Classes:

Pivot #1: File

Pivot #1: File


CSS variables - pill tabs:

Pivot #1: Day


CSS variables - edge-to-edge indicator on a divider, with long headers truncated:

Pivot #1: Overview


CSS variables - an Outline pivot whose panel joins its header as one card:

Pivot #1: Preview

RTL

Dir="Rtl" mirrors the pivot: the headers, indicator and slide buttons, the Start and End positions, and the left and right arrow keys.

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.


لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.

BitPivot CSS variables

Name Default value Description
--bit-Pivot-color the Color's main color Accent: the Link indicator, the fill of the selected Tab, the outer edge of the selected Outline tab, the drop marker and the More button that holds the selection.
--bit-Pivot-focus-color the Color's focus color Focus ring of the items, the panel and the header buttons.
--bit-Pivot-disabled-color the Color's disabled color Indicator and Tab fill of a disabled selection.
--bit-Pivot-disabled-text-color the Color's disabled text color Text of a disabled item or pivot.
--bit-Pivot-indicator-color --bit-Pivot-color Selection indicator of a Link pivot and the outer edge of the selected Outline tab (transparent hides it).
--bit-Pivot-indicator-thickness --bit-siz-tab-indicator Stroke of the selection indicator.
--bit-Pivot-indicator-inset spacing(1) Inset of the indicator from the item's edges (0 spans the whole item).
--bit-Pivot-indicator-radius --bit-shp-radius-tab-indicator / --bit-shp-radius-tab-indicator-base Corner radius of the indicator, one length for every corner (by default the corners facing the label and the ones on the edge it stands on follow a token each).
--bit-Pivot-item-color --bit-clr-fg-pri Text of an item at rest.
--bit-Pivot-item-hover-color --bit-clr-fg-pri-hover (Tab: the Color's on-color) Text of a hovered item.
--bit-Pivot-item-hover-background --bit-clr-bg-pri-hover (Tab: the Color's hover color) Background of a hovered item.
--bit-Pivot-item-selected-color --bit-clr-fg-pri (Tab: the Color's on-color) Text of the selected item.
--bit-Pivot-item-selected-background transparent (Tab: --bit-Pivot-color; Outline: --bit-clr-bg-pri) Background of the selected item.
--bit-Pivot-item-font-weight --bit-tpg-fw-regular Weight of an item's text at rest (and of the overflow menu's rows).
--bit-Pivot-item-selected-font-weight --bit-tpg-fw-semibold Weight of the selected item's text; its room is reserved, so the tabs never shift.
--bit-Pivot-item-height --bit-siz-tab (x0.75 Small, x1.25 Large) Height of an item and of the slide and add buttons, for every Size.
--bit-Pivot-item-padding-inline spacing(1) Inline padding of an item.
--bit-Pivot-item-radius 0 (Tab and the outer corners of Outline: --bit-shp-radius-control) Corner radius of an item, its focus ring and the header's slide and add buttons.
--bit-Pivot-item-min-width auto Narrowest an item gets, e.g. to line up icon-only tabs.
--bit-Pivot-item-max-width none Widest an item gets; a longer header text ends in an ellipsis (give the item a Title).
--bit-Pivot-font-size per Size, from the type ramp Text size of the items and the overflow menu.
--bit-Pivot-gap spacing(1); spacing(0.5) vertical or wrapped; 0 FullWidth Room between the items. The Gap parameter overrides it.
--bit-Pivot-icon-size inherited Size of an item's icon.
--bit-Pivot-dismiss-size spacing(3) Box of the dismiss button: its pointer target, 24px by default for WCAG 2.2 SC 2.5.8.
--bit-Pivot-divider-thickness --bit-siz-tab-divider (Outline: --bit-shp-brd-width) The rule between the header and the panel, under the indicator: none under Fluent, 1px under Material, always drawn for Outline.
--bit-Pivot-divider-color --bit-clr-brd-sec Color of that rule, and of the border of the selected Outline tab.
--bit-Pivot-body-padding 0 Padding of the tab panel.
--bit-Pivot-body-gap spacing(2) Room between the header and the tab panel (0 attaches the panel to the header).
--bit-Pivot-callout-background --bit-clr-bg-pri Background of the overflow menu.
--bit-Pivot-callout-shadow the popup elevation token Elevation of the overflow menu.
--bit-Pivot-callout-radius --bit-shp-radius-popup Corner radius of the overflow menu.

API

Every parameter, public member, sub-class and enum this component exposes.

BitPivot parameters

Name Type Default value Description
Addable bool false Renders a button at the end of the pivot items that reports a request for a new tab through the OnAdd callback. The pivot does not add an item itself, since the items belong to the markup that declares them, so the handler is what puts the new one into the list.
AddAriaLabel string? null The aria-label of the add button of the pivot (default: Add).
AddIcon BitIconInfo? null Gets or sets the icon of the add button of the pivot using custom CSS classes for external icon libraries. Takes precedence over AddIconName when both are set.
AddIconName string? null Gets or sets the name of the icon of the add button of the pivot from the built-in Fluent UI icons (default: Add).
AddTitle string? null The title (tooltip) of the add button of the pivot (default: Add).
Alignment BitAlignment? null Determines the alignment of the header section of the pivot (default: Start).
AriaLabelledBy string? null The id of the element that labels the header of the pivot (rendered into the aria-labelledby of the tablist), which is what names a pivot sitting under a heading of its own. It wins over the AriaLabel.
AutoHideSlideButtons bool false Renders the next and previous buttons of the Slide overflow behavior only while there actually is something to slide to, instead of leaving them in place in their disabled state.
ChildContent RenderFragment? null The content of pivot.
Classes BitPivotClassStyles? null Custom CSS classes for different parts of the pivot.
Color BitColor? null The general color of the pivot (default: Primary).
DefaultSelectedKey string? null Default selected key for the pivot.
DismissAriaLabelFormat string? null The format of the aria-label of the dismiss button of the pivot items (default: "Remove {0}"), where the placeholder is filled with the header text of the item.
DismissIcon BitIconInfo? null Gets or sets the icon of the dismiss button of the pivot items using custom CSS classes for external icon libraries. Takes precedence over DismissIconName when both are set.
DismissIconName string? null Gets or sets the name of the icon of the dismiss button of the pivot items from the built-in Fluent UI icons (default: Cancel).
Dismissible bool false Renders a dismiss button on every pivot item, which reports the item to dismiss through the OnItemDismiss callback. A single item opts in or out of it on its own using the Dismissible parameter of the BitPivotItem.
DismissTitle string? null The title (tooltip) of the dismiss button of the pivot items (default: Remove).
FullWidth bool false Stretches the pivot items to share the whole width (or the whole height in a vertical pivot) of the header.
Gap string? null The gap between the pivot items of the header (any CSS length), overriding the --bit-Pivot-gap CSS variable.
HeaderEnd RenderFragment? null The content rendered at the end of the header, after the pivot items and after the overflow or slide affordances, which is where the actions belonging to the whole pivot usually go.
HeaderOnly bool false Whether to skip rendering the tabpanel with the content of the selected tab.
HeaderStart RenderFragment? null The content rendered at the start of the header, before the pivot items and before the overflow or slide affordances.
HeaderType BitPivotHeaderType? null The type of the pivot header items (default: Link).
KeepMounted bool false Keeps the content of every tab that has been shown at least once mounted, so that leaving a tab and coming back to it finds the content in the state it was left in. Unlike MountAll, a tab that has never been selected is not rendered at all.
Loop bool true Wraps the keyboard navigation of the header around at both of its ends, so that the next key on the last item lands on the first one.
MountAll bool false Mounts all tabs at render time and hides the non-selected ones instead of not rendering them (useful for processing or extracting their content).
Navigable bool true Enables the roving tabindex behavior, which turns the whole header into a single tab stop that is navigable using the arrow, Home, and End keys.
NextAriaLabel string? null The aria-label of the next button in the Slide overflow behavior (default: Next).
NextIcon BitIconInfo? null Gets or sets the icon of the next button in the Slide overflow behavior using custom CSS classes for external icon libraries. Takes precedence over NextIconName when both are set.
NextIconName string? null Gets or sets the name of the icon of the next button in the Slide overflow behavior from the built-in Fluent UI icons (default: ChevronRight for horizontal pivots and ChevronDown for vertical pivots).
OnAdd EventCallback Callback for when the add button of an Addable pivot is clicked.
OnChange EventCallback<BitPivotItem> Callback for when the selected pivot item changes.
OnChanging EventCallback<BitPivotChangeArgs> Callback for just before the selected pivot item changes, which can call the change off by setting the Cancel of its arguments, so that a tab holding unsaved work can refuse to be left.
OnItemClick EventCallback<BitPivotItem> Callback for when a pivot header item is clicked.
OnItemDismiss EventCallback<BitPivotItem> Callback for when the dismiss button of a pivot item is clicked, or the Delete key is pressed while it holds the focus. The pivot does not remove the item itself, since the items belong to the markup that declares them, so the handler is what takes the item out of the list.
OnItemReorder EventCallback<BitPivotReorderEventArgs> Callback for when a pivot item is dragged onto another one, or moved with the Ctrl+Arrow keys, in a Reorderable pivot. The pivot does not move the item itself, since the items belong to the markup that declares them, so the handler is what reorders the list.
OverflowAriaLabel string? null The aria-label of the overflow menu button in the Menu overflow behavior (default: More).
OverflowBehavior BitPivotOverflowBehavior? null Overflow behavior when there is not enough room to display all of the links/tabs (default: None).
OverflowIcon BitIconInfo? null Gets or sets the icon of the overflow menu button in the Menu overflow behavior using custom CSS classes for external icon libraries. Takes precedence over OverflowIconName when both are set.
OverflowIconName string? null Gets or sets the name of the icon of the overflow menu button in the Menu overflow behavior from the built-in Fluent UI icons (default: More).
Placement BitPlacement? null Placement of the pivot header (default: Top).
PreviousAriaLabel string? null The aria-label of the previous button in the Slide overflow behavior (default: Previous).
PreviousIcon BitIconInfo? null Gets or sets the icon of the previous button in the Slide overflow behavior using custom CSS classes for external icon libraries. Takes precedence over PreviousIconName when both are set.
PreviousIconName string? null Gets or sets the name of the icon of the previous button in the Slide overflow behavior from the built-in Fluent UI icons (default: ChevronLeft for horizontal pivots and ChevronUp for vertical pivots).
Reorderable bool false Lets the pivot items be dragged onto one another, and the focused one be moved with the Ctrl+Arrow keys, to ask for a new order through the OnItemReorder callback. A single item opts in or out of it on its own using the Reorderable parameter of the BitPivotItem.
SelectedKey string? null Key of the selected pivot item.
SelectOnFocus bool false Selects the focused pivot item while the header is navigated with the keyboard, so that the selection follows the focus (the automatic activation of the WAI-ARIA tabs pattern).
Size BitSize? null The size of the pivot header items (default: Medium).
Stacked bool false Stacks the icon of the pivot items on top of their text instead of putting the two side by side.
Styles BitPivotClassStyles? null Custom CSS styles for different parts of the pivot.

BitPivot public members

Name Type Default value Description
SelectedItem BitPivotItem? null The pivot item that is currently selected.
Items IReadOnlyList<BitPivotItem> The pivot items in the order they are declared in.
SelectItemByKey Task SelectItemByKey(string? key) Selects the pivot item carrying the given key, if such an item exists and is enabled.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
Disabled bool false Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id string? null Gets or sets the unique identifier for the component's root element.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitPivotItem properties

Name Type Default value Description
Body RenderFragment? null The content of the pivot item, It can be Any custom tag or a text (alias of ChildContent).
BodyClass string? null The custom css class of the content of the pivot item.
BodyStyle string? null The custom css style of the content of the pivot item.
ChildContent RenderFragment? null The content of the pivot item, It can be Any custom tag or a text.
Dismissible bool? null Overrides the Dismissible of the parent pivot for this item alone, so a single tab can gain or lose its dismiss button independently of the rest.
Header RenderFragment? null The content of the pivot item header, It can be Any custom tag or a text.
HeaderText string? null The text of the pivot item header, The text displayed of each pivot link.
Icon BitIconInfo? null Gets or sets the icon to display next to the pivot link using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set.
IconName string? null Gets or sets the name of the icon to display next to the pivot link from the built-in Fluent UI icons.
ItemCount int? null Defines an optional item count displayed in parentheses just after the link text.
IsSelected bool false Whether or not the item is selected. An item that declares itself selected takes the selection of the pivot when it is registered.
Key string? null A required key to uniquely identify a pivot item.
OnClick EventCallback Callback for when this pivot item header is clicked or activated from the keyboard.
OnDismiss EventCallback Callback for when the dismiss button of this pivot item is clicked, or the Delete key is pressed while it holds the focus.
Reorderable bool? null Overrides the Reorderable of the parent pivot for this item alone, so a single tab can be pinned in place while the rest of the header is reordered, or the other way around.
Title string? null The title (tooltip) of the pivot item header, which is the usual place for the full text of a header that is too long to be shown in one.

BitPivotChangeArgs properties

Name Type Default value Description
Item BitPivotItem The pivot item the selection is about to move to.
Cancel bool false Set to true to cancel the change and keep the item that is currently selected.

BitPivotReorderEventArgs properties

Name Type Default value Description
Item BitPivotItem The pivot item that is being moved.
OldIndex int 0 The index the item is moving from.
NewIndex int 0 The index the item is moving to.

BitPivotClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the BitPivot.
Header string? null Custom CSS classes/styles for the header of the BitPivot.
HeaderContainer string? null Custom CSS classes/styles for the header container (wrapper) of the BitPivot.
SlideButton string? null Custom CSS classes/styles for the slide (next/previous) buttons of the BitPivot in the Slide overflow behavior.
OverflowButton string? null Custom CSS classes/styles for the overflow menu button of the BitPivot in the Menu overflow behavior.
OverflowCallout string? null Custom CSS classes/styles for the overflow menu (callout) of the BitPivot in the Menu overflow behavior.
OverflowItem string? null Custom CSS classes/styles for the overflow menu item of the BitPivot in the Menu overflow behavior.
Body string? null Custom CSS classes/styles for the items body of the BitPivot.
HeaderItem string? null Custom CSS classes/styles for the header item of the BitPivot.
SelectedItem string? null Custom CSS classes/styles for the selected item of the BitPivot.
HeaderItemContent string? null Custom CSS classes/styles for the header item content of the BitPivot.
HeaderIconContainer string? null Custom CSS classes/styles for the header icon container of the BitPivot.
HeaderIcon string? null Custom CSS classes/styles for the header icon of the BitPivot.
HeaderText string? null Custom CSS classes/styles for the header text of the BitPivot.
HeaderItemCount string? null Custom CSS classes/styles for the header item count of the BitPivot.
HeaderStart string? null Custom CSS classes/styles for the start content of the header of the BitPivot.
HeaderEnd string? null Custom CSS classes/styles for the end content of the header of the BitPivot.
DismissButton string? null Custom CSS classes/styles for the dismiss button of the header items of the BitPivot.
DismissIcon string? null Custom CSS classes/styles for the dismiss icon of the header items of the BitPivot.
AddButton string? null Custom CSS classes/styles for the add button of the BitPivot.
AddIcon string? null Custom CSS classes/styles for the add icon of the BitPivot.

BitIconInfo properties

Name Type Default value Description
Name string? null Gets or sets the name of the icon.
BaseClass string? null Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty.
Prefix string? null Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty.

BitAlignment enum

Name Value Description
Start 0
End 1
Center 2
SpaceBetween 3
SpaceAround 4
SpaceEvenly 5
Baseline 6
Stretch 7

BitPivotHeaderType enum

Name Value Description
Tab 0 Renders pivot header items as Tab.
Link 1 Renders pivot header items as link.
Outline 2 Renders pivot header items as outlined (enclosed) tabs: the selected one is drawn as a bordered tab that opens onto the panel, with its outer edge in the pivot's color.

BitSize enum

Name Value Description
Small 0 The small size.
Medium 1 The medium size.
Large 2 The large size.

BitPivotOverflowBehavior enum

Name Value Description
None 0 Pivot links will overflow the container and may not be visible.
Menu 1 Display an overflow menu that contains the tabs that don't fit.
Scroll 2 Display a scroll bar below of the tabs for moving between them.
Slide 3 Display next and previous buttons to slide through the tabs that don't fit.
Wrap 4 Wrap the tabs that don't fit onto as many extra lines (or columns) as they need.

BitPlacement enum

Name Value Description
Top 0 The top edge.
Bottom 1 The bottom edge.
Start 2 The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top.
End 3 The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom.
Left 4 The left edge, in both reading directions.
Right 5 The right edge, in both reading directions.
Center 6 The middle of the axis, against neither edge.
TopAndBottom 7 Both edges of the block axis at once.
StartAndEnd 8 Both edges of the inline axis at once, following the reading direction the way Start and End do.

BitColor enum

Name Value Description
Primary 0 Primary general color.
Secondary 1 Secondary general color.
Tertiary 2 Tertiary general color.
Info 3 Info general color.
Success 4 Success general color.
Warning 5 Warning general color.
SevereWarning 6 SevereWarning general color.
Error 7 Error general color.
PrimaryBackground 8 Primary background color.
SecondaryBackground 9 Secondary background color.
TertiaryBackground 10 Tertiary background color.
PrimaryForeground 11 Primary foreground color.
SecondaryForeground 12 Secondary foreground color.
TertiaryForeground 13 Tertiary foreground color.
PrimaryBorder 14 Primary border color.
SecondaryBorder 15 Secondary border color.
TertiaryBorder 16 Tertiary border color.

BitVisibility enum

Name Value Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).

BitDir enum

Name Value Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.