标签组件
最后更新:
仅 CSS Tailwind CSS 标签（芯片），具有颜色变体、柔和的风格和可移动按钮。尺寸为 xs-lg。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
标签组件显示小的、带标签的信息，用于对内容进行分类、过滤或标记。标签采用语义 HTML 和灵活的样式构建，可帮助用户快速识别内容类型、状态或类别。 Frutjam 标签系统支持多种尺寸、颜色、样式和形状，非常适合技能列表、文章类别、状态标签和内容元数据。
仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
| 班级 | 类型 | 描述 |
|---|---|---|
| tag | 根据 | 用于分类或识别内容的内联标签 |
| tag-outline | 风格 | 带彩色边框的透明填充 |
| tag-soft | 风格 | 柔和的有色背景 |
| tag-square | 风格 | 轻微四舍五入（小于默认药丸） |
| tag-remove | 修饰符 | 标签内的关闭/删除按钮 |
| tag-xs | 尺寸 | 超小号（0.6875rem 字体） |
| tag-sm | 尺寸 | 小号（0.75rem 字体） |
| tag-md | 尺寸 | 中号（0.8125rem 字体，默认） |
| tag-lg | 尺寸 | 大号（0.9375rem 字体） |
| tag-xl | 尺寸 | 超大（1rem字体） |
| tag-primary | 颜色 | 主要主题颜色 |
| tag-secondary | 颜色 | 次要主题色 |
| tag-accent | 颜色 | 强调主题颜色 |
| tag-neutral | 颜色 | 中性主题色 |
| tag-info | 颜色 | 信息语义颜色 |
| tag-success | 颜色 | 成功语义色 |
| tag-warning | 颜色 | 警告语义颜色 |
| tag-error | 颜色 | 错误语义颜色 |
基本用法
1 2 3 | <div class="tag">Tag</div> <div class="tag">Another tag</div> <div class="tag">Third tag</div> |
1 2 3 | <div className="tag">Tag</div> <div className="tag">Another tag</div> <div className="tag">Third tag</div> |
标签尺寸
html
1 2 3 4 | <div class="tag tag-xs">Extra Small</div> <div class="tag tag-sm">Small</div> <div class="tag tag-md">Medium</div> <div class="tag tag-lg">Large</div> |
标签颜色
html
1 2 3 4 5 6 7 8 | <div class="tag">Default</div> <div class="tag tag-primary">Primary</div> <div class="tag tag-secondary">Secondary</div> <div class="tag tag-accent">Accent</div> <div class="tag tag-info">Info</div> <div class="tag tag-success">Success</div> <div class="tag tag-warning">Warning</div> <div class="tag tag-error">Error</div> |
标签样式
html
1 2 3 4 | <div class="tag tag-primary">Default</div> <div class="tag tag-primary tag-outline">Outline</div> <div class="tag tag-secondary tag-soft">Soft</div> <div class="tag tag-accent tag-dashed">Dashed</div> |
标签形状
html
1 2 3 4 | <div class="tag">Square</div> <div class="tag tag-rounded">Rounded</div> <div class="tag tag-pill">Pill</div> <div class="tag tag-circle">C</div> |
带图标的标签
html
1 2 3 4 | <div class="tag tag-primary"> <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.3A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/></svg> Starred </div> |
可关闭标签
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="tag tag-primary"> JavaScript <button class="tag-remove" aria-label="Close">×</button> </div> <div class="tag tag-secondary"> React <button class="tag-remove" aria-label="Close">×</button> </div> <div class="tag tag-accent"> TypeScript <button class="tag-remove" aria-label="Close">×</button> </div> |
标签列表
html
1 2 3 4 5 6 7 8 | <div class="flex flex-wrap gap-2"> <div class="tag">JavaScript</div> <div class="tag tag-primary">React</div> <div class="tag tag-secondary">CSS</div> <div class="tag tag-accent">UI Design</div> <div class="tag tag-info">Frontend</div> <div class="tag tag-success">Production</div> </div> |