Ant Design Blazor
Segmented分段控制器
分段控制器。自 v0.12.0 版本开始提供该组件。
何时使用
- 用于展示多个选项并允许用户选择其中单个选项；
- 当切换选中选项时，关联区域的内容会发生变化。
Examples
最简单的用法。
Segmented 不可用。
使用 ReactNode 自定义渲染每一个 Segmented Item。
我们为 <Segmented /> 组件定义了三种尺寸（大、默认、小），高度分别为 40px、32px 和 24px。
在 Segmented Item 选项中只设置 Icon。
Segmented API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| DefaultValue | 属性默认选择值 | TValue | -- |
| Disabled | 属性禁用所有段 | Boolean | false |
| OnChange | 属性状态改变时触发的回调函数 | EventCallback<TValue> | -- |
| Options | 属性段的选项。优先于 AntDesign.Segmented`1.Labels |
IEnumerable<SegmentedOption<TValue>> | -- |
| Labels | 属性段的标签 | IEnumerable<TValue> | -- |
| Size | 属性UI 元素的大小 | SegmentedSize | -- |
| Value | 属性当前选择的值 | TValue | -- |
| ValueChanged | 属性选中段发生变化时执行的回调 | EventCallback<TValue> | -- |
| ChildContent | 属性段。优先于 AntDesign.Segmented`1.Labels 和 AntDesign.Segmented`1.Options |
RenderFragment | -- |
| Block | 属性使组件成为父组件的宽度 | Boolean | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
SegmentedItem API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Value | 属性段项目的价值 | TValue | -- |
| Label | 属性段项 UI 的标签 | String | -- |
| Disabled | 属性如果段被禁用 | Boolean | false |
| ChildContent | 属性要在段中显示的 UI 内容。优先于 AntDesign.SegmentedItem`1.Label 和 AntDesign.SegmentedItem`1.Icon |
RenderFragment | -- |
| Icon | 属性显示在段标签旁边的图标。仅在未提供 AntDesign.SegmentedItem`1.ChildContent 时使用。 |
String | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |