From 2372abb1d9594e4cb383a64f46d34d2738928c5e Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 4 Nov 2024 15:55:54 +0200 Subject: [PATCH 1/4] docs(TabStrip): add tab alignment documentation --- components/tabstrip/overview.md | 10 +++++-- components/tabstrip/tabs-alignment.md | 41 +++++++++++++++++++++++++++ components/tabstrip/tabs-position.md | 4 +-- 3 files changed, 51 insertions(+), 4 deletions(-) create mode 100644 components/tabstrip/tabs-alignment.md 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..e9c8183330 --- /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 specify 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..95147eb28f 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 positione to 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 From ec025238f8a88d8ec5e81364598580047f9d1845 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Tue, 5 Nov 2024 14:40:31 +0200 Subject: [PATCH 2/4] chore: apply suggestion Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/tabstrip/tabs-alignment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tabstrip/tabs-alignment.md b/components/tabstrip/tabs-alignment.md index e9c8183330..aa2c4c14d4 100644 --- a/components/tabstrip/tabs-alignment.md +++ b/components/tabstrip/tabs-alignment.md @@ -12,7 +12,7 @@ position: 11 By design, the tabs are displayed on the left side of the TabStrip header. -You can customize specify their alignment through the `TabAlignment` parameter. It takes a member of the `Telerik.Blazor.TabStripTabAlignment` enumeration: +You can customize their alignment through the `TabAlignment` parameter. It takes a member of the `Telerik.Blazor.TabStripTabAlignment` enumeration: * `Start` (default) * `End` From 57857ea363e096fb0507e4f269aa244d05a442de Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Tue, 5 Nov 2024 14:40:42 +0200 Subject: [PATCH 3/4] chore: apply suggestion Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/tabstrip/tabs-position.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tabstrip/tabs-position.md b/components/tabstrip/tabs-position.md index 95147eb28f..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: The TabPosition parameter in the TabStrip component allows you to control the positioning of the tabs. By default, tabs are positione to the top of the TabStrip. +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 From 3c77cec85010c611e08bf6899120c20083f95eaa Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Wed, 6 Nov 2024 09:47:04 +0200 Subject: [PATCH 4/4] chore: fix typo Co-authored-by: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> --- components/tabstrip/tabs-alignment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tabstrip/tabs-alignment.md b/components/tabstrip/tabs-alignment.md index aa2c4c14d4..db6de666b6 100644 --- a/components/tabstrip/tabs-alignment.md +++ b/components/tabstrip/tabs-alignment.md @@ -23,7 +23,7 @@ You can customize their alignment through the `TabAlignment` parameter. It takes >caption Set the desired tab alignment. ````CSHTML - + First tab content.