diff --git a/components/tabstrip/overview.md b/components/tabstrip/overview.md index 9330a20995..69cf2f53ac 100644 --- a/components/tabstrip/overview.md +++ b/components/tabstrip/overview.md @@ -48,6 +48,10 @@ The Tabs are the building blocks of the TabStrip. The component allows individua The Blazor TabStrip component allows you to control the position of the tabs. [Read more about the Tabs Position...]({%slug tabstrip-tabs-position%}) +## Alignment of the Tabs + +The Blazor TabStrip component allows you to control the alignment of the tabs. [Read more about the Tabs Alignment...]({%slug tabstrip-tabs-alignment%}) + ## Persist Content The Blazor TabStrip component can persist the content of the tabs. When the user navigates between the tabs, their content will be hidden with CSS only to avoid re-initialization. [Read more about the Persist Content...]({%slug tabstrip-persist-content%}) @@ -72,6 +76,8 @@ The TabStrip provides the following features to allow further customization of i |`PersistTabContent` | `bool` | Whether to remove the content of inactive tabs from the DOM (if `false`), or just hide it with CSS (if `true`). See [Persist Content]({%slug tabstrip-persist-content%}) | `Scrollable` | `bool` | Whether the tabs will be scrollable. See [Scrollable Tabs]({%slug tabstrip-scroll-tabs%}) | `TabPosition` | `TabPosition` enum
(`TabPosition.Top`)| Controls the position of the tabs. +| `TabAlignment` | `TabStripTabAlignment` enum
(`TabStripTabAlignment.Start`)| Controls the alignment of the tabs. + ### Styling and Appearance @@ -131,12 +137,12 @@ The `TabStrip` methods are accessible through its reference. ## Next Steps * [Configure the Tabs]({%slug tabstrip-tabs-configuration%}) -* [Explore the supported Tab positions]({%slug tabstrip-tabs-position%}) +* Explore the supported Tab [positions]({%slug tabstrip-tabs-position%}) and [alignments]({%slug tabstrip-tabs-alignment%}) * [Handle the TabStrip events]({%slug tabstrip-events%}) ## See Also * [Live Demo: TabStrip](https://demos.telerik.com/blazor-ui/tabstrip/index) -* [Live Demo: Tab Positions](https://demos.telerik.com/blazor-ui/tabstrip/tab-positions) +* [Live Demo: Tabs Position and Alignment](https://demos.telerik.com/blazor-ui/tabstrip/position-and-alignment) * [Events]({%slug tabstrip-events%}) * [TabStrip API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikTabStrip) diff --git a/components/tabstrip/tabs-alignment.md b/components/tabstrip/tabs-alignment.md new file mode 100644 index 0000000000..db6de666b6 --- /dev/null +++ b/components/tabstrip/tabs-alignment.md @@ -0,0 +1,41 @@ +--- +title: Tabs Alignment +page_title: TabStrip Tabs Alignment +description: The TabAlignment parameter in the TabStrip component allows you to control the alignment of the tabs. By default, tabs align to the left of the TabStrip header. +slug: tabstrip-tabs-alignment +tags: telerik,blazor,tab,strip,tabstrip,alignment +published: True +position: 11 +--- + +# TabStrip Tabs Alignment + +By design, the tabs are displayed on the left side of the TabStrip header. + +You can customize their alignment through the `TabAlignment` parameter. It takes a member of the `Telerik.Blazor.TabStripTabAlignment` enumeration: + +* `Start` (default) +* `End` +* `Center` +* `Justify` +* `Stretched` + +>caption Set the desired tab alignment. + +````CSHTML + + + First tab content. + + + Second tab content. + + + Third tab content. + + +```` + +## See Also + + * [Live Demo: TabStrip - Tabs Position and Alignment](https://demos.telerik.com/blazor-ui/tabstrip/position-and-alignment) \ No newline at end of file diff --git a/components/tabstrip/tabs-position.md b/components/tabstrip/tabs-position.md index fb5dae155b..00c0cf8520 100644 --- a/components/tabstrip/tabs-position.md +++ b/components/tabstrip/tabs-position.md @@ -1,7 +1,7 @@ --- title: Tabs Position page_title: TabStrip Tabs Position -description: Overview of the TabStrip for Blazor. +description: The TabPosition parameter in the TabStrip component allows you to control the positioning of the tabs. By default, tabs are positioned at the top of the TabStrip. slug: tabstrip-tabs-position tags: telerik,blazor,tab,strip,tabstrip,position published: True @@ -37,4 +37,4 @@ You can customize their position through the optional `TabPosition` attribute of ## See Also - * [Live Demo: TabStrip - Tab Positions](https://demos.telerik.com/blazor-ui/tabstrip/tab-positions) \ No newline at end of file + * [Live Demo: TabStrip - Tabs Position and Alignment](https://demos.telerik.com/blazor-ui/tabstrip/position-and-alignment) \ No newline at end of file