Ant Design Blazor
Segmented
Segmented Controls. This component is available since v0.12.0.
When To Use
- When displaying multiple options and user can select a single option;
- When switching the selected option, the content of the associated area changes.
Examples
The most basic usage.
Disabled Segmented.
Custom each Segmented Item by ReactNode.
There are three sizes of an Segmented: large (40px), default (32px) and small (24px).
Set icon without label for Segmented Item.
block property will make the Segmented fit to its parent width.
Controlled Segmented.
Load options dynamically.
Set icon for Segmented Item.
Segmented API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| DefaultValue | ParameterDefault selected value | TValue | -- |
| Disabled | ParameterDisable all segments | Boolean | false |
| OnChange | ParameterThe callback function that is triggered when the state changes | EventCallback<TValue> | -- |
| Options | ParameterOptions for the segments. Takes priority over AntDesign.Segmented`1.Labels |
IEnumerable<SegmentedOption<TValue>> | -- |
| Labels | ParameterLabels for the segments | IEnumerable<TValue> | -- |
| Size | ParameterSize of the UI element | SegmentedSize | -- |
| Value | ParameterCurrently selected value | TValue | -- |
| ValueChanged | ParameterCallback executed when the selected segment changes | EventCallback<TValue> | -- |
| ChildContent | ParameterSegments. Takes priority over AntDesign.Segmented`1.Labels and AntDesign.Segmented`1.Options |
RenderFragment | -- |
| Block | ParameterMake the component the width of the parent | Boolean | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
SegmentedItem API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Value | ParameterValue of the segment item | TValue | -- |
| Label | ParameterLabel for the UI of the segment item | String | -- |
| Disabled | ParameterIf the segment is disabled | Boolean | false |
| ChildContent | ParameterUI content to display in the segment. Takes priority over AntDesign.SegmentedItem`1.Label and AntDesign.SegmentedItem`1.Icon |
RenderFragment | -- |
| Icon | ParameterIcon to display next to the label of the segment. Only used when AntDesign.SegmentedItem`1.ChildContent is not provided. |
String | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |