- bit BlazorUI
Home Docs

Pivot

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
Count and Icon
Large link size
Tab style
Large Tab style
Change tabs from outside of the component
Render content separately
Hello I am Foo
Events
Last Pivot clicked:
Show/Hide tabs
Custom Header
Position
Pivot Position: Top

Pivot Position: Bottom

Pivot Position: Left

Pivot Position: Right
Disabled state
Style & Class
Component's Style & Class:





Styles & Classes:


RTL

Implementation

BitPivot parameters
Name
Type
Default value
Description
ChildContent RenderFragment? null The content of pivot, It can be Any custom tag.
Classes BitPivotClassStyles? null Custom CSS classes for different parts of the BitPivot component.
DefaultSelectedKey string? null Default selected key for the pivot.
HeadersOnly bool false Whether to skip rendering the tabpanel with the content of the selected tab.
LinkFormat BitPivotLinkFormat BitPivotLinkFormat.Links Pivot link format, display mode for the pivot links.
LinkSize BitPivotLinkSize BitPivotLinkSize.Normal Pivot link size.
OverflowBehavior BitOverflowBehavior BitOverflowBehavior.None Overflow behavior when there is not enough room to display all of the links/tabs.
OnItemClick EventCallback<BitPivotItem> Callback for when the a pivot item is clicked.
Position BitPivotPosition BitPivotPosition.Top Position of the pivot header.
SelectedKey string? null Key of the selected pivot item. Updating this will override the Pivot's selected item state.
Styles BitPivotClassStyles? null Custom CSS styles for different parts of the BitPivot component.
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).
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.
ContentView string? null Custom CSS classes/styles for the content view 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.
BitLinkFormat enum
Name
Value
Description
Tabs 0 Display Pivot Links as Tabs.
Links 1 Display Pivot Links as links.
BitLinkSize enum
Name
Value
Description
Normal 0 Display Link using normal font size.
Large 1 Display links using large font 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.