容器
AppShell
桌面上两栏，手机上一栏加抽屉。
示例
default
Content well
说明
桌面两栏，手机一栏加一个抽屉。
抽屉除了点遮罩，按 Escape 也能关，因为一个只能靠“点外面”关掉的抽屉，会把键盘用户困在一个出不来的菜单里。遮罩是 <button> 也是同一个理由——带 onClick 的 <div> 键盘够不着，也不会被念成任何东西。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| sidebar必填 | ReactNode | 侧栏里的导航内容（比如一叠 `NavItem`）。 | |
| brand | ReactNode | 可选的品牌标识，钉在侧栏顶部。 | |
| contentAs | 'main' | 'div' | 内容区渲染成哪个元素。 应用的外壳用 `main` 是对的，也是默认值。一个文档里只能有一个 `main` 地标，所以当 AppShell 被放进另一个页面里时——文档站上的预览、截图工具——必须传 `div`，否则页面上就有两个，辅助技术再也回答不了“内容在哪”。 | |
| topbar | ReactNode | 顶栏里的可选内容，排在移动端开关之后。 |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
无障碍
- 抽屉除了点遮罩，也能用 Escape 关闭，所以键盘用户不会被困在里面。
- 遮罩是 <button>，因为带 onClick 的 div 既够不到也不会被播报。