Ant Design Blazor
Tag
Tag for categorizing or markup.
When To Use
- It can be used to tag by dimension or property.
- When categorizing.
Examples
Usage of basic Tag. It can be closable by setting closable property. Closable Tag supports OnClose and 'OnClosing' events.
Generating a set of Tags by array, you can add and remove dynamically.
By using the visible prop, you can control the close state of Tag.
Tag components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Tag.
If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Tag rather than using the icon property.
Tag can be stopped closing with the Cancel property in the OnClosing event before closing.
We preset a series of colorful tag styles for use in different situations. You can also set it to a hex/rgb/html5 color string for custom color.
CheckableTag works like Checkbox, click it to toggle checked state.
it is an absolute controlled component and has no uncontrolled mode.
Animate the tag when appears or disappears.
We preset five different colors, you can set color property such as success,processing,error,default and warning to indicate specific status.
Tag API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| ChildContent | ParameterTag content | RenderFragment | -- |
| Closable | ParameterWhether the Tag can be closed | Boolean | false |
| Checkable | ParameterWhether the Tag can be checked | Boolean | false |
| Checked | ParameterChecked status of Tag | Boolean | false |
| CheckedChanged | ParameterCallback executed when Tag is checked/unchecked | EventCallback<Boolean> | -- |
| Color | ParameterTag color. Can either be a predefined color (TagColor) or hex color. | OneOf<TagColor, String> | TagColor.Default |
| PresetColor | ParameterTag color from the PresetColor listUse Color instead Obsolete Will be removed in a future version. |
String | -- |
| Icon | ParameterSet the tag's icon | String | -- |
| IconTheme | ParameterDefine the icon theme. | IconThemeType | IconThemeType.Outline |
| NoAnimation | ParameterParameter is not used and does not affect functionality Obsolete Will be removed in a future version. |
Boolean | -- |
| OnClose | ParameterCallback executed when tag is closed | EventCallback<MouseEventArgs> | -- |
| OnClosing | ParameterTriggered before true closing, can prevent the closing | EventCallback<CloseEventArgs<MouseEventArgs>> | -- |
| OnClick | ParameterCallback executed when tag is clicked (it is not called when closing icon is clicked). | EventCallback | -- |
| Visible | ParameterWhether the Tag is closed or not | Boolean | true |
| 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 | -- |