首页
组件
标签 Label

标签 Label

标签组件（label 基类 + 变体）用于文字样式、状态色与胶囊标签，是 kuoqiui 用得最多的文字工具类。

本页内容颜色标签 · 19 个状态文字表格中状态字号与装饰 · 18 个布局与显示 · 8 个业务色 · 10 个胶囊 pill · 5 变体

颜色标签 · 19 个

状态色与主题色标签，统一用 label label-* 双类书写（裸写变体不生效）：

label-main label-index label-subindex label-info label-tips label-red label-orange label-yellow label-green label-cyan label-blue label-purple label-black label-conts label-warning label-error label-success label-failed

label-white（深色底专用）

主色标签 已生效

状态文字

已生效：有效数据标签 label-green 待审核：中间状态 label-warning 已关闭：失效状态 label-red 辅助：辅助提示 label-tips

表格中状态

th/td 不加 label 类，状态文字用 span class="label label-*" 包裹：

订单号	金额	状态
KQ20260913001	¥ 199.00	已生效
KQ20260913002	¥ 88.00	待审核
KQ20260913003	¥ 0.00	已关闭
KQ20260913004	¥ 12.50	已归档

字号与装饰 · 18 个

字号：normal / small / smaller / large / larger / h1~h6 / title；装饰：weight / weighter / delete / underline / shadow / text。

label-normal 常规字号 label-small 小号 label-smaller 更小号 label-large 大号 label-larger 更大号 label-h1 标题一 label-h2 标题二 label-h3 标题三 label-h4 标题四 label-h5 标题五 label-h6 标题六 label-title 标题样式 label-weight 加粗 label-weighter 特粗 label-delete 删除线 label-underline 下划线 label-shadow 阴影 label-text 正文灰

标题三 加粗 删除线

布局与显示 · 8 个

label-block 整行块级；inblock / inline / contents 控制行内显示；pre 保留空白、limit 限宽、subtit 副标题、btn 按钮样标签。

label-block：块级标签（整行） label-inblock label-inline label-contents label-pre 保留空白与换行 label-limit：这是一段用于演示截断限宽的超长标签文本内容 label-subtit 副标题样式 label-btn 按钮样标签

块级标签 按钮样标签

业务色 · 10 个

业务语义色标签，常用于操作文字与可点击项：add ask del edit login quit save submit href canclick。

label-add label-ask label-del label-edit label-quit label-save label-submit label-href label-canclick

<a class="label label-canclick" href="#">可点击标签</a> 删除

胶囊 pill · 5 变体

label-pill 提供胶囊外形（内边距 + border-radius:999px），叠加 5 个状态变体：

index success warning error muted

风格	颜色底
label-pill-index	主色
label-pill-success	绿色
label-pill-warning	橙色
label-pill-error	红色
label-pill-muted	灰色

已启用

上一页按钮 Button

下一页图标 Icon

KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI · 返回首页