mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-17 13:20:52 +08:00
layout-zhcn
This commit is contained in:
liumeo
07akioni
parent
3790ca6ab2
commit
b6671722e5
@ -1,5 +1,5 @@
|
||||
# Use Built-in Scrollbar
|
||||
Sometimes you will find native scrollbar doesn't meet the style of naive-ui. You can use build-in scrollbar of naive-ui (on sider, layout or content).
|
||||
Sometimes you will find native scrollbar doesn't meet the style of naive-ui. You can use built-in scrollbar of naive-ui (on sider, layout or content).
|
||||
```html
|
||||
<n-layout style="height: 480px;">
|
||||
<n-layout-header style="height: 64px;">
|
||||
@ -20,4 +20,4 @@ Sometimes you will find native scrollbar doesn't meet the style of naive-ui. You
|
||||
Cool Footer
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
```
|
||||
```
|
||||
|
||||
27
demo/documentation/components/layout/zhCN/absolute.md
Normal file
27
demo/documentation/components/layout/zhCN/absolute.md
Normal file
@ -0,0 +1,27 @@
|
||||
# 绝对
|
||||
所有布局组件可以使用绝对定位。可用于让内容在盒内滚动。
|
||||
|
||||
<n-alert title="警告" type="warning">为保证侧边栏及其相邻布局正确显示，它们均需设置mode="absolute"。</n-alert>
|
||||
```html
|
||||
<div style="width: 100%; height: 240px; position: relative">
|
||||
<n-layout mode="absolute">
|
||||
<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">
|
||||
Cool Sider
|
||||
</n-layout-sider>
|
||||
<n-layout mode="absolute">
|
||||
<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-layout>
|
||||
</n-layout>
|
||||
<n-layout-footer mode="absolute" style="height: 64px">
|
||||
Cool Footer
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
</div>
|
||||
```
|
||||
57
demo/documentation/components/layout/zhCN/basic.md
Normal file
57
demo/documentation/components/layout/zhCN/basic.md
Normal file
@ -0,0 +1,57 @@
|
||||
# 基础
|
||||
```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>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
19
demo/documentation/components/layout/zhCN/border.md
Normal file
19
demo/documentation/components/layout/zhCN/border.md
Normal file
@ -0,0 +1,19 @@
|
||||
# 边框
|
||||
```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>
|
||||
```
|
||||
68
demo/documentation/components/layout/zhCN/collapse.md
Normal file
68
demo/documentation/components/layout/zhCN/collapse.md
Normal file
@ -0,0 +1,68 @@
|
||||
# 折叠侧边栏
|
||||
使用 `collapsed` 属性控制侧边栏状态。
|
||||
|
||||
侧边栏有两种 `collapse-mode`：`width`、`transform`。`width` 会改变侧边栏的宽度，而 `transform` 只是将侧边栏移除布局。
|
||||
|
||||
使用 `collapsed-width` 和 `width` 设置侧边栏的宽度。
|
||||
```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
|
||||
collapse-mode="width"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
:collapsed="collapsed"
|
||||
show-toggle-button
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<p>Sider Sider Sider Sider Sider Sider</p>
|
||||
</n-layout-sider>
|
||||
<n-layout>
|
||||
<n-layout-content>
|
||||
<span>Content</span>
|
||||
</n-layout-content>
|
||||
<n-layout-footer>
|
||||
<n-h1>Footer</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
|
||||
mode="absolute"
|
||||
collapse-mode="transform"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
:collapsed="collapsed"
|
||||
show-toggle-button
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout
|
||||
mode="absolute"
|
||||
>
|
||||
<span>Content</span>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
37
demo/documentation/components/layout/zhCN/debug.md
Normal file
37
demo/documentation/components/layout/zhCN/debug.md
Normal file
@ -0,0 +1,37 @@
|
||||
# Debug
|
||||
```html
|
||||
<n-switch v-model="collapsed" />
|
||||
<n-layout style="height: 480px;">
|
||||
<n-layout-header mode="absolute" style="height: 64px;">
|
||||
Cool Header
|
||||
</n-layout-header>
|
||||
<n-layout mode="absolute" style="top: 64px;">
|
||||
<n-layout-sider
|
||||
mode="absolute"
|
||||
:collapsed="collapsed"
|
||||
show-toggle-button
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout mode="absolute" :use-native-scrollbar="false">
|
||||
<n-layout-content>
|
||||
<span>Content</span>
|
||||
</n-layout-content>
|
||||
<n-layout-footer>
|
||||
<n-h1>Footer</n-h1>
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,12 @@
|
||||
# 布局
|
||||
<!--single-column-->
|
||||
```demo
|
||||
basic
|
||||
border
|
||||
absolute
|
||||
scrollbar
|
||||
collapse
|
||||
trigger-button
|
||||
show-sider-content
|
||||
debug
|
||||
```
|
||||
23
demo/documentation/components/layout/zhCN/scrollbar.md
Normal file
23
demo/documentation/components/layout/zhCN/scrollbar.md
Normal file
@ -0,0 +1,23 @@
|
||||
# 使用内置滚动条
|
||||
有时原生滚动条与naive-ui的样式不协调。可以（在侧边栏、布局或内容）使用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-layout>
|
||||
</n-layout>
|
||||
<n-layout-footer mode="absolute" style="height: 64px">
|
||||
Cool Footer
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
```
|
||||
@ -0,0 +1,65 @@
|
||||
# 隐藏侧边栏内容
|
||||
```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
|
||||
collapse-mode="width"
|
||||
:show-content="!collapsed"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
:collapsed="collapsed"
|
||||
show-toggle-button
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout>
|
||||
<n-layout-content>
|
||||
<span>Content</span>
|
||||
</n-layout-content>
|
||||
<n-layout-footer>
|
||||
<n-h1>Footer</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
|
||||
mode="absolute"
|
||||
collapse-mode="transform"
|
||||
:show-content="!collapsed"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
:collapsed="collapsed"
|
||||
show-toggle-button
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout
|
||||
mode="absolute"
|
||||
>
|
||||
<span>Content</span>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
69
demo/documentation/components/layout/zhCN/triggerButton.md
Normal file
69
demo/documentation/components/layout/zhCN/triggerButton.md
Normal file
@ -0,0 +1,69 @@
|
||||
# 触发按钮
|
||||
```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
|
||||
collapse-mode="width"
|
||||
show-trigger
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
:collapsed="collapsed"
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout style="padding: 24px;">
|
||||
<n-layout-content>
|
||||
<span>Content</span>
|
||||
</n-layout-content>
|
||||
<n-layout-footer>
|
||||
<n-h1>Footer</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
|
||||
mode="absolute"
|
||||
show-trigger
|
||||
collapse-mode="transform"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
:collapsed="collapsed"
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout
|
||||
mode="absolute"
|
||||
style="padding: 24px;"
|
||||
>
|
||||
<n-layout-content>
|
||||
<span>Content</span>
|
||||
</n-layout-content>
|
||||
<n-layout-footer>
|
||||
<n-h1>Footer</n-h1>
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user