--- title: "应用外壳" description: "为页面或应用搭起框架。它安放页眉、导航、主内容、侧栏和页脚，根据窗口的宽度决定各自的呈现方式，并让键盘一步就能到达内容。" url: "https://tanrei.chnotchy.com/zh-cn/components/app-shell/" last_updated: 2026-10-23T11:50:10.000Z --- # 应用外壳 > 为页面或应用搭起框架。它安放页眉、导航、主内容、侧栏和页脚，根据窗口的宽度决定各自的呈现方式，并让键盘一步就能到达内容。 ## 概览 应用外壳是窗口的框架。它只安放各个区域，不绘制其中的任何内容：页眉是你的应用栏，导航是你的导航抽屉，页脚是你自己的布局。外壳补上的，是手工搭建的框架容易遗漏的东西：地标、统一的一组窗口宽度、粘性页眉在链接目标上方占去的空间，以及让键盘越过框架的途径。 框架就是整个窗口，所以本页没有它的实时示例：画在页面里的外壳，采用的会是那个页面的窗口类别。[规格](https://tanrei.chnotchy.com/zh-cn/components/app-shell/#%E8%A7%84%E6%A0%BC)下的测试样例连同各自的属性一并列出；在测试中，每一个都单独画在它自己的窗口里。 在 Web 上，它是包在你自己的各个区域外面的 ``。这个元素没有 shadow root，所以 `
` 就是页面的横幅（banner），唯一的 `
` 就是页面的主内容地标，不运行脚本时和爬虫都能读到。其他平台尚未实现。 ### 用法 **Web** ```html 跳到主要内容
menu
…
…
…
 ``` **React** ```tsx import { AppBar, AppShell, Button, NavigationDrawer } from '@tanrei/react'; import '@tanrei/web/app-shell.css'; setWindowClass(event.detail.windowClass)}> 跳到主要内容
…
{children}
…
 ``` `@tanrei/web/app-shell.css` 在任何脚本运行之前就排好整个框架，所以服务器渲染的页面不会在脚本到达时发生位移，跳过链接在禁用脚本时也能工作。元素自己也会把同一份样式表加进页面。 ### 你要写的内容 区域是带 `slot` 属性（attribute）的子元素。主内容区域是唯一的那个 `
`，它不带这个属性。 | 区域 | 在 Web 上 | 外壳给它什么 | | --- | --- | --- | | 跳过链接 | `` | 键盘的第一个停靠点。只有在它拥有键盘焦点时才画出来。 | | 公告 | 包着提示块的 `
` | 页眉上方，占满框架的整个宽度。 | | 页眉 | 包着你的应用栏的 `
` | 整个宽度。页面滚动时，它留在顶部。 | | 导航 | `` | 起始边，采用三种呈现方式之一。 | | 主内容 | `
` | 两侧边距、宽度上限，以及跳过链接的目的地。 | | 侧栏 | `