Pivot
Tab
TabPage
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
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: Left
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: Right
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.
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. |
| 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). |
| 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. |
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.
Or you can review / edit this component on GitHub.
- On this page