Pivot
TabTabPage
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
Pivot #1
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Icon and Count
Pivot #1: Files
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Size
Pivot #1: Large File
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
HeaderType
Pivot #1: File tab
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Binding
Pivot #1: Samples
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Detached
Hello I am Fooooooooooooo
Events
Pivot #1: Foo
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Last header clicked:
Templates
Pivot #1
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Alignment
Pivot #1
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Position
Pivot Position: Top
Pivot #1: File
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Pivot Position: Bottom
Pivot #1: File
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Pivot Position: Start
Pivot #1: File
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Pivot Position: End
Pivot #1: File
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Overflow
The OverflowBehavior parameter controls how the header behaves when there is not enough room to display all the tabs.
Menu (overflown tabs are moved into an overflow menu):
Content of the File tab.
Slide (next and previous buttons slide through the tabs):
Content of the File tab.
Scroll (a scroll bar is shown below the tabs):
Content of the File tab.
The overflow behavior also works with a vertical header (Position set to Start or End). A constrained height is required for the header to overflow vertically.
Menu (vertical):
Content of the File tab.
Slide (vertical):
Content of the File tab.
Scroll (vertical):
Content of the File tab.
Color
Pivot #1: Primary
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Pivot #1: Primary background
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
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:
Pivot #1: Home
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge.
Bootstrap:
Pivot #1: Home
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge.
Style & Class
Component's Style & Class:
Pivot #1
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Pivot #1
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Styles & Classes:
Pivot #1
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
Pivot #1
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
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). |
| NextIcon | BitIconInfo? | null | Gets or sets the icon of the next button in the Slide overflow behavior using custom CSS classes for external icon libraries. Takes precedence over NextIconName when both are set. |
| NextIconName | string? | null | Gets or sets the name of the icon of the next button in the Slide overflow behavior from the built-in Fluent UI icons (default: ChevronRight for horizontal pivots and ChevronDown for vertical pivots). |
| OnChange | EventCallback<BitPivotItem> | Callback for when the selected pivot item changes. | |
| OnItemClick | EventCallback<BitPivotItem> | Callback for when the a pivot item is clicked. | |
| OverflowAriaLabel | string? | null | The aria-label of the overflow menu button in the Menu overflow behavior. |
| OverflowBehavior | BitPivotOverflowBehavior? | null | Overflow behavior when there is not enough room to display all of the links/tabs. |
| OverflowIcon | BitIconInfo? | null | Gets or sets the icon of the overflow menu button in the Menu overflow behavior using custom CSS classes for external icon libraries. Takes precedence over OverflowIconName when both are set. |
| OverflowIconName | string? | null | Gets or sets the name of the icon of the overflow menu button in the Menu overflow behavior from the built-in Fluent UI icons (default: More). |
| Position | BitPivotPosition | BitPivotPosition.Top | Position of the pivot header. |
| PreviousIcon | BitIconInfo? | null | Gets or sets the icon of the previous button in the Slide overflow behavior using custom CSS classes for external icon libraries. Takes precedence over PreviousIconName when both are set. |
| PreviousIconName | string? | null | Gets or sets the name of the icon of the previous button in the Slide overflow behavior from the built-in Fluent UI icons (default: ChevronLeft for horizontal pivots and ChevronUp for vertical pivots). |
| 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. |
| HeaderContainer | string? | null | Custom CSS classes/styles for the header container (wrapper) of the BitPivot. |
| SlideButton | string? | null | Custom CSS classes/styles for the slide (next/previous) buttons of the BitPivot in the Slide overflow behavior. |
| OverflowButton | string? | null | Custom CSS classes/styles for the overflow menu button of the BitPivot in the Menu overflow behavior. |
| OverflowCallout | string? | null | Custom CSS classes/styles for the overflow menu (callout) of the BitPivot in the Menu overflow behavior. |
| OverflowItem | string? | null | Custom CSS classes/styles for the overflow menu item of the BitPivot in the Menu overflow behavior. |
| 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. |
BitPivotOverflowBehavior 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. |
| Slide | 3 | Display next and previous buttons to slide through the tabs that don't fit. |
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.
- On this page