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/settings-layout.md.
  • 简体中文
  • next
  • 设置布局

    Settings Layout 提供可导航的配置分区与真实表单控件,适用于运维配置、偏好、策略、Provider、路由与其他结构化设置。

    Live previewHTML · CSS · JavaScript

    常规

    该网关的身份与网络默认值。

    用途

    <div class="settings-layout">
      <aside><nav aria-label="Settings sections">...</nav></aside>
      <main><section id="general">...</section></main>
    </div>

    参数

    参数默认目的
    --settings-navigation-size14rem导航栏宽度
    --settings-sticky-offset1rem粘性导航顶部偏移
    --settings-section-gap1.5rem配置部分之间的间隙
    aria-current="page"标记活动设置目标

    变体和状态

    布局变成 768px 以下的水平滚动部分列表。 表单状态属于子基元:requireddisabledaria-invalid、验证消息、内部状态授权和保存反馈。

    可访问性

    使用真实表单控件与字段标签,不要用未结构化的源码编辑器代替配置界面。原始配置源码可作为高级入口保留。每个分区都需要唯一标题与 ID,供导航直接定位。