mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
doc(layout): zh-cn
This commit is contained in:
07akioni
parent
21e811b88f
commit
28a797faa6
@ -1,7 +1,7 @@
|
||||
# Absolute
|
||||
All layout components can use absolute positioning. It can be used when you want content scrolling inside a box.
|
||||
All layout components can use absolute positioning. It can be used when you want content scrolling inside fixed area.
|
||||
|
||||
<n-alert title="Caveat" type="warning">If you have set mode=`'absolute'` on sider and want the sider and its adjacent layout display in right manner, you should apply mode=`'absolute'` on layout too.</n-alert>
|
||||
<n-alert title="Caveat" type="warning">If you have set mode=`'absolute'` on sider and want the sider and its adjacent layout or layout-content to display in right manner, you should apply mode=`'absolute'` on layout or layout-content too.</n-alert>
|
||||
```html
|
||||
<div style="width: 100%; height: 240px; position: relative">
|
||||
<n-layout mode="absolute">
|
||||
|
||||
@ -10,37 +10,36 @@ scrollbar
|
||||
collapse
|
||||
trigger-button
|
||||
show-sider-content
|
||||
debug
|
||||
```
|
||||
## Props
|
||||
### Layout, Layout Content Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|use-native-scrollbar|`boolean`|`true`|If set to `false`, layout will use a naive-ui style scrollbar for content|
|
||||
|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `top`, `bottom` to `0`. `absolute` mode 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 work as you expect.|
|
||||
|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|
|
||||
|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `top`, `bottom` to `0`. `absolute` mode 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
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|bordered|`boolean`|`false`||
|
||||
|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `bottom` to `0`. `absolute` mode 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 work as you expect.|
|
||||
|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `top` to `0`. `absolute` mode 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 Header Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|bordered|`boolean`|`false`||
|
||||
|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `bottom` to `0`. `absolute` mode 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 work as you expect.|
|
||||
|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `right`, `bottom` to `0`. `absolute` mode 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.|
|
||||
|
||||
### Layout Sider Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|bordered|`boolean`|`false`||
|
||||
|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `top`, `bottom` to `0`. `absolute` mode 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 work as you expect.**Make sure its adjacent n-layout or n-layout-content mode set to `'absolute'` when its mode is `'absolute'`.**|
|
||||
|mode|`'default' \| 'absolute'`|`default`|`default` mode will make it css position set to `static`. `absolute` mode will make it css position set to `absolute` and `left`, `top`, `bottom` to `0`. `absolute` mode 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 mode set to `'absolute'` when its mode 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 is designed to work with `'absolute'` mode.|
|
||||
|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'` mode.|
|
||||
|collapsed|`boolean`|`false`||
|
||||
|use-native-scrollbar|`boolean`|`true`|If set to `false`, layout will use a naive-ui style scrollbar for content.|
|
||||
|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|
|
||||
|show-content|`boolean`|`true`|If set to `false`, sider content will be invisible.|
|
||||
|show-trigger|`boolean`|`false`|Whether to show the built-in trigger button on sider.|
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# Hide Sider Content
|
||||
Sometimes you don't want to see content inside sider after it's collapsed.
|
||||
```html
|
||||
<n-switch v-model="collapsed" />
|
||||
<n-layout style="height: 240px;">
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
# Trigger Button
|
||||
A trigger button, for free.
|
||||
```html
|
||||
<n-switch v-model="collapsed" />
|
||||
<n-layout style="height: 240px;">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 绝对
|
||||
所有布局组件可以使用绝对定位。可用于让内容在盒内滚动。
|
||||
# 绝对定位模式
|
||||
所有布局组件可以使用 Absolute 定位。如果你期望内容在固定的区域内滚动，可以使用 `absolute` 模式。
|
||||
|
||||
<n-alert title="警告" type="warning">为保证侧边栏及其相邻布局正确显示，它们均需设置mode="absolute"。</n-alert>
|
||||
<n-alert title="警告" type="warning">如果你在 Sider 上设定了 mode=`'absolute'`，那么为了旁边的 Layout 和 Layout Content 正常显示，他们也要被设定为 mode=`'absolute'`</n-alert>
|
||||
```html
|
||||
<div style="width: 100%; height: 240px; position: relative">
|
||||
<n-layout mode="absolute">
|
||||
|
||||
@ -1,47 +1,47 @@
|
||||
# 基础
|
||||
# 基础用法
|
||||
```html
|
||||
<n-layout>
|
||||
<n-layout-header>
|
||||
Cool Header
|
||||
酷的页头
|
||||
</n-layout-header>
|
||||
<n-layout-content>
|
||||
Cool Content
|
||||
酷的内容
|
||||
</n-layout-content>
|
||||
<n-layout-footer>
|
||||
Cool Footer
|
||||
酷的页脚
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
<br>
|
||||
<n-layout>
|
||||
<n-layout-header>
|
||||
Cool Header
|
||||
酷的页头
|
||||
</n-layout-header>
|
||||
<n-layout>
|
||||
<n-layout-sider>
|
||||
Cool Sider
|
||||
酷的边栏
|
||||
</n-layout-sider>
|
||||
<n-layout-content>
|
||||
Cool Content
|
||||
酷的内容
|
||||
</n-layout-content>
|
||||
</n-layout>
|
||||
<n-layout-footer>
|
||||
Cool Footer
|
||||
酷的页脚
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
<br>
|
||||
<n-layout>
|
||||
<n-layout-sider>
|
||||
Cool Sider
|
||||
酷的边栏
|
||||
</n-layout-sider>
|
||||
<n-layout>
|
||||
<n-layout-header>
|
||||
Cool Header
|
||||
酷的页头
|
||||
</n-layout-header>
|
||||
<n-layout-content>
|
||||
Cool Content
|
||||
酷的内容
|
||||
</n-layout-content>
|
||||
<n-layout-footer>
|
||||
Cool Footer
|
||||
酷的页脚
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
# 边框
|
||||
# 使用边框
|
||||
```html
|
||||
<n-layout>
|
||||
<n-layout-sider bordered>
|
||||
Cool Sider
|
||||
酷的边栏
|
||||
</n-layout-sider>
|
||||
<n-layout>
|
||||
<n-layout-header bordered>
|
||||
Cool Header
|
||||
酷的页头
|
||||
</n-layout-header>
|
||||
<n-layout-content>
|
||||
Cool Content
|
||||
酷的内容
|
||||
</n-layout-content>
|
||||
<n-layout-footer bordered>
|
||||
Cool Footer
|
||||
酷的页脚
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<n-switch v-model="collapsed" />
|
||||
<n-layout style="height: 240px;">
|
||||
<n-layout-header style="height: 64px;">
|
||||
Cool Header
|
||||
酷的页头
|
||||
</n-layout-header>
|
||||
<n-layout>
|
||||
<n-layout-sider
|
||||
@ -20,21 +20,21 @@
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<p>Sider Sider Sider Sider Sider Sider</p>
|
||||
<p>边栏 边栏 边栏 边栏 边栏</p>
|
||||
</n-layout-sider>
|
||||
<n-layout>
|
||||
<n-layout-content>
|
||||
<span>Content</span>
|
||||
<span>内容</span>
|
||||
</n-layout-content>
|
||||
<n-layout-footer>
|
||||
<n-h1>Footer</n-h1>
|
||||
<n-h1>页脚</n-h1>
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout style="height: 240px;">
|
||||
<n-layout-header mode="absolute" style="height: 64px;">
|
||||
Cool Header
|
||||
酷的页头
|
||||
</n-layout-header>
|
||||
<n-layout mode="absolute" style="top: 64px;">
|
||||
<n-layout-sider
|
||||
@ -47,12 +47,12 @@
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
<n-h1>边栏</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout
|
||||
mode="absolute"
|
||||
>
|
||||
<span>Content</span>
|
||||
<span>内容</span>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
# 布局
|
||||
# 布局 Layout
|
||||
布局是用来布局的。
|
||||
<!--single-column-->
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
border
|
||||
@ -8,5 +10,42 @@ scrollbar
|
||||
collapse
|
||||
trigger-button
|
||||
show-sider-content
|
||||
debug
|
||||
```
|
||||
## 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 来确保它按照你预想的方式展示|
|
||||
|
||||
### Layout Footer
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|bordered|`boolean`|`false`||
|
||||
|mode|`'default' \| 'absolute'`|`default`|`default` 模式将会把 CSS `position` 设为 `static`. `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示|
|
||||
|
||||
### Layout Header Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|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|`()`||
|
||||
@ -1,23 +1,23 @@
|
||||
# 使用内置滚动条
|
||||
有时原生滚动条与naive-ui的样式不协调。可以（在侧边栏、布局或内容）使用naive-ui内置的滚动条。
|
||||
有时原生滚动条与 naive-ui 的样式不协调。可以（在 Sider、Layout 或 Layout Content）使用 naive-ui内置的滚动条。
|
||||
```html
|
||||
<n-layout style="height: 480px;">
|
||||
<n-layout-header style="height: 64px;">
|
||||
Cool Header
|
||||
酷的页头
|
||||
</n-layout-header>
|
||||
<n-layout mode="absolute" style="top: 64px; bottom: 64px;">
|
||||
<n-layout-sider mode="absolute" :use-native-scrollbar="false">
|
||||
Cool Sider
|
||||
酷的边栏
|
||||
</n-layout-sider>
|
||||
<n-layout mode="absolute" :use-native-scrollbar="false">
|
||||
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
|
||||
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
|
||||
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
|
||||
<n-h1>Long</n-h1><n-h1>Long</n-h1><n-h1>Long</n-h1>
|
||||
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
|
||||
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
|
||||
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
|
||||
<n-h1>长</n-h1><n-h1>长</n-h1><n-h1>长</n-h1>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout-footer mode="absolute" style="height: 64px">
|
||||
Cool Footer
|
||||
酷的页脚
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
```
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
# 隐藏侧边栏内容
|
||||
有时候收起边栏后，你不想看到里面有什么。
|
||||
```html
|
||||
<n-switch v-model="collapsed" />
|
||||
<n-layout style="height: 240px;">
|
||||
<n-layout-header style="height: 64px;">
|
||||
Cool Header
|
||||
酷的页头
|
||||
</n-layout-header>
|
||||
<n-layout>
|
||||
<n-layout-sider
|
||||
@ -16,21 +17,21 @@
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
<n-h1>酷的边栏</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout>
|
||||
<n-layout-content>
|
||||
<span>Content</span>
|
||||
<span>内容</span>
|
||||
</n-layout-content>
|
||||
<n-layout-footer>
|
||||
<n-h1>Footer</n-h1>
|
||||
<n-h1>页脚</n-h1>
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout style="height: 240px;">
|
||||
<n-layout-header mode="absolute" style="height: 64px;">
|
||||
Cool Header
|
||||
酷的页头
|
||||
</n-layout-header>
|
||||
<n-layout mode="absolute" style="top: 64px;">
|
||||
<n-layout-sider
|
||||
@ -44,12 +45,12 @@
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
<n-h1>边栏</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout
|
||||
mode="absolute"
|
||||
>
|
||||
<span>Content</span>
|
||||
<span>内容</span>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
# 触发按钮
|
||||
免费附赠一个触发按钮。
|
||||
```html
|
||||
<n-switch v-model="collapsed" />
|
||||
<n-layout style="height: 240px;">
|
||||
<n-layout-header style="height: 64px;">
|
||||
Cool Header
|
||||
酷的页头
|
||||
</n-layout-header>
|
||||
<n-layout>
|
||||
<n-layout-sider
|
||||
@ -15,21 +16,21 @@
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
<n-h1>边栏</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout style="padding: 24px;">
|
||||
<n-layout-content>
|
||||
<span>Content</span>
|
||||
<span>内容</span>
|
||||
</n-layout-content>
|
||||
<n-layout-footer>
|
||||
<n-h1>Footer</n-h1>
|
||||
<n-h1>页脚</n-h1>
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout style="height: 240px;">
|
||||
<n-layout-header mode="absolute" style="height: 64px;">
|
||||
Cool Header
|
||||
酷的页头
|
||||
</n-layout-header>
|
||||
<n-layout mode="absolute" style="top: 64px;">
|
||||
<n-layout-sider
|
||||
@ -42,17 +43,17 @@
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
<n-h1>边栏</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout
|
||||
mode="absolute"
|
||||
style="padding: 24px;"
|
||||
>
|
||||
<n-layout-content>
|
||||
<span>Content</span>
|
||||
<span>内容</span>
|
||||
</n-layout-content>
|
||||
<n-layout-footer>
|
||||
<n-h1>Footer</n-h1>
|
||||
<n-h1>页脚</n-h1>
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "naive-ui",
|
||||
"version": "0.7.0",
|
||||
"version": "0.7.1",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user