d19334b1ac
Former-commit-id: 36bfd4d323bb29827ad9fd753825c5a3867be2eb [formerly 15f4feaedae36db0987f63e12d4ca061fddf5859] [formerly 36bfd4d323bb29827ad9fd753825c5a3867be2eb [formerly 15f4feaedae36db0987f63e12d4ca061fddf5859] [formerly 36bfd4d323bb29827ad9fd753825c5a3867be2eb [formerly 15f4feaedae36db0987f63e12d4ca061fddf5859] [formerly 15f4feaedae36db0987f63e12d4ca061fddf5859 [formerly ef75c8e3523dfccad3458d2da43be6fdfde21ef2 [formerly 347189f0659f1ea0b712975f5f5ee950ea69cb4a]]]]] Former-commit-id: 147ad91fbd04e71227e5975b37b480d12afbf6d8 Former-commit-id: 76f218544ad65187408e0c2125afa3309e8471e5 Former-commit-id: 2cebe1c9a334274b7f251e563b2d14a2e89294d9 [formerly 6d3d4e1e1658d8ca204f08ee1ba77ebbbe7c89e1] Former-commit-id: 409f859c6c793b409e6d28d64589626d4cb7947e Former-commit-id: 746b3a50ebe0440bbd2c76dff71683b17a33f9df Former-commit-id: 68a1d7b1e4eda3cd63e5f573c64ab1f93a4a23fc Former-commit-id: a11a7b0e7d5d0f320016bbf33e112210e9b23729 Former-commit-id: 67e373aacbc8b00f97059f742d8e20afe26bab9d
5.1 KiB
页面容器
参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| type | 容器模式 | 非 | string | full card ghost | full |
| scroll | 使用自定义滚动条 | 非 | boolean | false |
下面的介绍中 主区域 范围见下
full
full 模式会生成一个无论内容多少，都会填满主区域的页面容器。
页面内容较少时，container 也会填满主区域：
页面有较多内容时会在侧面产生滚动条
支持 header 和 footer 插槽，两个区域分别会固定在主体区域的顶部和底部，内容压缩至中间
如果使用插槽后内容超出一屏，滚动条会出现在 header 和 footer 之间
设置 scroll 属性可以启用自定义滚动条，自定义滚动条在内容不满一屏时不会显示
超出一屏后在滚动时显示自定义滚动条
如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会出现在 header 和 footer 之间
card
卡片模式适用于简单的小页面，可以方便地实现下面的布局效果：
如果内容超出一屏长度，会在右侧显示滚动条
如果内容超出一屏，滚动条滚动到底部后主体区域会距离底部 20px 距离
支持 header 和 footer 插槽，header 区域会固定在顶部，footer 区域会固定在底部
如果使用插槽后内容超出一屏，滚动条会在 header 和 footer 之间显示
如果使用插槽后内容超出一屏，滚动条滚动到底部后主体区域依然会距离底部 20px 距离
设置 scroll 属性可以启用自定义滚动条，滚动条在内容不满一屏时不会显示
超出一屏后在滚动时显示自定义滚动条
如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会在 header 和 footer 之间显示
如果使用插槽后内容超出一屏，自定义滚动条滚动到底部后主体区域依然会距离底部 20px 距离
ghost
ghost 模式适合对页面有定制需求的用户，此模式生成一个没有背景颜色的页面区域
如果内容超出一屏长度，会在右侧显示滚动条
支持 header 和 footer 插槽，header 区域会固定在顶部，footer 区域会固定在底部
如果使用插槽后内容超出一屏，滚动条会出现在 header 和 footer 之间
设置 scroll 属性可以启用自定义滚动条，自定义滚动条在内容不满一屏时不会显示
超出一屏后在滚动时显示自定义滚动条
如果使用插槽后内容超出一屏，发生滚动时自定义滚动条会在 header 和 footer 之间显示
注
本文插图为 @FairyEver 为此文档设计，未经授权不得转载或者修改使用
