Pivot - 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

Default BitPivot
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
OnItemClick event
Last Pivot clicked:
Show/Hide tabs
Custom Header
BitPivot positioning
Pivot Position: Top

Pivot Position: Bottom

Pivot Position: Left

Pivot Position: Right
Disabled state

Implementation

BitPivot parameters
Name
Type
Default value
Description
ChildContent RenderFragment? null The content of pivot, It can be Any custom tag.
ClassStyles BitPivotClassStyles? null Custom CSS classes/styles 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.
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.
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
Container BitClassStylePair? null Custom CSS classes/styles for the modal container.
BitClassStylePair properties
Name
Type
Default value
Description
Class string? null Custom CSS class.
Style string? null Custom CSS style.
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).