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: Left




Pivot Position: Right

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.
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.
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 The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
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.
IconName string? null The icon name for the icon shown next to the pivot link.
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.
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.
Left 2 Display header at the Left.
Right 3 Display header at the Right.
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.
  • On this page