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
  • 简体中文
  • next

      • 组件目录

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

      Live previewHTML · CSS · JavaScript
      02

      操作

      按钮与分组命令。

      12

      表单

      字段、输入和选择控件。

      26

      基础组件

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

      10

      应用模式

      外壳、工作区、功能区、窗格与状态。

      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，不需要额外的组件布尔参数。

      组件分组

      操作

      Button · Button Group

      表单

      Field · Input · Input Group · Textarea · Native Select · Select · Checkbox · Radio Group · Switch · Slider · Label · Combobox

      导航

      Activity Bar · Breadcrumb · Tabs · Pagination · Sidebar

      浮层

      Alert Dialog · Dialog · Drawer · Dropdown Menu · Popover · Command · Tooltip

      反馈

      Alert · Badge · Empty · Progress · Skeleton · Spinner · Toast

      数据展示

      Accordion · Avatar · Card · Chart · Item · Kbd · Table

      应用模式

      App Shell · Workspace Header · Toolbar · Ribbon · Settings Layout · Resource Card · Split Pane · Task Pane · Status Bar · Resource Workbench

      支持矩阵

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

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