- bit BlazorUI
Home Docs
  • Inputs
  • Layouts
  • Lists
  • Navs
  • Notifications
  • Progress
  • Surfaces
  • Utilities
  • Extras
  • Iconography
  • Theming

    • 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
    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.
    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.
    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