For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/components/index.md.

组件总览

A3S UI 提供 116 个公开组件契约。可按中文名、英文名、路由名或界面职责搜索;结果会保留当前语言与文档版本。

按界面职责查找组件

先确定要解决的界面任务;知道名称时可直接搜索。

116 个组件
9 个职责分组,可搜索 116 个组件

操作与输入

12 个组件

通过操作、字段和文本输入完成创建、编辑与提交。

选择与筛选

12 个组件

选择并收窄可用值,同时尽量保留浏览器原生状态。

导航与定位

8 个组件

在页面、层级和滚动位置之间移动,同时保留上下文。

应用结构

14 个组件

组织应用外壳、工具栏、窗格、长期区域与外观控制。

浮层与菜单

10 个组件

承载菜单以及需要分层、定位或焦点保护的交互。

反馈与状态

9 个组件

解释加载、状态、结果、异常与下一步恢复方式。

内容与媒体

13 个组件

呈现正文、媒体、代码与可复用的内容表面。

数据展示

8 个组件

组织集合、属性、过程与量化数据。

Harness

30 个组件

覆盖任务输入、会话、文件、执行授权、审阅证据与开发预览。

选择原则

  • 操作、输入和选择优先使用原生元素,让浏览器管理焦点、表单状态与可访问性。
  • 只有原生平台没有提供完整行为时,才引入组件运行时,例如复合选择器、可调整窗格和设备预览。
  • 页面外壳、工具栏和资源布局属于工作区结构,不应代替更小的输入或反馈组件。
  • 任务、执行、审阅与开发工具集中在 Harness 中;这些组件仍使用稳定的 /components/* 页面地址。

结构化表单

Form 系统把确定性 Form Core、可视化 Designer、受控 Renderer、23 个内置字段、复杂集合字段和持久交互契约收进同一个组件信息架构。React Hook Form 接口与 Vue composables 使用相同的 Schema、校验和提交值语义,交互示例直接嵌入组件文档。

API 模型

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

原生元素始终是状态的单一事实来源。例如,禁用按钮直接使用 disabled,不需要额外维护一份组件状态。

框架接入

HTML 是所有组件的公开契约。React 与 Vue 适配器复用同一语义根元素,不增加包装层;组件只有在暴露事件或方法时才提供对应的 hook 或组合式函数。每个组件页面会明确列出实际可用的接口,不使用占位 API。

能力通用组件应用结构Harness
语义化 HTML必须必须必须
React 与 Vue语义根适配器语义根适配器语义根适配器
Hook / 组合式函数有行为接口时提供有行为接口时提供有行为接口时提供
浅色与深色主题支持支持支持
RTL 逻辑布局支持支持支持
响应式布局按组件提供内置按工作流提供
Nunjucks 与 Jinja已有组件模板通过 HTML 组合通过 HTML 组合

新产品应优先使用 A3S 视觉风格。Vega、Nova、Maia、Lyra、Mira、Luma、Sera 与 Rhea 仅用于需要兼容既有外观的应用。