зеркало из https://github.com/telerik/blazor-docs.git
Add tab alignment documentation (#2485)
* docs(TabStrip): add tab alignment documentation * chore: apply suggestion Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * chore: apply suggestion Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * chore: fix typo Co-authored-by: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> --------- Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> Co-authored-by: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com>
This commit is contained in:
Tsvetomir Hristov
GitHub
Родитель
15d31855ef
Коммит
9f5d120de0
|
|
@ -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 <br/> (`TabPosition.Top`)| Controls the position of the tabs.
|
||||
| `TabAlignment` | `TabStripTabAlignment` enum <br/> (`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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<TelerikTabStrip TabAlignment="@TabStripTabAlignment.End">
|
||||
<TabStripTab Title="First">
|
||||
First tab content.
|
||||
</TabStripTab>
|
||||
<TabStripTab Title="Second">
|
||||
Second tab content.
|
||||
</TabStripTab>
|
||||
<TabStripTab Title="Third">
|
||||
Third tab content.
|
||||
</TabStripTab>
|
||||
</TelerikTabStrip>
|
||||
````
|
||||
|
||||
## See Also
|
||||
|
||||
* [Live Demo: TabStrip - Tabs Position and Alignment](https://demos.telerik.com/blazor-ui/tabstrip/position-and-alignment)
|
||||
|
|
@ -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)
|
||||
* [Live Demo: TabStrip - Tabs Position and Alignment](https://demos.telerik.com/blazor-ui/tabstrip/position-and-alignment)
|
||||
Загрузка…
Ссылка в новой задаче