Home Docs

Pivot
Tab
TabPage

The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more contentviews and relies on text headers to articulate the different sections of content. Tapping on a pivot item header navigates to that header's section content. Tabs are a visual variant of Pivot that use a combination of icons and textor just icons to articulate section content.

Usage

Basic
Icon and Count
Size
HeaderType
Binding


Detached
Hello I am Fooooooooooooo


Events


Last header clicked:
Templates
Alignment
Position
Pivot Position: Top




Pivot Position: Bottom




Pivot Position: Start




Pivot Position: End

Color

External Icons
Use icons from external libraries like FontAwesome, and Bootstrap Icons with the Icon parameter.
See the BitIconInfo section in the parameters table for usage.


FontAwesome:





Bootstrap:

Style & Class
Component's Style & Class:







Styles & Classes:




RTL






API

BitPivot parameters
Name
Type
Default value
Description
Alignment BitAlignment? null Determines the alignment of the header section of the pivot.
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.
DefaultSelectedKey string? null Default selected key for the pivot.
HeaderOnly bool false Whether to skip rendering the tabpanel with the content of the selected tab.
HeaderType BitPivotHeaderType BitPivotHeaderType.Link The type of the pivot header items.
MountAll bool false Mounts all tabs at render time and hide non-selected tabs with CSS styles instead of not-rendering them (useful for processing/extracting data).
OnItemClick EventCallback<BitPivotItem> Callback for when the a pivot item is clicked.
OnChange EventCallback<BitPivotItem> Callback for when the selected pivot item changes.
OverflowBehavior BitOverflowBehavior BitOverflowBehavior.None Overflow behavior when there is not enough room to display all of the links/tabs.
Position BitPivotPosition BitPivotPosition.Top Position of the pivot header.
SelectedKey string? null Key of the selected pivot item.
Size BitSize? null The size of the pivot header items.
Styles BitPivotClassStyles? null Custom CSS styles for different parts of the pivot.
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.
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.
IsEnabled bool true Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
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.
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 0 Defines an optional item count displayed in parentheses just after the linkText.
Key string? null A required key to uniquely identify a pivot item.
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.
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.
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.
BitSize enum
Name
Value
Description
Small 0 The small size.
Medium 1 The medium size.
Large 2 The large size.
BitOverflowBehavior 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.
BitPivotPosition enum
Name
Value
Description
Top 0 Display header at the top.
Bottom 1 Display header at the Bottom.
Start 2 Display header at the start (Left for LTR and Right for RTL).
End 3 Display header at the end (Right for LTR and Left for RTL).
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

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.
  • On this page