组件目录

A3S UI 将语义化基础组件与可复用应用模式组合在一起。每篇组件文档都包含实时预览、最小 HTML、参数、状态、变体与可访问性说明。

操作

按钮与分组命令。

表单

字段、输入和选择控件。

基础组件

导航、浮层、反馈与数据展示。

应用模式

外壳、工作区、品牌标识、窗格与状态。

工具

滚动区域与主题控制。

<div class="grid w-full gap-3 sm:grid-cols-2 lg:grid-cols-5">
  <article class="card" data-size="sm"><header><span class="badge">02</span><h2>操作</h2><p>按钮与分组命令。</p></header></article>
  <article class="card" data-size="sm"><header><span class="badge" data-variant="secondary">13</span><h2>表单</h2><p>字段、输入和选择控件。</p></header></article>
  <article class="card" data-size="sm"><header><span class="badge" data-variant="outline">32</span><h2>基础组件</h2><p>导航、浮层、反馈与数据展示。</p></header></article>
  <article class="card" data-size="sm"><header><span class="badge">12</span><h2>应用模式</h2><p>外壳、工作区、品牌标识、窗格与状态。</p></header></article>
  <article class="card" data-size="sm"><header><span class="badge" data-variant="secondary">02</span><h2>工具</h2><p>滚动区域与主题控制。</p></header></article>
</div>

API 模型

A3S UI 的参数设计尽量贴近浏览器平台：

API 表面	用途	示例
根类名	选择组件	`class="resource-card"`
原生属性	行为与可访问性	`disabled`、`checked`、`aria-current="page"`
`data-*` 属性	有限的视觉或行为变体	`data-size="sm"`、`data-orientation="vertical"`
CSS 自定义属性	连续布局值与主题决策	`--split-position: 40%`
原生 JavaScript	浏览器没有提供的行为	Split Pane 指针与键盘调整

原生元素始终是状态的单一事实来源。例如，禁用按钮直接使用 disabled，不需要额外的组件布尔参数。

组件分组

支持矩阵

能力	基础组件	应用模式
语义化 HTML	必须	必须
浅色与深色主题	支持	支持
RTL 逻辑布局	支持	支持
响应式布局	按组件提供	内置
Nunjucks 与 Jinja	已有组件模板	通过 HTML 组合
JavaScript 依赖	仅交互式复合组件	仅 Split Pane 等交互模式

Office 衍生产品应优先使用 A3S 视觉风格。Vega、Nova、Maia、Lyra、Mira、Luma、Sera 与 Rhea 仍可用于需要旧版兼容外观的应用。

#组件目录

#API 模型

#组件分组

#操作

#表单

#导航

#浮层

#反馈

#数据展示

#应用模式

#工具

#支持矩阵

组件目录

API 模型

组件分组

操作

表单

导航

浮层

反馈

数据展示

应用模式

工具

支持矩阵