Blazor TabStrip概述
的Blazor TabStrip组件显示包含相关内容的选项卡集合，允许用户在单个组件中的不同视图之间切换。
的TabStrip组件的一部分Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。
创建Blazor TabStrip
- 使用
< TelerikTabStrip >标签。 - 添加嵌套
< TabStripTab >标记为要包含在组件中的每个选项卡。 - 属性设置选项卡标题
标题参数。< TabStripTab >标签。 - 可选地，配置其他选项卡设置，如
禁用-详情请浏览选项卡配置篇文章。 - 在选项卡中放置所需的内容——它可以是任何内容，包括其他组件。
带有指定制表符位置和禁用制表符的制表条
第一个选项卡内容。 第二页内容。此选项卡已禁用，无法选择。 第三个选项卡内容。< / TabStripTab > < / TelerikTabStrip > 活动标签索引
默认情况下，最初选择的选项卡是第一个。控件以编程方式控制所选选项卡ActiveTabIndex参数。阅读更多有关ActiveTabIndex.．.
选项卡配置
tab是TabStrip的构建块。组件允许对已声明的对象进行单独配置< TabStripTab >标签-你可以设置他们的标题和可见性或把他们放在禁用状态。阅读更多关于可用的选项卡配置选项…
标签的位置
Blazor TabStrip组件允许您控制选项卡的位置。阅读更多关于制表符位置…
坚持内容
Blazor TabStrip组件可以持久化选项卡的内容。当用户在选项卡之间导航时，它们的内容将被CSS隐藏，以避免重新初始化。阅读更多关于持久化内容…
可滚动选项卡
Blazor TabStrip只允许滚动它的选项卡。这对于定义了许多选项卡的场景非常有用。阅读更多关于滚动标签…
事件
TabStrip触发一个ActiveTabIndexChanged事件当用户单击一个选项卡来选择它时。
TabStrip参数
TabStrip提供了以下特性以允许进一步自定义其行为:
| 参数 | 类型 | 头2 |
|---|---|---|
ActiveTabIndex |
int |
当前显示选项卡的索引。支持双向绑定。 |
PersistTabContent |
保龄球 |
是否从DOM中删除非活动选项卡的内容(如果假)，或者用CSS隐藏它(如果真正的)．看到坚持内容 |
可滚动 |
保龄球 |
标签是否可滚动。看到可滚动选项卡 |
TabPosition |
TabPosition枚举（ TabPosition。前） |
控制选项卡的位置。 |
造型和外观
通过以下参数可以自定义Blazor TabStrip的外观:。
| 参数 | 类型 | 描述 |
|---|---|---|
类 |
字符串 |
将在组件的主包装元素上呈现的CSS类。 |
宽度 |
字符串 |
组件的宽度。可以将Width参数设置为支持单位． |
高度 |
字符串 |
组件的高度。您可以设置高度参数的任意支持单位． |
TabStrip引用和方法
的TabStrip方法可以通过其引用访问。
| 方法 | 描述 |
|---|---|
刷新 |
重绘组件。 |
获取TabStrip的引用并使用它的方法。
@*这个代码片段演示了TabStrip Refresh()方法的使用。*@ < cityppopulation TabRef="TabRef" /> @code {public TelerikTabStrip TabRef {get;设置;}}@*这个代码片段演示了TabStrip Refresh()方法的使用。*@ 城市人口:@Count
增加计数! @code {public int Count {get;设置;} = 30;[参数]public TelerikTabStrip TabRef {get;设置;} void增加计数(){计数+= 1;TabRef.Refresh ();}}