Skip to main content

tag

air-tag 是一个灵活且美观的标签组件，支持多种颜色、大小、形状和状态，适用于各种场景。

用法示例​

基础用法​

默认标签信息标签成功标签警告标签错误标签

可关闭标签​

可关闭标签重要信息小号错误

带图标的标签​

自定义形状​

直角标签圆形标签

属性​

属性描述类型默认值
closable是否可关闭booleanfalse
color标签颜色"blue" | "gray" | "green" | "red" | "yellow"'gray'
rounded标签形状"full" | "md" | "none"'md'
size标签大小"md" | "sm"'md'

事件​

事件名称描述类型
airClose关闭标签时触发CustomEvent<void>

Shadow Parts​

部分名称描述
"close-button"自定义关闭按钮

依赖关系​

依赖​

依赖图​

graph TD;
  air-tag --> air-icon
  style air-tag fill:#f9f,stroke:#333,stroke-width:4px

样式​

air-tag 支持通过 CSS 自定义以下部分样式：

  • close-button: 自定义关闭按钮的样式。

注意事项​

  • 若使用 closable 属性，需要监听 airClose 事件以执行标签关闭的逻辑。
  • 默认颜色为灰色 (gray)，可以通过 color 属性自定义颜色。

开发者说明​

air-tag 是使用 StencilJS 构建的。