mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc(layout): themed style

Browse Source
This commit is contained in:
07akioni 2020-05-30 17:18:16 +08:00
parent cbb77b97e3
commit c250e3f8b4
2 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
demo/documentation/components/layout/enUS/index.md
View File

@ -18,33 +18,40 @@ scroll-to
### Layout, Layout Content Props
|Name|Type|Default|Description|
|-|-|-|-|
|use-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.|
|theme|`'light' \| 'dark'`|`null`||
|themed-style|`{ [themeName: string]: Object }`|`null`||
|use-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|
### Layout Footer Props
|Name|Type|Default|Description|
|-|-|-|-|
|bordered|`boolean`|`false`||
|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.|
|theme|`'light' \| 'dark'`|`null`||
### Layout Header Props
|Name|Type|Default|Description|
|-|-|-|-|
|bordered|`boolean`|`false`||
|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.|
|theme|`'light' \| 'dark'`|`null`||
### Layout Sider Props
|Name|Type|Default|Description|
|-|-|-|-|
|bordered|`boolean`|`false`||
|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. Make sure its adjacent n-layout or n-layout-content position set to `'absolute'` when its position is `'absolute'`.|
|collapsed-width|`number`|`48`||
|width|`number`|`272`||
|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. `'transform'` collapse mode only work with sider in `'absolute'` position.|
|collapsed|`boolean`|`false`||
|use-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|
|collapsed-width|`number`|`48`||
|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. Make sure its adjacent n-layout or n-layout-content position set to `'absolute'` when its position is `'absolute'`.|
|show-content|`boolean`|`true`|If set to `false`, sider content will be invisible.|
|show-trigger|`boolean \| 'bar' \| 'arrow-circle'`|`false`|Whether to show the built-in trigger button on sider.|
|theme|`'light' \| 'dark'`|`null`||
|use-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|
|width|`number`|`272`||
## Slots
### Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots
@ -56,8 +63,8 @@ scroll-to
### Layout Sider Events
|Name|Parameters|Description|
|-|-|-|
|expand|`()`||
|collapse|`()`||
|expand|`()`||
## Methods

20
demo/documentation/components/layout/zhCN/index.md
View File

@ -18,16 +18,17 @@ scroll-to
### Layout, Layout Content Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
|use-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 来确保它按照你预想的方式展示|
|theme|`'light' \| 'dark'`|`null`||
|themed-style|`{ [themeName: string]: Object }`|`null`||
|use-native-scrollbar|`boolean`|`true`|是否在自身使用原生滚动条。如果设定为 `false`, Layout 将会对内容使用 naive-ui 风格的滚动条|
### Layout Footer Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
|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`||
### Layout Header Props
|名称|类型|默认值|说明|
@ -39,16 +40,17 @@ scroll-to
### Layout Sider Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
|bordered|`boolean`|`false`||
|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`|
|collapsed-width|`number`|`48`||
|width|`number`|`272`||
|collapse-mode|`'transform' \| 'width'`|`'transform'`|如果设定为 `'width'`，Sider 的内容宽度将会被实际改变；如果设定为 `'transform'`，边栏将只会移动它的位置而不会改变宽度。`'transform'` 的 collapse-mode 只适用于 `'absolute'` position 的 Sider|
|collapsed|`boolean`|`false`||
|use-native-scrollbar|`boolean`|`true`|是否在自身使用原生滚动条。如果设定为 `false`, Sider 将会对内容使用 naive-ui 风格的滚动条|
|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`||
|width|`number`|`272`||
|use-native-scrollbar|`boolean`|`true`|是否在自身使用原生滚动条。如果设定为 `false`, Sider 将会对内容使用 naive-ui 风格的滚动条|
## Slots
### Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots
@ -60,8 +62,8 @@ scroll-to
### Layout Sider Events
|名称|参数|说明|
|-|-|-|
|expand|`()`||
|collapse|`()`||
|expand|`()`||
## Methods
### Layout, Layout Content, Layout Sider Methods