mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
73 lines
4.0 KiB
Markdown
73 lines
4.0 KiB
Markdown
# 布局 Layout
|
||
布局是用来布局的。
|
||
|
||
这个组件用起来有点麻烦，但是就像手动挡的车，还是值得一试的。
|
||
<!--single-column-->
|
||
## 演示
|
||
```demo
|
||
basic
|
||
border
|
||
absolute
|
||
scrollbar
|
||
collapse
|
||
trigger-button
|
||
show-sider-content
|
||
scroll-to
|
||
```
|
||
## Props
|
||
### Layout, Layout Content Props
|
||
|名称|类型|默认值|说明|
|
||
|-|-|-|-|
|
||
|position|`'static' \| 'absolute'`|`'static'`|`static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
|
||
|theme|`'light' \| 'dark' \| null`|`null`||
|
||
|themed-style|`{ [themeName: string]: Object }`|`null`||
|
||
|use-native-scrollbar|`boolean`|`true`|是否在自身使用原生滚动条。如果设定为 `false`, Layout 将会对内容使用 naive-ui 风格的滚动条|
|
||
|
||
### Layout Footer Props
|
||
|名称|类型|默认值|说明|
|
||
|-|-|-|-|
|
||
|bordered|`boolean`|`false`||
|
||
|position|`'static' \| 'absolute'`|`'static'`|`static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
|
||
|theme|`'light' \| 'dark' \| null`|`null`||
|
||
|
||
### Layout Header Props
|
||
|名称|类型|默认值|说明|
|
||
|-|-|-|-|
|
||
|theme|`'light' \| 'dark' \| null`|`null`||
|
||
|bordered|`boolean`|`false`||
|
||
|position|`'static' \| 'absolute'`|`'static'`|`static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
|
||
|
||
### Layout Sider Props
|
||
|名称|类型|默认值|说明|
|
||
|-|-|-|-|
|
||
|bordered|`boolean`|`false`||
|
||
|collapse-mode|`'transform' \| 'width'`|`'transform'`|如果设定为 `'width'`，Sider 的内容宽度将会被实际改变；如果设定为 `'transform'`，边栏将只会移动它的位置而不会改变宽度。`'transform'` 的 collapse-mode 只适用于 `'absolute'` position 的 Sider|
|
||
|collapsed|`boolean`|`false`||
|
||
|collapsed-width|`number`|`48`||
|
||
|position|`'static' \| 'absolute'`|`'static'`|`static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示。当 Sider 的 position 是 `absolute` 的时候，需要确保它旁边的 Layout 或者 Layout Content 的 position 被设为 `absolute`|
|
||
|show-content|`boolean`|`true`|如果设为 `false`，Sider 的内容将会变透明|
|
||
|show-trigger|`boolean \| 'bar' \| 'arrow-circle'`|`false`|内置的触发按钮是否展示|
|
||
|theme|`'light' \| 'dark' \| null`|`null`||
|
||
|width|`number`|`272`||
|
||
|use-native-scrollbar|`boolean`|`true`|是否在自身使用原生滚动条。如果设定为 `false`, Sider 将会对内容使用 naive-ui 风格的滚动条|
|
||
|
||
|
||
## Slots
|
||
### Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots
|
||
|名称|参数|说明|
|
||
|-|-|-|
|
||
|default|`()`||
|
||
|
||
## Events
|
||
### Layout Sider Events
|
||
|名称|参数|说明|
|
||
|-|-|-|
|
||
|collapse|`()`||
|
||
|expand|`()`||
|
||
|
||
## Methods
|
||
### Layout, Layout Content, Layout Sider Methods
|
||
|名称|类型|说明|
|
||
|-|-|-|
|
||
|scrollTo|`((xCoord: number, yCoord: number) => void) \| (options: { left?: number, top?: number, behavior: 'smooth' \| 'auto' }) => void`|滚动到某处|
|