mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-06 12:17:13 +08:00
docs(drawer): add drawer docs (#450)
* docs: add drawer docs * Update src/drawer/demos/zhCN/index.demo-entry.md Co-authored-by: yugang.cao <yugang.cao@tusimple.ai> Co-authored-by: 07akioni <07akioni2@gmail.com>
This commit is contained in:
caoyugang_1
GitHub
parent
d76cabb8c3
commit
9ef3755491
@ -15,18 +15,21 @@
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
active: false,
|
||||
placement: 'right'
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
const active = ref(false)
|
||||
const placement = ref('right')
|
||||
const activate = (place) => {
|
||||
active.value = true
|
||||
placement.value = place
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
activate (placement) {
|
||||
this.active = true
|
||||
this.placement = placement
|
||||
return {
|
||||
active,
|
||||
placement,
|
||||
activate
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
@ -19,39 +19,39 @@ closable
|
||||
| --- | --- | --- | --- |
|
||||
| content-style | `string \| Object` | `undefined` | Style of drawer's scrollable content node. |
|
||||
| height | `number \| string` | `251` | Works when placement is `top` and `bottom`. |
|
||||
| native-scrollbar | `boolean` | `true` | |
|
||||
| native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on drawer. |
|
||||
| mask-closable | `boolean` | `true` | Whether to emit `hide` event when click mask. |
|
||||
| placement | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | |
|
||||
| show | `boolean` | `false` | |
|
||||
| placement | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Drawer placement. |
|
||||
| show | `boolean` | `false` | Whether to show drawer. |
|
||||
| style | `string \| Object` | `undefined` | Style of the drawer. |
|
||||
| to | `string \| HTMLElement` | `'body'` | Container node of the drawer. |
|
||||
| width | `number \| string` | `251` | |
|
||||
| on-update:show | `(show: boolean) => void` | `undefined` | |
|
||||
| width | `number \| string` | `251` | Works when placement is `left` and `right`. |
|
||||
| on-update:show | `(show: boolean) => void` | `undefined` | The callback triggered when the drawer display status changes. |
|
||||
|
||||
### DrawerContent Props
|
||||
|
||||
| Name | Parameters | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| body-style | `string \| Object` | `undefined` | |
|
||||
| body-style | `string \| Object` | `undefined` | Drawer content's body style. |
|
||||
| body-content-style | `string \| Object` | `undefined` | Style of body's scrollable content node. |
|
||||
| closable | `boolean` | `false` | Whether the drawer content is closable. |
|
||||
| footer-style | `string \| Object` | `undefined` | |
|
||||
| header-style | `string \| Object` | `undefined` | |
|
||||
| footer-style | `string \| Object` | `undefined` | Drawer content's footer style. |
|
||||
| header-style | `string \| Object` | `undefined` | Drawer content's header style. |
|
||||
| native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on body part. |
|
||||
| title | `string` | `undefined` | |
|
||||
| title | `string` | `undefined` | Drawer content title. |
|
||||
|
||||
## Slots
|
||||
|
||||
### Drawer Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | -------------------------- |
|
||||
| default | `()` | The content of the drawer. |
|
||||
|
||||
### DrawerContent Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| header | `()` | |
|
||||
| footer | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ---------------------------------- |
|
||||
| default | `()` | The content of the drawer content. |
|
||||
| footer | `()` | The footer of the drawer content. |
|
||||
| header | `()` | The header of the drawer content. |
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
<n-button @click="activate('left')">Left</n-button>
|
||||
</n-button-group>
|
||||
<div
|
||||
ref="target"
|
||||
id="drawer-target"
|
||||
style="
|
||||
position:relative;
|
||||
@ -38,21 +37,21 @@
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
active: false,
|
||||
placement: 'right'
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
const active = ref(false)
|
||||
const placement = ref('right')
|
||||
const activate = (place) => {
|
||||
active.value = true
|
||||
placement.value = place
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
activate (placement) {
|
||||
this.active = true
|
||||
this.placement = placement
|
||||
},
|
||||
target () {
|
||||
return this.$refs.target
|
||||
return {
|
||||
active,
|
||||
placement,
|
||||
activate
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
@ -15,18 +15,21 @@
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
active: false,
|
||||
placement: 'right'
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
const active = ref(false)
|
||||
const placement = ref('right')
|
||||
const activate = (place) => {
|
||||
active.value = true
|
||||
placement.value = place
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
activate (placement) {
|
||||
this.active = true
|
||||
this.placement = placement
|
||||
return {
|
||||
active,
|
||||
placement,
|
||||
activate
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
@ -23,40 +23,40 @@ dark-4-debug
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| content-style | `string \| Object` | `undefined` | 抽屉可滚动内容节点的样式 |
|
||||
| height | `number \| string` | `251` | 在位置是 `top` 和 `bottom` 时生效 |
|
||||
| height | `number \| string` | `251` | 抽屉的高度，在位置是 `top` 和 `bottom` 时生效 |
|
||||
| mask-closable | `boolean` | `true` | 点击遮罩时是否发出 `update:show` 事件 |
|
||||
| native-scrollbar | `boolean` | `true` | |
|
||||
| placement | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | |
|
||||
| show | `boolean` | `false` | |
|
||||
| native-scrollbar | `boolean` | `true` | 是否使用原生滚动 |
|
||||
| placement | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | 抽屉展示的位置 |
|
||||
| show | `boolean` | `false` | 是否展示抽屉 |
|
||||
| style | `string \| Object` | `undefined` | 抽屉的样式 |
|
||||
| to | `string \| HTMLElement` | `'body'` | 抽屉出现的区域 |
|
||||
| width | `number \| string` | `251` | |
|
||||
| on-update:show | `(show: boolean) => void` | `undefined` | |
|
||||
| width | `number \| string` | `251` | 抽屉的宽度，在位置是 `left` 和 `right` 时生效 |
|
||||
| on-update:show | `(show: boolean) => void` | `undefined` | 抽屉显示状态改变时执行的回调函数 |
|
||||
|
||||
### DrawerContent Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| body-style | `string \| Object` | `undefined` | 主体的样式 |
|
||||
| body-style | `string \| Object` | `undefined` | 主体 body 的样式 |
|
||||
| body-content-style | `string \| Object` | `undefined` | 主体可滚动内容节点的样式 |
|
||||
| closable | `boolean` | `false` | 是否可关闭 |
|
||||
| footer-style | `string \| Object` | `undefined` | |
|
||||
| header-style | `string \| Object` | `undefined` | |
|
||||
| footer-style | `string \| Object` | `undefined` | 主体 footer 的样式 |
|
||||
| header-style | `string \| Object` | `undefined` | 主体 header 的样式 |
|
||||
| native-scrollbar | `boolean` | `true` | 主体部分是否使用原生滚动条 |
|
||||
| title | `string` | `undefined` | |
|
||||
| title | `string` | `undefined` | 主体的标题 |
|
||||
|
||||
## Slots
|
||||
|
||||
### Drawer Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---------- |
|
||||
| default | `()` | 抽屉的内容 |
|
||||
|
||||
### DrawerContent Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| header | `()` | |
|
||||
| footer | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ------------------------ |
|
||||
| default | `()` | 抽屉主体的内容 |
|
||||
| footer | `()` | 抽屉主体 footer 的内容 |
|
||||
| header | `()` | 抽屉主体 header 的内容 |
|
||||
|
||||
@ -37,18 +37,21 @@
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
active: false,
|
||||
placement: 'right'
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
const active = ref(false)
|
||||
const placement = ref('right')
|
||||
const activate = (place) => {
|
||||
active.value = true
|
||||
placement.value = place
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
activate (placement) {
|
||||
this.active = true
|
||||
this.placement = placement
|
||||
return {
|
||||
active,
|
||||
placement,
|
||||
activate
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user