mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(layout): API table (#637)

Browse Source
This commit is contained in:
songjianet 2021-07-25 13:36:27 +08:00 committed by GitHub
parent d7327d9b49
commit a8f0a3b38e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/layout/demos/enUS/index.demo-entry.md
View File

@ -32,14 +32,14 @@ scroll-to
| content-style | `string \| Object` | `undefined` | Style of scrollable content node. |
| embedded | `boolean` | `false` | Use darker background to show a embedded effect. Only work for light theme. |
| has-sider | `boolean` | `false` | Whether the component has sider inside. If so it must be `true`. |
| native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on itself. If set to `false`, layout will use a naive-ui style scrollbar for content |
| native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on itself. If set to `false`, layout will use a naive-ui style scrollbar for content. |
| position | `'static' \| 'absolute'` | `'static'` | `static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `right`, `top`, `bottom` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect. |
### Layout Footer Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| bordered | `boolean` | `false` | |
| bordered | `boolean` | `false` | Whether to show the border. |
| inverted | `boolean` | `false` | Whether to use inverted background. |
| position | `'static' \| 'absolute'` | `'static'` | `static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `right`, `top` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect. |
@ -47,7 +47,7 @@ scroll-to
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| bordered | `boolean` | `false` | |
| bordered | `boolean` | `false` | Whether to show the border. |
| inverted | `boolean` | `false` | Whether to use inverted background. |
| position | `'static' \| 'absolute'` | `'static'` | `static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `right`, `bottom` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to ma ke as you expect. |
@ -55,28 +55,28 @@ scroll-to
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| bordered | `boolean` | `false` | |
| bordered | `boolean` | `false` | Whether to show the border. |
| collapse-mode | `'transform' \| 'width'` | `'transform'` | If set to `'width'`, the sider's content width will be actually collapsed. If set to `'transform'`, the sider will only move it's position and won't change its content width. |
| collapsed | `boolean` | `undefined` | Whether the sider is collapsed. It only works for when `position` is `'static'`. |
| collapsed-width | `number` | `48` | |
| collapsed-width | `number` | `48` | Folded width. |
| content-style | `string \| Object` | `undefined` | Style of scrollable content node. |
| default-collapsed | `boolean` | `false` | |
| default-collapsed | `boolean` | `false` | Default collapsed state in uncontrolled mode. |
| inverted | `boolean` | `false` | Whether to use inverted background. |
| native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on itself. If set to `false`, sider will use a naive-ui style scrollbar for content |
| native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on itself. If set to `false`, sider will use a naive-ui style scrollbar for content. |
| position | `'static' \| 'absolute'` | `'static'` | `static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `top`, `bottom` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it as you expect. |
| show-collapsed-content | `boolean` | `true` | Whether to show content in sider after it is collapsed. |
| show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | Whether to show the built-in trigger button on sider. |
| trigger-style | `string \| Object` | `undefined` | |
| width | `number` | `272` | |
| on-update:collapsed | `(collapsed: boolean) => void` | `undefined` | |
| trigger-style | `string \| Object` | `undefined` | Trigger style. |
| width | `number` | `272` | Width. |
| on-update:collapsed | `(collapsed: boolean) => void` | `undefined` | Callback function when the folding state changes. |
## Slots
### Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots
| Name | Parameters | Description |
| ------- | ---------- | ----------- |
| default | `()` | |
| Name | Parameters | Description |
| ------- | ---------- | --------------- |
| default | `()` | Layout content. |
## Methods

32
src/layout/demos/zhCN/index.demo-entry.md
View File

@ -32,22 +32,22 @@ scroll-to
| content-style | `string \| Object` | `undefined` | 可滚动内容节点的样式 |
| embedded | `boolean` | `false` | 使用更深的背景色展现嵌入效果，只对亮色主题生效 |
| has-sider | `boolean` | `false` | 组件内部是否有边栏，如果有的话必须设为 `true` |
| native-scrollbar | `boolean` | `true` | 是否在自身使用原生滚动条。如果设定为 `false`, Layout 将会对内容使用 naive-ui 风格的滚动条 |
| position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
| native-scrollbar | `boolean` | `true` | 是否在自身使用原生滚动条。如果设定为 `false`，`Layout` 将会对内容使用 `naive-ui` 风格的滚动条 |
| position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`，`absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
### Layout Footer Props
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| bordered | `boolean` | `false` | |
| bordered | `boolean` | `false` | 是否显示边框 |
| inverted | `boolean` | `false` | 使用反转背景色 |
| position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
| position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`，`absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
### Layout Header Props
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| bordered | `boolean` | `false` | |
| bordered | `boolean` | `false` | 是否显示边框 |
| inverted | `boolean` | `false` | 使用反转背景色 |
| position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
@ -55,28 +55,28 @@ scroll-to
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| bordered | `boolean` | `false` | |
| bordered | `boolean` | `false` | 是否显示边框 |
| collapse-mode | `'transform' \| 'width'` | `'transform'` | 如果设定为 `'width'`，Sider 的内容宽度将会被实际改变；如果设定为 `'transform'`，边栏将只会移动它的位置而不会改变宽度 |
| collapsed | `boolean` | `undefined` | 边栏是否折叠。只在 `position` 为 `'static'` 时生效 |
| collapsed-width | `number` | `48` | |
| collapsed-width | `number` | `48` | 折叠宽度 |
| content-style | `string \| Object` | `undefined` | 可滚动内容节点的样式 |
| default-collapsed | `boolean` | `false` | |
| default-collapsed | `boolean` | `false` | 非受控模式下的默认折叠状态 |
| inverted | `boolean` | `false` | 使用反转背景色 |
| native-scrollbar | `boolean` | `true` | 是否在自身使用原生滚动条。如果设定为 `false`, Sider 将会对内容使用 naive-ui 风格的滚动条 |
| native-scrollbar | `boolean` | `true` | 是否在自身使用原生滚动条。如果设定为 `false`，`Sider` 将会对内容使用 naive-ui 风格的滚动条 |
| position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
| show-collapsed-content | `boolean` | `true` | 是否在 sider 折叠后展示内部内容 |
| show-collapsed-content | `boolean` | `true` | 是否在 `sider` 折叠后展示内部内容 |
| show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | 内置的触发按钮是否展示 |
| trigger-style | `string \| Object` | `undefined` | |
| width | `number` | `272` | |
| on-update:collapsed | `(collapsed: boolean) => void` | `undefined` | |
| trigger-style | `string \| Object` | `undefined` | 触发样式 |
| width | `number` | `272` | 宽度 |
| on-update:collapsed | `(collapsed: boolean) => void` | `undefined` | 折叠状态发生改变时的回调函数 |
## Slots
### Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots
| 名称 | 参数 | 说明 |
| ------- | ---- | ---- |
| default | `()` | |
| 名称 | 参数 | 说明 |
| ------- | ---- | ---------- |
| default | `()` | 布局的内容 |
## Methods