mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-05 13:00:47 +08:00
docs(layout): rewrite with better look
This commit is contained in:
07akioni
parent
e32b020a95
commit
5c2183c5bb
@ -3,19 +3,36 @@
|
||||
All layout components can use absolute positioning. It can be used when you want content scrolling inside fixed area.
|
||||
|
||||
```html
|
||||
<div style="width: 100%; height: 240px; position: relative">
|
||||
<div style="height: 360px; position: relative">
|
||||
<n-layout position="absolute">
|
||||
<n-layout-header style="height: 64px;"> Cool Header </n-layout-header>
|
||||
<n-layout-header style="height: 64px; padding: 24px;" bordered
|
||||
>Yiheyuan Road</n-layout-header
|
||||
>
|
||||
<n-layout has-sider position="absolute" style="top: 64px; bottom: 64px;">
|
||||
<n-layout-sider> Cool Sider </n-layout-sider>
|
||||
<n-layout>
|
||||
<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-sider bordered content-style="padding: 24px;"
|
||||
>Handian Bridge</n-layout-sider
|
||||
>
|
||||
<n-layout content-style="padding: 24px;">
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout-footer position="absolute" style="height: 64px">
|
||||
Cool Footer
|
||||
<n-layout-footer
|
||||
bordered
|
||||
position="absolute"
|
||||
style="height: 64px; padding: 24px;"
|
||||
>
|
||||
城府路
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
</div>
|
||||
|
||||
@ -1,37 +1,61 @@
|
||||
# Basic
|
||||
|
||||
I hope the demo can meet you demand, so that you can have more time to do other things.
|
||||
|
||||
```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 has-sider>
|
||||
<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 has-sider>
|
||||
<n-layout-sider> Cool Sider </n-layout-sider>
|
||||
<n-space vertical size="large">
|
||||
<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-header>Yiheyuan Road</n-layout-header>
|
||||
<n-layout-content content-style="padding: 24px"
|
||||
>Pingshan Road</n-layout-content
|
||||
>
|
||||
<n-layout-footer>Chengfu Road</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout>
|
||||
<n-layout-header>Yiheyuan Road</n-layout-header>
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider content-style="padding: 24px"
|
||||
>Handian Bridge</n-layout-sider
|
||||
>
|
||||
<n-layout-content content-style="padding: 24px"
|
||||
>Pingshan Road</n-layout-content
|
||||
>
|
||||
</n-layout>
|
||||
<n-layout-footer>Chengfu Road</n-layout-footer>
|
||||
</n-layout>
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider content-style="padding: 24px;"
|
||||
>Handian Bridge</n-layout-sider
|
||||
>
|
||||
<n-layout>
|
||||
<n-layout-header>Yiheyuan Road</n-layout-header>
|
||||
<n-layout-content content-style="padding: 24px"
|
||||
>Pingshan Road</n-layout-content
|
||||
>
|
||||
<n-layout-footer content-style="padding: 24px"
|
||||
>Chengfu Road</n-layout-footer
|
||||
>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</n-space>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: false
|
||||
}
|
||||
}
|
||||
```css
|
||||
.n-layout-header {
|
||||
background: rgba(128, 128, 128, 0.2);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.n-layout-footer {
|
||||
background: rgba(128, 128, 128, 0.2);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.n-layout-sider {
|
||||
background: rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
|
||||
.n-layout-content {
|
||||
background: rgba(128, 128, 128, 0.4);
|
||||
}
|
||||
```
|
||||
|
||||
@ -4,11 +4,25 @@ You can set `bordered` on sider、footer、header.
|
||||
|
||||
```html
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider bordered> Cool Sider </n-layout-sider>
|
||||
<n-layout-sider bordered content-style="padding: 24px;"
|
||||
>Handian Bridge</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-header bordered>Yiheyuan Road</n-layout-header>
|
||||
<n-layout-content content-style="padding: 24px;"
|
||||
>Pingshan Road</n-layout-content
|
||||
>
|
||||
<n-layout-footer bordered>Chengfu Road</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-layout-header {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.n-layout-footer {
|
||||
padding: 24px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,62 +1,47 @@
|
||||
# Collapse Sider
|
||||
|
||||
Use `collapsed` prop to control status of sider. (Not working for `n-layout` and `n-layout-sider` with `absolute` position.)
|
||||
Use `collapsed` prop to control status of sider. (The adjacent `n-layout-sider` and `n-layout-sider` must be `static` positioned.)
|
||||
|
||||
Sider has two `collapse-mode`: `width`, `transform`. `width` will actually change width of sider, `transform` will just move sider out of layout.
|
||||
Sider has two `collapse-mode`, `width` & `transform`. `width` will actually change width of sider, `transform` will just move sider out of layout.
|
||||
|
||||
Use `collapsed-width` and `width` to set sider's width.
|
||||
|
||||
Use `show-trigger` to use builtin button.
|
||||
|
||||
```html
|
||||
<n-switch v-model:value="collapsed" />
|
||||
<n-layout style="height: 240px;">
|
||||
<n-layout-header style="height: 64px;"> Cool Header </n-layout-header>
|
||||
<n-layout position="absolute" style="top: 64px;" has-sider>
|
||||
<n-space vertical size="large">
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider
|
||||
collapse-mode="width"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
v-model:collapsed="collapsed"
|
||||
show-trigger
|
||||
show-trigger="arrow-circle"
|
||||
content-style="padding: 24px"
|
||||
bordered
|
||||
>
|
||||
Cool Sider Cool Sider Cool Sider
|
||||
<p>
|
||||
Handian Bridge Handian Bridge Handian Bridge Handian Bridge Handian
|
||||
Bridge
|
||||
</p>
|
||||
</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-content content-style="padding: 24px"
|
||||
>Pingshan Road</n-layout-content
|
||||
>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout style="height: 240px; overflow: hidden;">
|
||||
<n-layout-header position="absolute" style="height: 64px;">
|
||||
Cool Header
|
||||
</n-layout-header>
|
||||
<n-layout position="absolute" style="top: 64px;" has-sider>
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider
|
||||
collapse-mode="transform"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
v-model:collapsed="collapsed"
|
||||
show-trigger
|
||||
show-trigger="arrow-circle"
|
||||
content-style="padding: 24px"
|
||||
bordered
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
</n-layout-sider>
|
||||
<n-layout style="padding: 24px">
|
||||
<span>Content</span>
|
||||
</n-layout>
|
||||
<n-layout-content content-style="padding: 24px"
|
||||
>Pingshan Road</n-layout-content
|
||||
>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</n-space>
|
||||
```
|
||||
|
||||
@ -12,13 +12,13 @@ If you are use version before v2.3.0, you may want to know about <n-a href="#Cha
|
||||
|
||||
```demo
|
||||
basic
|
||||
set-padding
|
||||
border
|
||||
embedded
|
||||
set-padding
|
||||
absolute
|
||||
scrollbar
|
||||
collapse
|
||||
trigger-button
|
||||
inverted
|
||||
show-sider-content
|
||||
scroll-to
|
||||
```
|
||||
@ -64,7 +64,7 @@ scroll-to
|
||||
| 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 |
|
||||
| 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-content | `boolean` | `true` | If set to `false`, sider content will be invisible. |
|
||||
| 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` | |
|
||||
|
||||
136
src/layout/demos/enUS/inverted.demo.md
Normal file
136
src/layout/demos/enUS/inverted.demo.md
Normal file
@ -0,0 +1,136 @@
|
||||
# Inverted
|
||||
|
||||
Use `inverted` to add contrast. You can set the prop on header, footer and sider. Usually used with menu.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-space> <n-switch v-model:value="inverted" /> inverted </n-space>
|
||||
<n-layout>
|
||||
<n-layout-header :inverted="inverted" bordered>
|
||||
Header Header Header
|
||||
<n-menu mode="horizontal" :inverted="inverted" :options="menuOptions" />
|
||||
</n-layout-header>
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider
|
||||
bordered
|
||||
show-trigger
|
||||
collapse-mode="width"
|
||||
:collapsed-width="64"
|
||||
:width="240"
|
||||
:native-scrollbar="false"
|
||||
:inverted="inverted"
|
||||
style="max-height: 320px;"
|
||||
>
|
||||
<n-menu
|
||||
:inverted="inverted"
|
||||
:collapsed-width="64"
|
||||
:collapsed-icon-size="22"
|
||||
:options="menuOptions"
|
||||
/>
|
||||
</n-layout-sider>
|
||||
<n-layout style="max-height: 320px;" />
|
||||
</n-layout>
|
||||
<n-layout-footer :inverted="inverted" bordered>
|
||||
Footer Footer Footer
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-space>
|
||||
```
|
||||
|
||||
```js
|
||||
import { h, defineComponent, ref } from 'vue'
|
||||
import { NIcon } from 'naive-ui'
|
||||
import {
|
||||
BookOutline as BookIcon,
|
||||
PersonOutline as PersonIcon,
|
||||
WineOutline as WineIcon
|
||||
} from '@vicons/ionicons5'
|
||||
|
||||
function renderIcon (icon) {
|
||||
return () => h(NIcon, null, { default: () => h(icon) })
|
||||
}
|
||||
|
||||
const menuOptions = [
|
||||
{
|
||||
label: 'Hear the Wind Sing',
|
||||
key: 'hear-the-wind-sing',
|
||||
icon: renderIcon(BookIcon)
|
||||
},
|
||||
{
|
||||
label: 'Pinball 1973',
|
||||
key: 'pinball-1973',
|
||||
icon: renderIcon(BookIcon),
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
label: 'Rat',
|
||||
key: 'rat'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'A Wild Sheep Chase',
|
||||
key: 'a-wild-sheep-chase',
|
||||
disabled: true,
|
||||
icon: renderIcon(BookIcon)
|
||||
},
|
||||
{
|
||||
label: 'Dance Dance Dance',
|
||||
key: 'Dance Dance Dance',
|
||||
icon: renderIcon(BookIcon),
|
||||
children: [
|
||||
{
|
||||
type: 'group',
|
||||
label: 'People',
|
||||
key: 'people',
|
||||
children: [
|
||||
{
|
||||
label: 'Narrator',
|
||||
key: 'narrator',
|
||||
icon: renderIcon(PersonIcon)
|
||||
},
|
||||
{
|
||||
label: 'Sheep Man',
|
||||
key: 'sheep-man',
|
||||
icon: renderIcon(PersonIcon)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Beverage',
|
||||
key: 'beverage',
|
||||
icon: renderIcon(WineIcon),
|
||||
children: [
|
||||
{
|
||||
label: 'Whisky',
|
||||
key: 'whisky'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Food',
|
||||
key: 'food',
|
||||
children: [
|
||||
{
|
||||
label: 'Sandwich',
|
||||
key: 'sandwich'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'The past increases. The future recedes.',
|
||||
key: 'the-past-increases-the-future-recedes'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
return {
|
||||
inverted: ref(false),
|
||||
menuOptions
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
@ -1,32 +1,59 @@
|
||||
# Scroll To
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-space vertical size="large">
|
||||
<n-space>
|
||||
<n-button @click="$refs.sider.scrollTo({ top: 120, behavior: 'smooth' })">
|
||||
Sider Scroll to 120px
|
||||
Sider scroll to 120px
|
||||
</n-button>
|
||||
<n-button @click="$refs.content.scrollTo({ top: 120, behavior: 'smooth' })">
|
||||
Content Scroll to 120px
|
||||
Content scroll to 120px
|
||||
</n-button>
|
||||
</n-space>
|
||||
|
||||
<n-layout style="height: 480px;">
|
||||
<n-layout-header style="height: 64px;"> Cool Header </n-layout-header>
|
||||
<n-layout position="absolute" style="top: 64px; bottom: 64px;" has-sider>
|
||||
<n-layout-sider ref="sider">
|
||||
<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 style="height: 360px;">
|
||||
<n-layout-header style="height: 64px; padding: 24px;" bordered
|
||||
>Yiheyuan Road</n-layout-header
|
||||
>
|
||||
<n-layout has-sider position="absolute" style="top: 64px; bottom: 64px;">
|
||||
<n-layout-sider ref="sider" bordered content-style="padding: 24px;">
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
</n-layout-sider>
|
||||
<n-layout :native-scrollbar="false" ref="content">
|
||||
<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-content
|
||||
ref="content"
|
||||
content-style="padding: 24px;"
|
||||
:native-scrollbar="false"
|
||||
>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
</n-layout-content>
|
||||
</n-layout>
|
||||
<n-layout-footer position="absolute" style="height: 64px">
|
||||
Cool Footer
|
||||
<n-layout-footer
|
||||
bordered
|
||||
position="absolute"
|
||||
style="height: 64px; padding: 24px;"
|
||||
>
|
||||
Chengfu Road
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-space>
|
||||
|
||||
@ -3,22 +3,50 @@
|
||||
Sometimes you will find native scrollbar doesn't meet the style of naive-ui. You can use built-in scrollbar of naive-ui (on `n-layout-sider`, `n-layout` or `n-content`).
|
||||
|
||||
```html
|
||||
<n-layout style="height: 480px;">
|
||||
<n-layout-header style="height: 64px;"> Cool Header </n-layout-header>
|
||||
<n-layout style="height: 360px;">
|
||||
<n-layout-header style="height: 64px; padding: 24px;" bordered
|
||||
>Yiheyuan Road</n-layout-header
|
||||
>
|
||||
<n-layout position="absolute" style="top: 64px; bottom: 64px;" has-sider>
|
||||
<n-layout-sider :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-sider
|
||||
content-style="padding: 24px;"
|
||||
:native-scrollbar="false"
|
||||
bordered
|
||||
>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
</n-layout-sider>
|
||||
<n-layout :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 content-style="padding: 24px;" :native-scrollbar="false">
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
<n-h2>Pingshan Road</n-h2>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout-footer position="absolute" style="height: 64px">
|
||||
Cool Footer
|
||||
<n-layout-footer
|
||||
position="absolute"
|
||||
style="height: 64px; padding: 24px;"
|
||||
bordered
|
||||
>
|
||||
城府路
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
```
|
||||
|
||||
@ -1,34 +1,40 @@
|
||||
# Set Padding
|
||||
# About Setting Padding
|
||||
|
||||
Naive-ui doesn't recommend setting padding on `n-layout` and `n-layout-sider` directly, since sometimes nested DOM structure exists in them. A better solution is to set padding on their children.
|
||||
|
||||
If you still want to do so, please make sure you know about their DOM structure.
|
||||
|
||||
```html
|
||||
Not Recommended:
|
||||
<n-layout has-sider style="height: 240px; border: 1px solid #7773;">
|
||||
<n-layout-sider style="padding: 24px;">
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
</n-layout-sider>
|
||||
</n-layout>
|
||||
Recommended:
|
||||
<n-layout has-sider style="height: 240px; border: 1px solid #7773;">
|
||||
<n-layout-sider content-style="padding: 24px;">
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
</n-layout-sider>
|
||||
</n-layout>
|
||||
<n-space vertical size="large">
|
||||
<n-layout has-sider style="height: 240px;">
|
||||
<n-layout-sider style="padding: 24px;">
|
||||
<n-h2>... Not Recommended</n-h2>
|
||||
<n-h2>... Not Recommended</n-h2>
|
||||
<n-h2>... Not Recommended</n-h2>
|
||||
<n-h2>... Not Recommended</n-h2>
|
||||
<n-h2>... Not Recommended</n-h2>
|
||||
<n-h2>... Not Recommended</n-h2>
|
||||
<n-h2>... Not Recommended</n-h2>
|
||||
<n-h2>... Not Recommended</n-h2>
|
||||
</n-layout-sider>
|
||||
</n-layout>
|
||||
<n-layout has-sider style="height: 240px;">
|
||||
<n-layout-sider content-style="padding: 24px;">
|
||||
<n-h2>Recommended</n-h2>
|
||||
<n-h2>Recommended</n-h2>
|
||||
<n-h2>Recommended</n-h2>
|
||||
<n-h2>Recommended</n-h2>
|
||||
<n-h2>Recommended</n-h2>
|
||||
<n-h2>Recommended</n-h2>
|
||||
<n-h2>Recommended</n-h2>
|
||||
<n-h2>Recommended</n-h2>
|
||||
</n-layout-sider>
|
||||
</n-layout>
|
||||
</n-space>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-layout-sider {
|
||||
background: rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,51 +1,39 @@
|
||||
# Hide Sider Content
|
||||
|
||||
Sometimes you don't want to see content inside sider after it's collapsed.
|
||||
Sometimes you don't want to see content inside sider after it's collapsed. Set `show-collapsed-content` to `false` on sider.
|
||||
|
||||
```html
|
||||
<n-switch v-model:value="collapsed" />
|
||||
<n-layout style="height: 240px;">
|
||||
<n-layout-header style="height: 64px;"> Cool Header </n-layout-header>
|
||||
<n-layout position="absolute" style="top: 64px;" has-sider>
|
||||
<n-space vertical size="large">
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider
|
||||
collapse-mode="width"
|
||||
:show-content="!collapsed"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
v-model:collapsed="collapsed"
|
||||
show-trigger
|
||||
:show-collapsed-content="false"
|
||||
show-trigger="arrow-circle"
|
||||
content-style="padding: 24px"
|
||||
bordered
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
Handian Bridge Handian Bridge Handian Bridge Handian Bridge Handian Bridge
|
||||
</n-layout-sider>
|
||||
<n-layout style="padding: 24px;"> Content </n-layout>
|
||||
<n-layout-content content-style="padding: 24px"
|
||||
>Pingshan Road</n-layout-content
|
||||
>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout style="height: 240px; overflow: hidden;">
|
||||
<n-layout-header position="absolute" style="height: 64px;">
|
||||
Cool Header
|
||||
</n-layout-header>
|
||||
<n-layout position="absolute" style="top: 64px;" has-sider>
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider
|
||||
collapse-mode="transform"
|
||||
:show-content="!collapsed"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
v-model:collapsed="collapsed"
|
||||
show-trigger
|
||||
show-trigger="arrow-circle"
|
||||
content-style="padding: 24px"
|
||||
bordered
|
||||
>
|
||||
<n-h1>Sider Sider Sider</n-h1>
|
||||
<n-h2>Handian Bridge</n-h2>
|
||||
</n-layout-sider>
|
||||
<n-layout style="padding: 24px;"> Content </n-layout>
|
||||
<n-layout-content content-style="padding: 24px"
|
||||
>Pingshan Road</n-layout-content
|
||||
>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</n-space>
|
||||
```
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
# Trigger Button
|
||||
|
||||
A trigger button, for free.
|
||||
|
||||
```html
|
||||
<n-switch v-model:value="collapsed" />
|
||||
<n-layout style="height: 240px;">
|
||||
<n-layout-header style="height: 64px;"> Cool Header </n-layout-header>
|
||||
<n-layout position="absolute" style="top: 64px;" has-sider>
|
||||
<n-layout-sider
|
||||
collapse-mode="width"
|
||||
show-trigger
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
v-model:collapsed="collapsed"
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout style="padding: 24px;"> Content </n-layout>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout style="height: 240px; overflow: hidden;">
|
||||
<n-layout-header position="absolute" style="height: 64px;">
|
||||
Cool Header
|
||||
</n-layout-header>
|
||||
<n-layout position="absolute" style="top: 64px;" has-sider>
|
||||
<n-layout-sider
|
||||
show-trigger="arrow-circle"
|
||||
collapse-mode="transform"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
v-model:collapsed="collapsed"
|
||||
>
|
||||
<n-h1>Sider</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout position="absolute" style="padding: 24px;"> Content </n-layout>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -3,19 +3,36 @@
|
||||
所有布局组件可以使用绝对定位。如果你期望内容在固定的区域内滚动，可以使用 `absolute` 模式。
|
||||
|
||||
```html
|
||||
<div style="width: 100%; height: 240px; position: relative">
|
||||
<div style="height: 360px; position: relative">
|
||||
<n-layout position="absolute">
|
||||
<n-layout-header style="height: 64px;"> 酷的页头 </n-layout-header>
|
||||
<n-layout-header style="height: 64px; padding: 24px;" bordered
|
||||
>颐和园路</n-layout-header
|
||||
>
|
||||
<n-layout has-sider position="absolute" style="top: 64px; bottom: 64px;">
|
||||
<n-layout-sider> 酷的边栏 </n-layout-sider>
|
||||
<n-layout>
|
||||
<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-sider bordered content-style="padding: 24px;"
|
||||
>海淀桥</n-layout-sider
|
||||
>
|
||||
<n-layout content-style="padding: 24px;">
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout-footer position="absolute" style="height: 64px">
|
||||
酷的页脚
|
||||
<n-layout-footer
|
||||
bordered
|
||||
position="absolute"
|
||||
style="height: 64px; padding: 24px;"
|
||||
>
|
||||
城府路
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
</div>
|
||||
|
||||
@ -1,37 +1,49 @@
|
||||
# 基础用法
|
||||
|
||||
我希望这个 demo 就能满足你的需求，这样你的时间还能干点别的。
|
||||
|
||||
```html
|
||||
<n-layout>
|
||||
<n-layout-header> 酷的页头 </n-layout-header>
|
||||
<n-layout-content> 酷的内容 </n-layout-content>
|
||||
<n-layout-footer> 酷的页脚 </n-layout-footer>
|
||||
</n-layout>
|
||||
<br />
|
||||
<n-layout>
|
||||
<n-layout-header> 酷的页头 </n-layout-header>
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider> 酷的边栏 </n-layout-sider>
|
||||
<n-layout-content> 酷的内容 </n-layout-content>
|
||||
</n-layout>
|
||||
<n-layout-footer> 酷的页脚 </n-layout-footer>
|
||||
</n-layout>
|
||||
<br />
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider> 酷的边栏 </n-layout-sider>
|
||||
<n-space vertical size="large">
|
||||
<n-layout>
|
||||
<n-layout-header> 酷的页头 </n-layout-header>
|
||||
<n-layout-content> 酷的内容 </n-layout-content>
|
||||
<n-layout-footer> 酷的页脚 </n-layout-footer>
|
||||
<n-layout-header>颐和园路</n-layout-header>
|
||||
<n-layout-content content-style="padding: 24px">平山道</n-layout-content>
|
||||
<n-layout-footer>成府路</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout>
|
||||
<n-layout-header>颐和园路</n-layout-header>
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider content-style="padding: 24px">海淀桥</n-layout-sider>
|
||||
<n-layout-content content-style="padding: 24px">平山道</n-layout-content>
|
||||
</n-layout>
|
||||
<n-layout-footer>成府路</n-layout-footer>
|
||||
</n-layout>
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider content-style="padding: 24px;">海淀桥</n-layout-sider>
|
||||
<n-layout>
|
||||
<n-layout-header>颐和园路</n-layout-header>
|
||||
<n-layout-content content-style="padding: 24px">平山道</n-layout-content>
|
||||
<n-layout-footer content-style="padding: 24px">成府路</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</n-space>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: false
|
||||
}
|
||||
}
|
||||
```css
|
||||
.n-layout-header {
|
||||
background: rgba(128, 128, 128, 0.2);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.n-layout-footer {
|
||||
background: rgba(128, 128, 128, 0.2);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.n-layout-sider {
|
||||
background: rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
|
||||
.n-layout-content {
|
||||
background: rgba(128, 128, 128, 0.4);
|
||||
}
|
||||
```
|
||||
|
||||
@ -4,11 +4,23 @@ sider、footer、header 可以设定 `bordered`。
|
||||
|
||||
```html
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider bordered> 酷的边栏 </n-layout-sider>
|
||||
<n-layout-sider bordered content-style="padding: 24px;"
|
||||
>海淀桥</n-layout-sider
|
||||
>
|
||||
<n-layout>
|
||||
<n-layout-header bordered> 酷的页头 </n-layout-header>
|
||||
<n-layout-content> 酷的内容 </n-layout-content>
|
||||
<n-layout-footer bordered> 酷的页脚 </n-layout-footer>
|
||||
<n-layout-header bordered>颐和园路</n-layout-header>
|
||||
<n-layout-content content-style="padding: 24px;">平山道</n-layout-content>
|
||||
<n-layout-footer bordered>成府路</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-layout-header {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.n-layout-footer {
|
||||
padding: 24px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,62 +1,38 @@
|
||||
# 折叠侧边栏
|
||||
|
||||
使用 `collapsed` 属性控制侧边栏状态。（对于 `absolute` position 的 `n-layout` 和 `n-layout-sider` 不生效。）
|
||||
使用 `collapsed` 属性控制侧边栏状态。（关联的 `n-layout-sider` 和 `n-layout-content` 必须是 static position 的）。
|
||||
|
||||
侧边栏有两种 `collapse-mode`：`width` 和 `transform`。`width` 会改变侧边栏的宽度，而 `transform` 只是将侧边栏挪出布局。
|
||||
侧边栏有两种 `collapse-mode`，`width` 和 `transform`。`width` 会改变侧边栏的宽度，而 `transform` 只是将侧边栏挪出布局。
|
||||
|
||||
使用 `collapsed-width` 和 `width` 设置侧边栏的宽度。
|
||||
|
||||
```html
|
||||
<n-switch v-model:value="collapsed" />
|
||||
<n-layout style="height: 240px;">
|
||||
<n-layout-header style="height: 64px;"> 酷的页头 </n-layout-header>
|
||||
<n-layout has-sider position="absolute" style="top: 64px;">
|
||||
<n-space vertical size="large">
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider
|
||||
collapse-mode="width"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
show-trigger
|
||||
v-model:collapsed="collapsed"
|
||||
show-trigger="arrow-circle"
|
||||
content-style="padding: 24px"
|
||||
bordered
|
||||
>
|
||||
<p>边栏 边栏 边栏 边栏 边栏</p>
|
||||
<p>海淀桥 海淀桥 海淀桥 海淀桥 海淀桥</p>
|
||||
</n-layout-sider>
|
||||
<n-layout style="padding: 24px">
|
||||
<n-layout-content>
|
||||
<span>内容</span>
|
||||
</n-layout-content>
|
||||
<n-layout-footer>
|
||||
<n-h1>页脚</n-h1>
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
<n-layout-content content-style="padding: 24px">平山道</n-layout-content>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout style="height: 240px; overflow: hidden;">
|
||||
<n-layout-header position="absolute" style="height: 64px;">
|
||||
酷的页头
|
||||
</n-layout-header>
|
||||
<n-layout position="absolute" style="top: 64px;" has-sider>
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider
|
||||
collapse-mode="transform"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
show-trigger
|
||||
v-model:collapsed="collapsed"
|
||||
show-trigger="arrow-circle"
|
||||
content-style="padding: 24px"
|
||||
bordered
|
||||
>
|
||||
<n-h1>边栏</n-h1>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
</n-layout-sider>
|
||||
<n-layout style="padding: 24px">
|
||||
<span>内容</span>
|
||||
</n-layout>
|
||||
<n-layout-content content-style="padding: 24px">平山道</n-layout-content>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</n-space>
|
||||
```
|
||||
|
||||
@ -18,7 +18,6 @@ border
|
||||
absolute
|
||||
scrollbar
|
||||
collapse
|
||||
trigger-button
|
||||
inverted
|
||||
show-sider-content
|
||||
scroll-to
|
||||
@ -65,7 +64,7 @@ scroll-to
|
||||
| inverted | `boolean` | `false` | 使用反转背景色 |
|
||||
| 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-content | `boolean` | `true` | 如果设为 `false`，Sider 的内容将会变透明 |
|
||||
| show-collapsed-content | `boolean` | `true` | 是否在 sider 折叠后展示内部内容 |
|
||||
| show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | 内置的触发按钮是否展示 |
|
||||
| trigger-style | `string \| Object` | `undefined` | |
|
||||
| width | `number` | `272` | |
|
||||
|
||||
@ -28,9 +28,7 @@
|
||||
:options="menuOptions"
|
||||
/>
|
||||
</n-layout-sider>
|
||||
<n-layout style="max-height: 320px;">
|
||||
<span>内容</span>
|
||||
</n-layout>
|
||||
<n-layout style="max-height: 320px;" />
|
||||
</n-layout>
|
||||
<n-layout-footer :inverted="inverted" bordered>
|
||||
Footer Footer Footer
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 滚动到
|
||||
|
||||
```html
|
||||
<n-space vertical :size="12">
|
||||
<n-space vertical size="large">
|
||||
<n-space>
|
||||
<n-button @click="$refs.sider.scrollTo({ top: 120, behavior: 'smooth' })">
|
||||
边栏滚到 120px
|
||||
@ -10,22 +10,50 @@
|
||||
内容滚到 120px
|
||||
</n-button>
|
||||
</n-space>
|
||||
<n-layout style="height: 480px;">
|
||||
<n-layout-header style="height: 64px;"> 酷的页头 </n-layout-header>
|
||||
<n-layout position="absolute" style="top: 64px; bottom: 64px;" has-sider>
|
||||
<n-layout-sider ref="sider">
|
||||
<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 style="height: 360px;">
|
||||
<n-layout-header style="height: 64px; padding: 24px;" bordered
|
||||
>颐和园路</n-layout-header
|
||||
>
|
||||
<n-layout has-sider position="absolute" style="top: 64px; bottom: 64px;">
|
||||
<n-layout-sider ref="sider" bordered content-style="padding: 24px;">
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
</n-layout-sider>
|
||||
<n-layout :native-scrollbar="false" ref="content">
|
||||
<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-content
|
||||
ref="content"
|
||||
content-style="padding: 24px;"
|
||||
:native-scrollbar="false"
|
||||
>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
</n-layout-content>
|
||||
</n-layout>
|
||||
<n-layout-footer position="absolute" style="height: 64px">
|
||||
酷的页脚
|
||||
<n-layout-footer
|
||||
bordered
|
||||
position="absolute"
|
||||
style="height: 64px; padding: 24px;"
|
||||
>
|
||||
成府路
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
</n-space>
|
||||
|
||||
@ -3,22 +3,50 @@
|
||||
有时原生滚动条与 naive-ui 的样式不协调。可以（在 `n-layout-sider`、`n-layout` 或 `n-layout-content`）使用 naive-ui 内置的滚动条。
|
||||
|
||||
```html
|
||||
<n-layout style="height: 480px;">
|
||||
<n-layout-header style="height: 64px;"> 酷的页头 </n-layout-header>
|
||||
<n-layout style="height: 360px;">
|
||||
<n-layout-header style="height: 64px; padding: 24px;" bordered
|
||||
>颐和园路</n-layout-header
|
||||
>
|
||||
<n-layout position="absolute" style="top: 64px; bottom: 64px;" has-sider>
|
||||
<n-layout-sider :native-scrollbar="false">
|
||||
<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-sider
|
||||
content-style="padding: 24px;"
|
||||
:native-scrollbar="false"
|
||||
bordered
|
||||
>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
</n-layout-sider>
|
||||
<n-layout :native-scrollbar="false">
|
||||
<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 content-style="padding: 24px;" :native-scrollbar="false">
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
<n-h2>平山道</n-h2>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout-footer position="absolute" style="height: 64px">
|
||||
酷的页脚
|
||||
<n-layout-footer
|
||||
position="absolute"
|
||||
style="height: 64px; padding: 24px;"
|
||||
bordered
|
||||
>
|
||||
城府路
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
```
|
||||
|
||||
@ -1,32 +1,38 @@
|
||||
# 设定 Padding
|
||||
# 关于设定 Padding
|
||||
|
||||
naive-ui 不推荐直接在 `n-layout-sider` 和 `n-layout` 上设定 padding。因为他们存在嵌套的 DOM 结构，你可以使用 `content-style` 来设定可滚动内容的样式。
|
||||
|
||||
```html
|
||||
不推荐：
|
||||
<n-layout has-sider style="height: 240px; border: 1px solid #7773;">
|
||||
<n-layout-sider style="padding: 24px;">
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
</n-layout-sider>
|
||||
</n-layout>
|
||||
推荐：
|
||||
<n-layout has-sider style="height: 240px; border: 1px solid #7773;">
|
||||
<n-layout-sider content-style="padding: 24px;">
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
<n-h1>Content</n-h1>
|
||||
</n-layout-sider>
|
||||
</n-layout>
|
||||
<n-space vertical size="large">
|
||||
<n-layout has-sider style="height: 240px;">
|
||||
<n-layout-sider style="padding: 24px;">
|
||||
<n-h2>... 不推荐</n-h2>
|
||||
<n-h2>... 不推荐</n-h2>
|
||||
<n-h2>... 不推荐</n-h2>
|
||||
<n-h2>... 不推荐</n-h2>
|
||||
<n-h2>... 不推荐</n-h2>
|
||||
<n-h2>... 不推荐</n-h2>
|
||||
<n-h2>... 不推荐</n-h2>
|
||||
<n-h2>... 不推荐</n-h2>
|
||||
</n-layout-sider>
|
||||
</n-layout>
|
||||
<n-layout has-sider style="height: 240px;">
|
||||
<n-layout-sider content-style="padding: 24px;">
|
||||
<n-h2>推荐</n-h2>
|
||||
<n-h2>推荐</n-h2>
|
||||
<n-h2>推荐</n-h2>
|
||||
<n-h2>推荐</n-h2>
|
||||
<n-h2>推荐</n-h2>
|
||||
<n-h2>推荐</n-h2>
|
||||
<n-h2>推荐</n-h2>
|
||||
<n-h2>推荐</n-h2>
|
||||
</n-layout-sider>
|
||||
</n-layout>
|
||||
</n-space>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-layout-sider {
|
||||
background: rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,51 +1,35 @@
|
||||
# 隐藏侧边栏内容
|
||||
|
||||
有时候收起边栏后，你不想看到里面有什么。
|
||||
有时候收起边栏后，你不想看到里面有什么，你可以设定 `show-collapsed-content` 为 `false`。
|
||||
|
||||
```html
|
||||
<n-switch v-model:value="collapsed" />
|
||||
<n-layout style="height: 240px;">
|
||||
<n-layout-header style="height: 64px;"> 酷的页头 </n-layout-header>
|
||||
<n-layout position="absolute" style="top: 64px;" has-sider>
|
||||
<n-space vertical size="large">
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider
|
||||
collapse-mode="width"
|
||||
:show-content="!collapsed"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
v-model:collapsed="collapsed"
|
||||
show-trigger
|
||||
:show-collapsed-content="false"
|
||||
show-trigger="arrow-circle"
|
||||
content-style="padding: 24px;"
|
||||
bordered
|
||||
>
|
||||
<n-h1>酷的边栏</n-h1>
|
||||
海淀桥 海淀桥 海淀桥 海淀桥 海淀桥
|
||||
</n-layout-sider>
|
||||
<n-layout style="padding: 24px;"> 内容 </n-layout>
|
||||
<n-layout-content content-style="padding: 24px">平山道</n-layout-content>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout style="height: 240px; overflow: hidden;">
|
||||
<n-layout-header position="absolute" style="height: 64px;">
|
||||
酷的页头
|
||||
</n-layout-header>
|
||||
<n-layout position="absolute" style="top: 64px;" has-sider>
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider
|
||||
collapse-mode="transform"
|
||||
:show-content="!collapsed"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
v-model:collapsed="collapsed"
|
||||
show-trigger
|
||||
show-trigger="arrow-circle"
|
||||
content-style="padding: 24px;"
|
||||
bordered
|
||||
>
|
||||
<n-h1>边栏 边栏 边栏</n-h1>
|
||||
<n-h2>海淀桥</n-h2>
|
||||
</n-layout-sider>
|
||||
<n-layout style="padding: 24px;"> 内容 </n-layout>
|
||||
<n-layout-content content-style="padding: 24px">平山道</n-layout-content>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</n-space>
|
||||
```
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
# 触发按钮
|
||||
|
||||
免费附赠一个触发按钮。
|
||||
|
||||
```html
|
||||
<n-switch v-model:value="collapsed" />
|
||||
<n-layout style="height: 240px;">
|
||||
<n-layout-header style="height: 64px;"> 酷的页头 </n-layout-header>
|
||||
<n-layout position="absolute" style="top: 64px;" has-sider>
|
||||
<n-layout-sider
|
||||
collapse-mode="width"
|
||||
show-trigger
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
v-model:collapsed="collapsed"
|
||||
>
|
||||
<n-h1>边栏</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout style="padding: 24px;"> 内容 </n-layout>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
<n-layout style="height: 240px; overflow: hidden;">
|
||||
<n-layout-header position="absolute" style="height: 64px;">
|
||||
酷的页头
|
||||
</n-layout-header>
|
||||
<n-layout position="absolute" style="top: 64px;" has-sider>
|
||||
<n-layout-sider
|
||||
show-trigger="arrow-circle"
|
||||
collapse-mode="transform"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
v-model:collapsed="collapsed"
|
||||
>
|
||||
<n-h1>边栏</n-h1>
|
||||
</n-layout-sider>
|
||||
<n-layout style="padding: 24px;"> 内容 </n-layout>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
collapsed: false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,10 +1,10 @@
|
||||
# Inverted
|
||||
|
||||
Set `inverted` to add contrast.
|
||||
Set `inverted` to add contrast. Usually used with `n-layout`.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-space> <n-switch v-model:value="inverted" /> inverted </n-space>
|
||||
<n-space><n-switch v-model:value="inverted" />inverted</n-space>
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider
|
||||
bordered
|
||||
@ -19,7 +19,6 @@ Set `inverted` to add contrast.
|
||||
:collapsed-width="64"
|
||||
:collapsed-icon-size="22"
|
||||
:options="menuOptions"
|
||||
v-model:value="activeKey"
|
||||
/>
|
||||
</n-layout-sider>
|
||||
<n-layout>
|
||||
|
||||
@ -16,12 +16,18 @@ export default defineComponent({
|
||||
options: [
|
||||
{
|
||||
label: () =>
|
||||
h(NEllipsis, null, { default: () => '电灯熄灭 物换星移 泥牛入海' }),
|
||||
h(NEllipsis, null, {
|
||||
default: () =>
|
||||
'The lights are extinguished. Matter is transformed and the heavens have shifted. Clay figures vanish into the sea.'
|
||||
}),
|
||||
key: '1'
|
||||
},
|
||||
{
|
||||
label: () =>
|
||||
h(NEllipsis, null, { default: () => '黑暗好像 一颗巨石 按在胸口' }),
|
||||
h(NEllipsis, null, {
|
||||
default: () =>
|
||||
'The darkness is like a boulder pressing down upon the breast.'
|
||||
}),
|
||||
key: '2'
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
# 反转
|
||||
|
||||
通过 `inverted` 来增加对比。
|
||||
通过 `inverted` 来增加对比，一般和 `n-layout` 配合使用。
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-space> <n-switch v-model:value="inverted" /> inverted </n-space>
|
||||
<n-space> <n-switch v-model:value="inverted" />inverted</n-space>
|
||||
<n-layout has-sider>
|
||||
<n-layout-sider
|
||||
bordered
|
||||
|
||||
Loading…
Reference in New Issue
Block a user