布局 Layout
布局是用来布局的。
演示
basic
border
absolute
scrollbar
collapse
trigger-button
show-sider-content
Props
Layout, Layout Content Props
| 名称 |
类型 |
默认值 |
说明 |
| use-native-scrollbar |
boolean |
true |
是否在自身使用原生滚动条。如果设定为 false, Layout 将会对内容使用 naive-ui 风格的滚动条 |
| mode |
'default' | 'absolute' |
default |
default 模式将会把 CSS position 设为 static. absolute 模式将会把 CSS position 设为 absolute，还将 left、right、top、bottom 设为 0。absolute 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
| 名称 |
类型 |
默认值 |
说明 |
| bordered |
boolean |
false |
|
| mode |
'default' | 'absolute' |
default |
default 模式将会把 CSS position 设为 static. absolute 模式将会把 CSS position 设为 absolute，还将 left、right、bottom 设为 0。absolute 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
| 名称 |
类型 |
默认值 |
说明 |
| bordered |
boolean |
false |
|
| mode |
'default' | 'absolute' |
default |
default 模式将会把 CSS position 设为 static. absolute 模式将会把 CSS position 设为 absolute，还将 left、right、top 设为 0。absolute 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
Layout Sider Props
| 名称 |
类型 |
默认值 |
说明 |
| bordered |
boolean |
false |
|
| mode |
'default' | 'absolute' |
default |
default 模式将会把 CSS position 设为 static. absolute 模式将会把 CSS position 设为 absolute，还将 left、top、bottom 设为 0。absolute 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示。当 Sider 的 mode 是 absolute 的时候，需要确保它旁边的 Layout 或者 Layout Content 的 mode 被设为 absoulte |
| collapsed-width |
number |
48 |
|
| width |
number |
272 |
|
| collapse-mode |
'transform' | 'width' |
'transform' |
如果设定为 'width'，Sider 的内容宽度将会被实际改变；如果设定为 'transform'，边栏将只会移动它的位置而不会改变宽度。'transform' 的 collapse-mode 只适用于 'absolute' mode 的 Sider |
| collapsed |
boolean |
false |
|
| use-native-scrollbar |
boolean |
true |
是否在自身使用原生滚动条。如果设定为 false, Sider 将会对内容使用 naive-ui 风格的滚动条 |
| show-content |
boolean |
true |
如果设为 false，Sider 的内容将会变透明。 |
| show-trigger |
boolean |
false |
内置的触发按钮是否展示 |
Events
Layout Sider Events
| 名称 |
参数 |
说明 |
| expand |
() |
|
| collapse |
() |
|
