AppShell是一个页面布局组件, 方便为你的App页面做布局.
AppShell采用了最常用的布局形式, 由以下几部分组成:
AppShell使用响应式布局. 会根据断点自动显示或隐藏drawer. 也就是说在PC端常常显示抽屉; 在移动端抽屉默认隐藏, 可以点击按钮可使其显示.
可以使用障眼法, 在drawer的顶部添加一个与header相同高度和相同背景的元素. footer延伸到drawer同理.
在新窗口打开可以为各个部分添加一些特性. 下面的例子中演示了当页面向下滚动一段距离时自动隐藏header, 向上滚动时立即显示header:
在新窗口打开| 属性名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
| drawer | ReactElement<any, string | JSXElementConstructor<any>> | undefined | no | ||
| footer | ReactElement<any, string | JSXElementConstructor<any>> | undefined | no | ||
| header | ReactElement<any, string | JSXElementConstructor<any>> | undefined | no | ||
| main | ReactElement<any, string | JSXElementConstructor<any>> | undefined | no | ||
| responsive | "md" | "lg" | "xl" | "2xl" | undefined | no | "lg" | 响应式断点 |
| slots | { body?: string | undefined; header?: string | undefined; main?: string | undefined; footer?: string | undefined; side?: string | undefined; drawer?: string | undefined; } | undefined | no |