#设置布局

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

npm install @a3s-lab/ui@0.4.0

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

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#用法

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

#参数

#变体和状态

布局使用固定的二级导航边界和独立滚动内容区。低于 768px 时，导航变成有边界的横向分区列表。表单状态属于子组件：required、disabled、aria-invalid、验证消息、脏状态和保存反馈。需要稳定的“名称—控件”网格时，组合设置行。

#可访问性

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