组件
一套面向内容、文档与轻应用的基础组件。按使用目的组织，而不是按视觉外形堆放；六个家族的总数与公开契约同步生成。
通用 9 条
动作、标识与状态的基础表达。
选择通用构件 →布局 8 条
页面宽度、间距、分栏与内容节奏。
搭好内容骨架 →数据录入 15 条
输入、选择、校验与任务提交。
完成表单与输入 →数据展示 14 条
内容、关系、数据和时间的清晰呈现。
呈现内容与数据 →反馈与浮层 12 条
让状态、结果和必要的打断可被理解。
处理结果与打断 →组件如何成为可靠接口
每个组件都有语义基座、状态契约与行为归属。示例源码从实际标记生成；无脚本时，内容和基础任务仍必须成立。
查看全部 71 条组件契约
通用
类别详解 →| 构件 / class | 语义基座 | 状态契约 | 行为归属 |
|---|---|---|---|
Button.wx-btn |
button；导航目的用 a | 原生 disabled（不用 aria-disabled 伪装） | 无 |
Tag.wx-tag |
span；可操作时改用 button/a | 文字优先，不只靠颜色 | 无 |
Badge.wx-badge |
span | 短计数或提醒 | 无 |
Status.wx-status |
span | 必须同时有状态文字 | 无 |
Avatar.wx-avatar |
img 或文字 span | 信息头像必须有替代文本 | 无 |
Seal.wx-seal |
span | 装饰时 aria-hidden | 仅品牌呼吸动效 |
Keyboard.wx-kbd |
kbd | 文字化键名 | 无 |
Segmented.wx-segmented |
radiogroup 或 tablist | aria-checked / aria-selected | 采用者更新选中项 |
Toolbar.wx-toolbar |
div role=toolbar | 可用按钮状态 | 采用者实现箭头键模型 |
布局
类别详解 →| 构件 / class | 语义基座 | 状态契约 | 行为归属 |
|---|---|---|---|
Page.wx-page |
body 或页面根 | 无 | 无 |
Container.wx-container |
main / article / section | 无 | 无 |
Measure.wx-measure |
正文容器 | 无 | 无 |
Stack.wx-stack |
任意语义容器 | 节奏变体 | 无 |
Cluster.wx-cluster |
任意语义容器 | 节奏变体 | 无 |
Spread.wx-spread |
任意语义容器 | 无 | 无 |
Columns.wx-cols |
任意语义容器 | 列数变体 | 无 |
Rule.wx-rule |
hr | strong / short 变体 | 无 |
导航
类别详解 →| 构件 / class | 语义基座 | 状态契约 | 行为归属 |
|---|---|---|---|
Navigation.wx-nav |
nav | aria-current | 无 |
Breadcrumb.wx-crumbs |
nav + ol | 当前位置不可链接 | 无 |
Pager.wx-pager |
nav | 上一页 / 下一页文字化 | 无 |
Menu.wx-menu |
ul + a；禁用项用 span | aria-current / aria-disabled | 无 |
Dropdown.wx-dropdown |
details / summary | open | 原生开合 |
Sidebar.wx-sidebar |
aside 或 nav | data-wx-disclosure-ready / data-open / aria-expanded | disclosure.js；无 JS 保持文档流 |
Table of Contents.wx-toc |
nav + list | aria-current | toc.js |
Anchor.wx-anchor |
nav + list | aria-current | 采用者或页面脚本更新状态 |
Affix.wx-affix |
语义导航容器 | 无 | CSS sticky |
Pagination.wx-pagination |
nav + ul + a；禁用项用 span | aria-current=page / aria-disabled | 无 |
Tabs.wx-tabs |
tablist / tab / tabpanel | aria-selected / aria-controls | tabs.js |
Steps.wx-steps |
ol | aria-current=step | 无 |
Skip Link.wx-skip |
a | 焦点可见 | 无 |
数据录入
类别详解 →| 构件 / class | 语义基座 | 状态契约 | 行为归属 |
|---|---|---|---|
Form.wx-form |
form | 提交 / 错误汇总 | 采用者处理提交 |
Field.wx-field |
label + control | aria-invalid / aria-describedby | 无 |
Input.wx-input |
input / textarea | required / disabled / invalid | 无 |
Select.wx-select |
select | required / disabled / invalid | 无 |
Number Input.wx-number |
input type=number | min / max / step | 无 |
Checkbox.wx-check |
label + input type=checkbox | checked / disabled | 无 |
Radio.wx-radio |
label + input type=radio | checked / disabled | 无 |
Switch.wx-switch |
button role=switch | aria-checked | 采用者更新状态 |
Slider.wx-slider |
input type=range | 可访问名与数值 | 无 |
Rate.wx-rate |
radio group | 可访问名、选中项与 token-backed 点击框 | 原生单选；采用者读取状态 |
Upload.wx-upload |
label + input type=file | 关联 label | 采用者处理文件 |
Search.wx-search |
input type=search | 关联 label | 采用者处理查询 |
Autocomplete.wx-autocomplete |
input + datalist | label / list | 原生建议列表 |
Date Picker.wx-date-picker |
input type=date | min / max / required | 原生日期选择器 |
Time Picker.wx-time-picker |
input type=time | min / max / required | 原生时间选择器 |
数据展示
类别详解 →| 构件 / class | 语义基座 | 状态契约 | 行为归属 |
|---|---|---|---|
Entry.wx-entry |
article | 原生语义 | 无 |
List.wx-list |
ul / ol | 原生语义 | 无 |
Descriptions.wx-desc |
dl | 原生语义 | 无 |
Table.wx-table |
table + caption；宽表用具名、tabindex=0 的 wx-table-scroll region | 列标题 / scope | 无 |
Statistic.wx-stat |
语义文本 | tabular-nums | 无 |
Timeline.wx-timeline |
ol | 原生语义 | 无 |
Tree.wx-tree |
ul + details | open / aria-current | 原生开合 |
Collapse.wx-collapse |
details | open | 原生开合 |
Figure.wx-figure |
figure + figcaption | 图像必须有替代文本 | 无 |
Image.wx-image |
img | 有意义图像必须有 alt | 无 |
Gallery.wx-gallery |
labelled region | 图片 alt | 无 |
Calendar.wx-calendar |
table + caption | aria-current / aria-pressed | 采用者管理日期 |
Quote.wx-quote |
blockquote | 引用可归属 | 无 |
Code.wx-code |
pre + code | 代码语言可标注 | copy.js（可选） |
反馈与浮层
类别详解 →| 构件 / class | 语义基座 | 状态契约 | 行为归属 |
|---|---|---|---|
Note.wx-note |
section / div | 语义色与文字同时出现 | 无 |
Alert.wx-alert |
section / div | 状态标题；阻塞时有明确恢复路径 | 无 |
Toast.wx-toast |
稳定 aria-live region | polite / atomic | overlay.js 的 wxToast() |
Progress.wx-progress |
progress | 可访问名与值 | 采用者更新值 |
Meter.wx-meter |
meter | 可访问名与值 | 采用者更新值 |
Empty.wx-empty |
section | 状态标题与下一步 | 无 |
Result.wx-result |
section | 状态标题与下一步 | 无 |
Modal.wx-modal |
dialog | aria-labelledby | overlay.js |
Drawer.wx-drawer |
dialog | aria-labelledby | overlay.js |
Tooltip.wx-tooltip |
role=tooltip | aria-describedby | 无 |
Popover.wx-popover |
details | open | 原生开合 |
Popconfirm.wx-popconfirm |
details | open | 原生开合；采用者执行确认动作 |
范围
71 条是按可单独采用的公开契约逐项计数，不把同一 class 的修饰符重复充数。富文本、复杂级联和通用图标生态仍是明确缺口；Card、Spinner、Skeleton、Carousel 与 Watermark 属于设计语言的有意排除。