You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/tabstrip/overview.md
+7Lines changed: 7 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -52,6 +52,10 @@ The Blazor TabStrip component allows you to control the position of the tabs. [R
52
52
53
53
The Blazor TabStrip component allows you to control the alignment of the tabs. [Read more about the Tabs Alignment...](slug://tabstrip-tabs-alignment)
54
54
55
+
## Tab Size
56
+
57
+
The Blazor TabStrip component allow you to set different size of the tabs and scroll buttons. [Read more about the TabStrip Sizing...](slug://tabstrip-tabs-size)
58
+
55
59
## Persist Content
56
60
57
61
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)
@@ -75,6 +79,9 @@ The TabStrip provides the following features to allow further customization of i
75
79
| `ActiveTabIndex` | `int` | The index of the currently shown tab. Supports two-way binding.
76
80
|`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)
77
81
| `Scrollable` | `bool` | Whether the tabs will be scrollable. See [Scrollable Tabs](slug://tabstrip-scroll-tabs)
82
+
| `ScrollButtonsPosition` | `TabStripScrollButtonsPosition` enum <br/> (`TabStripScrollButtonsPosition.Split`)| Specifies the position of the buttons when the TabStrip is scrollable.
83
+
| `ScrollButtonsVisibility` | `TabStripScrollButtonsVisibility` enum <br/> (`TabStripScrollButtonsVisibility.Visible`)| Specifies the visibility of the buttons when the TabStrip is scrollable.
84
+
| `Size` | `string` <br/> (`ThemeConstants.TabStrip.Size.Medium`)| Controls the size of the tabs.
78
85
| `TabPosition` | `TabPosition` enum <br/> (`TabPosition.Top`)| Controls the position of the tabs.
79
86
| `TabAlignment` | `TabStripTabAlignment` enum <br/> (`TabStripTabAlignment.Start`)| Controls the alignment of the tabs.
Copy file name to clipboardExpand all lines: components/tabstrip/scrollable-tabs.md
+53-1Lines changed: 53 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -45,6 +45,58 @@ To scroll the tabs only, set the `Scrollable` bool parameter of the TabStrip to
45
45
</TelerikTabStrip>
46
46
````
47
47
48
+
## Scroll Buttons Visibility
49
+
50
+
You can configure the TabStrip to show scroll buttons on both ends of the tab list. To customize this behavior, use the `ScrollButtonsVisibility` parameter of the TabStrip. This option accepts the following values of type `TabStripScrollButtonsVisibility`:
51
+
52
+
*`Visible` (default) - The scroll buttons will be constantly visible. If the tabs fit inside the TabStrip boundaries, the buttons will be disabled.
53
+
*`Auto` - The scroll buttons will be automatically shown if the tabs do not fit inside the TabStrip boundaries.
54
+
*`Hidden` - The scroll buttons won't be displayed.
55
+
56
+
The following example demonstrates this option in action.
By default, the TabStrip renders its scroll buttons on both ends of the tab list. To customize the position of the scroll buttons, use the `ScrollButtonsPosition` parameter of the TabStrip. This option accepts the following values of type `TabStripScrollButtonsPosition`:
77
+
78
+
*`Split` (default) — The scroll buttons will be rendered on both sides of the tab list.
79
+
*`Start` — The scroll buttons will be rendered before the tab list.
80
+
*`End` — The scroll buttons will be rendered after the tab list.
81
+
82
+
The following example demonstrates this option in action.
description: The Size parameter in the TabStrip component allows you to control the size of the tabs. By default, tabs size is medium.
5
+
slug: tabstrip-tabs-size
6
+
tags: telerik,blazor,tab,strip,tabstrip,size
7
+
published: True
8
+
position: 16
9
+
---
10
+
11
+
# TabStrip Tabs Size
12
+
13
+
By design, the tabs are displayed in medium size.
14
+
15
+
You can customize the size of the TabStrip tabs using the `Size` parameter. It is recommended to use predefined constants from the `ThemeConstants.TabStrip.Size` static class. The available options are:
16
+
17
+
*`small` — Reduces the default padding of the TabStrip tabs. This size is useful when you want to fit more tabs in a limited space.
18
+
*`medium` (default) — Represents the default padding of the TabStrip tabs.
19
+
*`large` — Increases the default padding of the TabStrip tabs. This size is useful when you want to provide larger elements for easier end-user interaction.
0 commit comments