数据展示

表格只有横线，条目没有方框，树是嵌套的原生折叠。

表格

只有水平分隔线，无外框、无竖线。数字右对齐并用等宽数字，这样一列数字的位数能对齐——这是可读性，不是风格。

组件家族公开契约数
家族	覆盖内容	公开契约
通用	动作、状态与标识	9
布局	容器、节奏与分栏	8
导航	位置、目录与流程	13
数据录入	字段与原生控件	15
数据展示	内容、图表与结构化信息	14
反馈与浮层	状态、结果与临时上下文	12

条目

卡片的替代品。无边框、无阴影、无填充，靠留白或单边线分隔。

2026-08-30 · 设计

留白不是空缺

足够的留白让内容呼吸、让层次清晰。

2026-08-24 · 排版

克制即力量

--ruled 变体加一条上边线，用于需要更明确边界时。

时间线

08-30

补齐组件清单。
08-29

田野审计四个生产站点。
08-24

重构为 spec / kit / examples。

查看代码 · Source

<ol class="wx-timeline">
  <li class="wx-timeline__item">
    <span class="wx-timeline__dot" aria-hidden="true"></span>
    <div class="wx-timeline__content">
      <p class="wx-eyebrow"><time datetime="2026-08-30">08-30</time></p>
      <p>补齐组件清单。</p>
    </div>
  </li>
  <li class="wx-timeline__item">
    <span class="wx-timeline__dot" aria-hidden="true"></span>
    <div class="wx-timeline__content">
      <p class="wx-eyebrow"><time datetime="2026-08-29">08-29</time></p>
      <p>田野审计四个生产站点。</p>
    </div>
  </li>
  <li class="wx-timeline__item">
    <span class="wx-timeline__dot" aria-hidden="true"></span>
    <div class="wx-timeline__content">
      <p class="wx-eyebrow"><time datetime="2026-08-24">08-24</time></p>
      <p>重构为 spec / kit / examples。</p>
    </div>
  </li>
</ol>

树

嵌套 <ul> + <details>，零 JS、零自定义 role。

系统参考
- 灵魂层
  - 色彩
  - 字体排版
- 数据展示
设计模式

查看代码 · Source

<ul class="wx-tree">
  <li><details open><summary>系统参考</summary>
    <ul>
      <li><details><summary>灵魂层</summary>
        <ul><li><a class="wx-tree__leaf" href="./color.html">色彩</a></li>
            <li><a class="wx-tree__leaf" href="./typography.html">字体排版</a></li></ul>
      </details></li>
      <li><a class="wx-tree__leaf" href="./c-display.html#tree" aria-current="page">数据展示</a></li>
    </ul>
  </details></li>
  <li><a class="wx-tree__leaf" href="./design.html">设计模式</a></li>
</ul>

折叠

为什么没有卡片？

禁的是四边包围的几何形状，不是"卡片"这个名词。分组用邻近、单边线和标题。

为什么没有加载动画？

旋转是被禁的循环动画。用文字——"正在导出…"比转圈提供更多信息。

查看代码 · Source

<details class="wx-collapse"><summary>为什么没有卡片？</summary>
  <p>禁的是四边包围的几何形状，不是"卡片"这个名词。分组用邻近、单边线和标题。</p>
</details>
<details class="wx-collapse"><summary>为什么没有加载动画？</summary>
  <p>旋转是被禁的循环动画。用文字——"正在导出…"比转圈提供更多信息。</p>
</details>

描述列表与统计

版本: 0.1.0
公开组件契约: 71 项
CSS 核心: 零运行时依赖

71公开组件契约

0CSS 核心运行时依赖

日历

用 <table>，因为它就是表格——读屏器能从表结构里播报星期几。一堆 <div> 做不到这件事。

这里完整展示 2026 年 8 月；5 日是已选择的值。今天的标记只在采用者能给出真实日期时设置，示例不把过期日期冒充“今天”。

已选择：2026 年 8 月 5 日

查看代码 · Source

<table class="wx-calendar" data-wx-calendar-demo aria-describedby="calendar-demo-status">
  <caption>2026 年 8 月（示例月份）</caption>
  <thead><tr><th scope="col">一</th><th scope="col">二</th><th scope="col">三</th><th scope="col">四</th><th scope="col">五</th><th scope="col">六</th><th scope="col">日</th></tr></thead>
  <tbody>
    <tr><td></td><td></td><td></td><td></td><td></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 1 日" aria-pressed="false">1</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 2 日" aria-pressed="false">2</button></td></tr>
    <tr>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 3 日" aria-pressed="false">3</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 4 日" aria-pressed="false">4</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 5 日" aria-pressed="true">5</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 6 日" aria-pressed="false">6</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 7 日" aria-pressed="false">7</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 8 日" aria-pressed="false">8</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 9 日" aria-pressed="false">9</button></td></tr>
    <tr>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 10 日" aria-pressed="false">10</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 11 日" aria-pressed="false">11</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 12 日" aria-pressed="false">12</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 13 日" aria-pressed="false">13</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 14 日" aria-pressed="false">14</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 15 日" aria-pressed="false">15</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 16 日" aria-pressed="false">16</button></td></tr>
    <tr>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 17 日" aria-pressed="false">17</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 18 日" aria-pressed="false">18</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 19 日" aria-pressed="false">19</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 20 日" aria-pressed="false">20</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 21 日" aria-pressed="false">21</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 22 日" aria-pressed="false">22</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 23 日" aria-pressed="false">23</button></td></tr>
    <tr>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 24 日" aria-pressed="false">24</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 25 日" aria-pressed="false">25</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 26 日" aria-pressed="false">26</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 27 日" aria-pressed="false">27</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 28 日" aria-pressed="false">28</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 29 日" aria-pressed="false">29</button></td>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 30 日" aria-pressed="false">30</button></td></tr>
    <tr>
      <td><button class="wx-calendar__day" type="button" aria-label="2026 年 8 月 31 日" aria-pressed="false">31</button></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>
<p class="wx-field__hint" id="calendar-demo-status" data-wx-calendar-status role="status">已选择：2026 年 8 月 5 日</p>

图集

轮播的诚实替代：读者驱动的横向滚动，原生 scroll-snap，不自动播放，不用箭头盖在内容上。这个示例只放仓库已有的真实品牌资产；业务图集必须传入自己的真实图像与对应的替代文字。

万形标准 Logo · 读者手动滚动

文心标准 Logo · snap 到图像本身

图与图注

有信息的图像必须有替代文字；wx-figure 负责“图与说明是一件事”， wx-image--ratio 在加载前保留比例，避免正文跳动。上面的两个图集条目本身就是 figure + img + figcaption：它们同时展示了图像、图注和真实资源的关系，不另放一张重复的装饰图。

代码

@import "./tokens/core.css";
@import "./components/index.css";

何时使用、何时不用与 API

组件	何时使用 · 不用	契约
`wx-table / wx-table-scroll`	二维可比较数据；叙述性键值用 desc。	原生 `table`、`caption`、`th`；宽表容器须是可聚焦、具名的 `region`。
`wx-list / wx-entry / wx-timeline`	同质项目、内容条目、时间序列；不要把任何一项包成卡片。	`ul/ol` 或 `article`；当前/链接使用原生语义。
`wx-tree / wx-collapse`	可展开层级与可选细节；关键内容不可只藏在折叠里。	原生 `details/summary`，状态由 `open` 提供。
`wx-desc / wx-stat`	稳定属性、少量重点数值；大量数据用 table。	`dl/dt/dd`；数字使用 tabular-nums。
`wx-figure / wx-image / wx-gallery`	有含义的图、需说明的图、读者驱动的横向图集；装饰图和自动轮播都不用。	`figure/figcaption`、有意义的 `alt`；gallery 是具名 region 且可键盘滚动。
`wx-calendar`	按周列展示日期；日期录入优先原生控件。	原生 `table`、`caption`；当天/选择态用 `aria-current/aria-pressed`。
`wx-code / wx-quote`	需要保留格式的代码、可归属的引用；普通段落不用。	`pre/code` 或 `blockquote/cite`；复制需 `copy.js`。

列表

列表是内容，不是控件。wx-list 只调节节奏，语义完全交给原生 ul / ol。

默认列表保留标记与缩进。
行距按正文节奏，不额外加密。

带分隔线——每项之间一条发丝线，用于条目型内容
不是卡片——分隔靠线和留白，不靠把每项装进方框
不是表格——每项只有一个维度时用列表，多维度才用表

查看代码 · Source

<ul class="wx-list">
  <li>默认列表保留标记与缩进。</li>
  <li>行距按正文节奏，不额外加密。</li>
</ul>
<ul class="wx-list wx-list--ruled" style="margin-block-start:var(--space-6)">
  <li><strong>带分隔线</strong>——每项之间一条发丝线，用于条目型内容</li>
  <li><strong>不是卡片</strong>——分隔靠线和留白，不靠把每项装进方框</li>
  <li><strong>不是表格</strong>——每项只有一个维度时用列表，多维度才用表</li>
</ul>

wx-list--grouped 是应用轨的分组表面（iOS 分组列表惯例），走边框实现，仍然禁止阴影—— 它是 D-21 之外唯一被有条件放宽的"面"。

引用

引用用单边线，不用方框，也不用巨大的装饰引号。归属信息放在 cite 里。

水的分子式不因容器而改变，但在杯中是杯的形，在河道里是河道的形。

——文心 · 万形，水的原则

查看代码 · Source

<blockquote class="wx-quote">
  <p>水的分子式不因容器而改变，但在杯中是杯的形，在河道里是河道的形。</p>
  <footer>——<cite>文心 · 万形，水的原则</cite></footer>
</blockquote>

与 wx-pullquote 的分别：quote 引的是别人的话，pullquote 抽的是本文自己的话。 前者是引证，后者是版式强调；把 pullquote 当引用用，会让读者以为文章在引述外部来源。

2026 年 8 月（示例月份）
一	二	三	四	五	六	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31