RUI.next

Data-Display
Tag

Tag

Tag is the section for categorizing or markuping. There are two kinds of Tag, selectable and readonly type, the latter is a smaller tag without interactive behavior, which is typically used for display content.

<Tag>display content</Tag>
<Tag>display content</Tag>

Example

Basic usage of Tag component.

Tag with `data-seed` attr (Selectable type)
DataSeed
Selected tag (Selectable type)
Selected
Disabled tag
Disabled
Tag with Callback function (`RUI-log` in Console log)
Callback
Closable tag with Callback function (`RUI-log` in Console log)
Closable
Small tag (Readonly type)
Small size

API

PropertiesDescriptionTypeDefault
smallWhether to show a smaller size.booleanfalse
disabledWhether is disabled.booleanfalse
closableWhether this tag could be closed (invalid in small or disabled mode)booleanfalse
selectedWhether is selected by default.booleanfalse
onChangeThe callback function that is triggered when the selected state changes.(selected: boolean) => void-
onCloseThe callback function that is triggered when the tag is closed.() => void-
afterCloseThe callback function that is triggered after close.() => void-