定价

以紧凑的行内标签展示分类、状态或简短信息,可与文字、图标和列表内容自然组合。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中;本页展示网站用法,支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费,不属于项目,不占项目或开发者席位额度,无需 SnowUI 注册、激活或付费证明。

如何使用

用于紧凑的内容标识与组合。选择、移除或点击行为应按公开 API 声明;不要把纯展示 Chip 自动视为按钮或复选框。

  • 默认变体内置圆点,background 变体默认不显示圆点;showDot 可显式改变。

  • as="leading" 可替换圆点,as="trailing" 添加尾部内容;动态改变尺寸时显式传 size。

导入

import { Chip } from '@snowui-design-system/components';

用法

审核

尺寸

变体

圆点

继承

API 参考

属性 类型 默认值 示例 描述
variant "default" | "background" "default" variant="default" 视觉变体。default 默认显示内置 Dot;background 增加色块背景与 0.5px 边框,默认不显示 Dot
size "sm" | "lg" — size="sm" 显式值优先;未传时在组件创建时读取父级数值尺寸 Context 快照,≤12 使用 sm,>12 使用 lg;无数值 Context 时回退 sm。不跟随后续父级尺寸变化;动态切换请显式传入 size。sm 文字 12/16,lg 文字 14/20
showDot boolean — showDot 未传时随 variant 解析:default 显示、background 隐藏。显式 true / false 开启或关闭内置 Dot;存在外置 leading 时始终隐藏内置 Dot
children Snippet — <Chip>Content</Chip> 无参数内容片段,渲染标签正文和可选 leading / trailing 子项。SnowUI 组件通过 as="leading" / as="trailing" 声明角色;外置 leading 替换内置 Dot