Ant Design Blazor
Tabs标签页
选项卡切换组件。
何时使用
提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
Ant Design 依次提供了三级选项卡，分别用于不同的场景。
- 卡片式的页签，提供可关闭的样式，常用于容器顶部。
- 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。
- RadioButton 可作为更次级的页签来使用。
支持键盘导航
当焦点在标签上时，可用键盘导航
- 左键：导航到前一个选项卡
- 右键：导航到后一个选项卡
- 上键：导航到第一个选项卡
- 下键：导航到最后一个选项卡
- 回车键：导航到当前焦点选项卡
Examples
默认选中第一项。
禁用某一项。
标签居中展示。
有图标的标签。
可以左右、上下滑动，容纳更多标签。
可以在页签两边添加附加操作。
大号页签用在页头区域，小号用在弹出框等较狭窄的容器内。
有四个位置，tabPosition="left|right|top|bottom"。
另一种样式的页签，不提供对应的垂直样式。
只有卡片样式的页签支持新增和关闭选项。使用 closable={false} 禁止关闭。
用于容器顶部，需要一点额外的样式覆盖。
隐藏默认的页签增加图标，给自定义触发器绑定事件。
使用 react-sticky 组件实现吸顶效果。
使用 Draggable 属性实现标签可拖拽。
在 TabPane 中使用 ContextMenu 模板可以指定右键菜单的内容。
Tabs API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| ChildContent | 属性选项卡的内容。应包含 TabPane 元素 |
RenderFragment | -- |
| ActiveKey | 属性当前TabPane的AntDesign.TabPane.Key |
String | -- |
| ActiveKeyChanged | 属性活动选项卡更改时执行的回调 | EventCallback<String> | -- |
| Animated | 属性是否使用动画更改选项卡。仅在 AntDesign.Tabs.TabPosition = AntDesign.TabPosition.Top 或 AntDesign.TabPosition.Bottom 时有效 |
Boolean | -- |
| InkBarAnimated | 属性墨栏是否为动画 | Boolean | true |
| RenderTabBar | 属性替换标签栏 | Object | -- |
| DefaultActiveKey | 属性如果未设置 AntDesign.Tabs.ActiveKey，则初始激活 TabPane 的 AntDesign.TabPane.Key |
String | -- |
| HideAdd | 属性是否隐藏加号图标。仅在 AntDesign.Tabs.Type = AntDesign.TabType.EditableCard 时有效 |
Boolean | false |
| Size | 属性预设标签栏大小 | TabSize | TabSize.Default |
| TabBarExtraContent | 属性标签栏中的额外内容 | RenderFragment | -- |
| TabBarExtraContentLeft | 属性标签栏左侧的额外内容 | RenderFragment | -- |
| TabBarExtraContentRight | 属性标签栏右侧的额外内容 | RenderFragment | -- |
| TabBarGutter | 属性选项卡之间的差距 | Int32 | 0 |
| TabBarStyle | 属性标签栏样式对象 | String | -- |
| TabBarClass | 属性标签栏 css 类 | String | -- |
| TabPosition | 属性选项卡的位置 | TabPosition | TabPosition.Top |
| Type | 属性选项卡的基本样式 | TabType | TabType.Line |
| OnChange | 属性更改活动选项卡时执行的回调 | EventCallback<String> | -- |
| OnEdit | 属性添加或删除选项卡时执行的回调。仅在 AntDesign.Tabs.Type = AntDesign.TabType.EditableCard 时有效 |
Func<String, String, Task<Boolean>> | -- |
| OnClose | 属性标签页关闭时的回调 | EventCallback<String> | -- |
| OnAddClick | 属性单击添加按钮时执行的回调 | EventCallback | -- |
| AfterTabCreated | 属性创建选项卡后执行的回调 | EventCallback<String> | -- |
| OnTabClick | 属性单击选项卡时执行的回调 | EventCallback<String> | -- |
| Draggable | 属性使选项卡可拖动 | Boolean | -- |
| Centered | 属性选项卡是否居中 | Boolean | false |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
| 方法签名 | 返回类型 | 描述 |
|---|---|---|
| GoTo(Int32 tabIndex) | void | 使用指定索引激活选项卡 |
| Next() | void | 移至下一个选项卡 |
| Previous() | void | 移至上一个选项卡 |
| ActivatePane(String key) | void | 激活指定的选项卡 |
TabPane API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| ForceRender | 属性在选项卡中强制呈现内容，而不是在单击选项卡后延迟呈现 | Boolean | false |
| Key | 属性TabPane 的键 | String | -- |
| Tab | 属性在 TabPane 的头部显示文本 |
String | -- |
| TabTemplate | 属性TabPane的头像模板 | RenderFragment | -- |
| ChildContent | 属性 | RenderFragment | -- |
| TabContextMenu | 属性客户上下文菜单模板 | RenderFragment | -- |
| Disabled | 属性如果选项卡被禁用 | Boolean | -- |
| Closable | 属性如果选项卡是可关闭的 | Boolean | true |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |