#header-mark#
AppLayout 应用布局
用于布局的容器组件，方便快速搭建页面的基本结构：
<AppLayout>：外层容器。有header，left_sidebar，center，right_sider，footer等5个插槽，分别表示顶栏、左侧边栏、主要区域、右侧边栏、底栏。
常见页面布局
自定义面板宽高
您还可以使用 pane_widths 和 pane_heights 参数修改窗格的相对和绝对宽度和高度。两者都接受三个元素的序列，每个元素要么是整数（相当于赋予行/列的权重），要么是格式为 '1fr' （与整数相同）或 '100px'。
AppLayout API
AppLayout 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 容器宽 | str | - |
| height | 容器高 | str | - |
| pane_widths | (左侧边栏，主要区域，右侧边栏)的绝对或相对宽度 | str | - |
| pane_heights | (顶栏，主要区域，底栏)的绝对或相对高度 | str | - |
| gutter（保留参数） | 栅格间隔, css flex布局下的 gride-gap | str | - |
| justify（保留参数） | css flex布局下的水平排列方式 | enum | start |
| align（保留参数） | css flex布局下的垂直排列方式 | enum | — |
| style | 自定义css样式 | str | - |
TIP
style 支持的其它css属性
Sizes相关
- height
- width
- max_height
- max_width
- min_height
- min_width
Display相关
- visibility
- display
- overflow
Box model相关
- border
- margin
- padding
Positioning相关
- top
- left
- bottom
- right
AppLayout Slots
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| header | 顶栏自定义内容 | |
| left_sidebar | 左侧边栏自定义内容 | |
| right_sidebar | 右侧边栏自定义内容 | |
| center | 主要区域自定义内容 | |
| footer | 底栏自定义内容 |
AppLayout 方法
| 属性名 | 说明 | 类型 |
|---|
src/examples/ipywui/component/layout-app