KSAB 组件库 v2

一、整体设计规范

1.1 布局规则

• 优先使用留白布局，尽量避免滥用卡片式容器；数据展示场景可正常使用卡片突出内容。
• ksab-title / ksab-subtitle 仅用作区块标题，页面主标题建议自定义样式。
• 优设标题黑字体仅用于标题或必要场景，禁止整页使用，保证阅读体验。

1.2 设计理念

KSAB 由 CoreX Team（CoreX 工作室）开发，全称含义：Kind 亲和、Simple 简洁、Beautiful 美观。

二、快速引入

在 HTML 头部引入下方 CSS 链接，即可全局使用所有组件样式：

<link rel="stylesheet" href="https://corextm.com/style/ksab/v2.css">

字体说明：内置优设标题黑，托管于 EdgeOnePages，商用免费、稳定性高，无需额外引入。

三、全局 CSS 变量（主题定制）

:root {
  --ksab-primary: #0084FF;        /* 主题主色 */
  --ksab-danger: #f53f3f;         /* 危险/警告色 */
  --ksab-text: #333;              /* 正文文字色 */
  --ksab-label: #666;             /* 辅助文字色 */
  --ksab-border: #ccc;            /* 边框颜色 */
  --ksab-bg: #fff;                /* 基础背景色 */
  --ksab-table-hover: #f8f8f8;    /* 表格悬浮背景 */
  --ksab-disabled-bg: rgba(0, 132, 255, 0.1);
  --ksab-disabled-border: rgba(0, 132, 255, 0.3);
  --ksab-disabled-color: rgba(0, 132, 255, 0.3);
  --ksab-font-size: 14px;
  --ksab-font-size-sm: 12px;
  --ksab-font-weight: 500;
  --ksab-radius: 20px;
  --ksab-transition: all 0.3s ease;
  --ksab-transition-label: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ksab-letter-spacing: 0.5px;
}

四、组件使用示例

4.1 标题 Title

<div class="ksab-title">区块标题</div>
<div class="ksab-subtitle">区块副标题</div>

<div class="ksab-title ksab-title-center">居中标题</div>
<div class="ksab-subtitle ksab-subtitle-center">居中副标题</div>

4.2 按钮 Button

<button class="ksab-button">默认镂空按钮</button>
<button class="ksab-button ksab-button-fill">实心填充按钮</button>
<button class="ksab-button" disabled>禁用按钮</button>

4.3 单选框 & 复选框

<div class="ksab-radio-group">
  <input type="radio" class="ksab-radio" name="demo-radio">
  <label class="ksab-radio-label">单选选项</label>
</div>

<div class="ksab-checkbox-group">
  <input type="checkbox" class="ksab-checkbox">
  <label class="ksab-checkbox-label">复选选项</label>
</div>

4.4 标签 Tag

<span class="ksab-tag">普通标签</span>
<span class="ksab-tag ksab-tag--fill">填充标签</span>
<span class="ksab-tag ksab-tag--danger">警告标签</span>

4.5 表格 Table

<div class="ksab-table-wrapper">
  <table class="ksab-table">
    <thead><tr><th>表头</th></tr></thead>
    <tbody><tr><td>内容</td></tr></tbody>
  </table>
</div>

4.6 布局容器

<div class="ksab-row">
  <div class="ksab-col">列内容</div>
  <div class="ksab-col">列内容</div>
</div>

五、版本更新日志（v2）

1. 本版本为 KSAB 组件库第三次迭代，移除性能较差、复用率低的输入框组件，下一版本将重新设计新版输入框。
2. 外部字体部署于 EdgeOnePages，商用免费、运行稳定可靠。
3. 组件库暂未正式上线，代码仍有优化空间，欢迎提交建议与反馈。
4. 若注释存在英文语法问题，欢迎帮忙指正。