mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
doc(layout)
This commit is contained in:
07akioni
parent
fc1ceaab13
commit
73a105d817
@ -1,7 +1,7 @@
|
||||
# Absolute
|
||||
All layout components can use absolute positioning. It can be used when you want content scrolling inside a box.
|
||||
|
||||
<n-alert title="Caveat" type="warning">If you want to sider and its nearby layout display in right manner, you should apply mode="absolute" on both of them.</n-alert>
|
||||
<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>
|
||||
```html
|
||||
<div style="width: 100%; height: 240px; position: relative">
|
||||
<n-layout mode="absolute">
|
||||
|
||||
@ -20,66 +20,7 @@ Use `collapsed-width` and `width` to set sider's width.
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
>
|
||||
<n-menu
|
||||
:collapsed="collapsed"
|
||||
:collapsed-width="48"
|
||||
:collapsed-icon-size="24"
|
||||
v-model="activeMenuItemName"
|
||||
>
|
||||
<n-menu-item title="1800" name="1800">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<md-contacts />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="1900" name="1900">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<md-contacts />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-menu-item title="2000" name="2000">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<md-contacts />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-menu-item>
|
||||
<n-submenu title="2001" name="2001">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<md-contacts />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-menu-item title="2002" name="2002"></n-menu-item>
|
||||
</n-submenu>
|
||||
<n-submenu title="2003" name="2003">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<md-contacts />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-submenu title="2004" name="2004">
|
||||
<n-menu-item title="2005" name="2005"></n-menu-item>
|
||||
</n-submenu>
|
||||
</n-submenu>
|
||||
<n-submenu title="2006" name="2006">
|
||||
<template v-slot:icon>
|
||||
<n-icon>
|
||||
<md-contacts />
|
||||
</n-icon>
|
||||
</template>
|
||||
<n-submenu title="2007" name="2007">
|
||||
<n-submenu title="2008" name="2008">
|
||||
<n-menu-item title="2009" name="2009"></n-menu-item>
|
||||
<n-menu-item title="2010" name="2010"></n-menu-item>
|
||||
</n-submenu>
|
||||
<n-menu-item title="2011" name="2011"></n-menu-item>
|
||||
</n-submenu>
|
||||
</n-submenu>
|
||||
</n-menu>
|
||||
Cool Sider
|
||||
</n-layout-sider>
|
||||
<n-layout>
|
||||
<n-layout-content>
|
||||
@ -99,7 +40,7 @@ Use `collapsed-width` and `width` to set sider's width.
|
||||
<n-layout-sider
|
||||
mode="absolute"
|
||||
collapse-mode="transform"
|
||||
:collapsed-width="120"
|
||||
:collapsed-width="48"
|
||||
:width="240"
|
||||
:collapsed="collapsed"
|
||||
show-toggle-button
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
# Layout
|
||||
<!--single-column-->
|
||||
Layout is for layout.
|
||||
## Demos
|
||||
```demo
|
||||
basic
|
||||
border
|
||||
@ -9,4 +11,42 @@ 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.|
|
||||
|
||||
### 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.|
|
||||
|
||||
### 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.|
|
||||
|
||||
### 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'`.**|
|
||||
|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.|
|
||||
|collapsed|`boolean`|`false`||
|
||||
|use-native-scrollbar|`boolean`|`true`|If set to `false`, layout 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.|
|
||||
|
||||
## Events
|
||||
### Layout Sider Events
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|expand|`()`||
|
||||
|collapse|`()`||
|
||||
@ -1,4 +1,6 @@
|
||||
# Menu
|
||||
<!--single-column-->
|
||||
## Demos
|
||||
```demo
|
||||
basic
|
||||
items
|
||||
|
||||
@ -36,14 +36,13 @@ import layoutModeMixin from './layoutModeMixin'
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import ToggleButton from './ToggleButton'
|
||||
import asthemecontext from '../../../mixins/asthemecontext'
|
||||
|
||||
export default {
|
||||
name: 'NLayoutSider',
|
||||
components: {
|
||||
ToggleButton
|
||||
},
|
||||
mixins: [ withapp, themeable, asthemecontext, layoutModeMixin ],
|
||||
mixins: [ withapp, themeable, layoutModeMixin ],
|
||||
props: {
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
@ -58,7 +57,9 @@ export default {
|
||||
default: 272
|
||||
},
|
||||
collapseMode: {
|
||||
type: String,
|
||||
validator (value) {
|
||||
return ['width', 'transform'].includes(value)
|
||||
},
|
||||
default: 'transform'
|
||||
},
|
||||
collapsed: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user