mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-03 03:38:41 +08:00
docs(drawer): add drawer props desc (#2855)
* docs(drawer): add drawer props desc * docs: add i18n drawer docs * docs(drawer): add new line.
This commit is contained in:
Otto
GitHub
parent
97a881c147
commit
c883e6c192
@ -59,7 +59,7 @@ Callout a temporary drawer, from multiple direction
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
||||
|
||||
const drawer = ref(false);
|
||||
const direction = ref('rtl');
|
||||
const handleClose = (done) => {
|
||||
@ -243,12 +243,12 @@ export default {
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import {defineComponent, reactive, toRefs } from 'vue';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import {defineComponent, reactive, toRefs } from 'vue';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
||||
|
||||
const state = reactive({
|
||||
table: false,
|
||||
dialog: false,
|
||||
@ -381,7 +381,7 @@ You can also have multiple layer of `Drawer` just like `Dialog`.
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
||||
|
||||
const drawer = ref(false);
|
||||
const innerDrawer = ref(false);
|
||||
const handleClose = (done) => {
|
||||
@ -426,8 +426,12 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | Should Drawer be displayed | boolean | — | false |
|
||||
| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true**| boolean | — | false |
|
||||
| lock-scroll | whether scroll of body is disabled while Drawer is displayed | boolean | — | true |
|
||||
| before-close | If set, closing procedure will be halted | function(done) (done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure) | — | — |
|
||||
| close-on-click-modal | whether the Drawer can be closed by clicking the mask | boolean | — | true |
|
||||
| close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |
|
||||
| open-delay | Time(milliseconds) before open | number | — | 0 |
|
||||
| close-delay | Time(milliseconds) before close | number | — | 0 |
|
||||
| custom-class | Extra class names for Drawer | string | — | — |
|
||||
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
|
||||
| modal | Should show shadowing layer | boolean | — | true |
|
||||
@ -437,6 +441,7 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
|
||||
| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
|
||||
| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
|
||||
| modal-class | Extra class names for shadowing layer | string | - | - |
|
||||
| z-index | set z-index | number | - | - |
|
||||
|
||||
### Drawer Slots
|
||||
|
||||
|
||||
@ -60,7 +60,7 @@ Llamada de un drawer temporal, desde varias direcciones
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
||||
|
||||
const drawer = ref(false);
|
||||
const direction = ref('rtl');
|
||||
const handleClose = (done) => {
|
||||
@ -244,12 +244,12 @@ export default {
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import {defineComponent, reactive, toRefs } from 'vue';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import {defineComponent, reactive, toRefs } from 'vue';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
||||
|
||||
const state = reactive({
|
||||
table: false,
|
||||
dialog: false,
|
||||
@ -382,7 +382,7 @@ También puede tener varias capas de `Drawer` al igual que con `Dialog`.
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
||||
|
||||
const drawer = ref(false);
|
||||
const innerDrawer = ref(false);
|
||||
const handleClose = (done) => {
|
||||
@ -426,8 +426,12 @@ El Drawer proporciona una API llamada "destroyOnClose", que es una variable de b
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | Si se muestra el Drawer | boolean | — | false |
|
||||
| append-to-body | Los controles deberían insertar Drawer en el elemento DocumentBody, los Drawer anidados deben asignar este parámetro a **true** | boolean | — | false |
|
||||
| lock-scroll | whether scroll of body is disabled while Drawer is displayed | boolean | — | true |
|
||||
| before-close | Si está configurado, el procedimiento de cierre se detendrá. | function(done), done es un tipo de función que acepta un booleano como parámetro, una llamada hecha con true o sin parámetro abortará el procedimiento de cierre. | — | — |
|
||||
| close-on-click-modal | whether the Drawer can be closed by clicking the mask | boolean | — | true |
|
||||
| close-on-press-escape | Indica si el Drawer puede cerrarse pulsando ESC | boolean | — | true |
|
||||
| open-delay | Time(milliseconds) before open | number | — | 0 |
|
||||
| close-delay | Time(milliseconds) before close | number | — | 0 |
|
||||
| custom-class | Nombre extra de clase para Drawer | string | — | — |
|
||||
| destroy-on-close | Indica si los children deben ser destruidos después de cerrar el Drawer. | boolean | - | false |
|
||||
| modal | Mostrará una capa de sombra | boolean | — | true |
|
||||
@ -437,6 +441,8 @@ El Drawer proporciona una API llamada "destroyOnClose", que es una variable de b
|
||||
| title | El título del Drawer, también se puede establecer por slot con nombre, las descripciones detalladas se pueden encontrar en el formulario de slot. | string | — | — |
|
||||
| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
|
||||
| modal-class | Nombre extra de clase para capa de sombra | string | - | - |
|
||||
| z-index | set z-index | number | - | - |
|
||||
|
||||
|
||||
### Drawer Slot's
|
||||
|
||||
|
||||
@ -59,7 +59,7 @@ Callout a temporary drawer, from multiple direction
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
||||
|
||||
const drawer = ref(false);
|
||||
const direction = ref('rtl');
|
||||
const handleClose = (done) => {
|
||||
@ -243,12 +243,12 @@ export default {
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import {defineComponent, reactive, toRefs } from 'vue';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import {defineComponent, reactive, toRefs } from 'vue';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
||||
|
||||
const state = reactive({
|
||||
table: false,
|
||||
dialog: false,
|
||||
@ -381,7 +381,7 @@ You can also have multiple layer of `Drawer` just like `Dialog`.
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
||||
|
||||
const drawer = ref(false);
|
||||
const innerDrawer = ref(false);
|
||||
const handleClose = (done) => {
|
||||
@ -425,8 +425,12 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | Should Drawer be displayed | boolean | — | false |
|
||||
| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true**| boolean | — | false |
|
||||
| lock-scroll | whether scroll of body is disabled while Drawer is displayed | boolean | — | true |
|
||||
| before-close | If set, closing procedure will be halted | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |
|
||||
| close-on-click-modal | whether the Drawer can be closed by clicking the mask | boolean | — | true |
|
||||
| close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |
|
||||
| open-delay | Time(milliseconds) before open | number | — | 0 |
|
||||
| close-delay | Time(milliseconds) before close | number | — | 0 |
|
||||
| custom-class | Extra class names for Drawer | string | — | — |
|
||||
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
|
||||
| modal | Should show shadowing layer | boolean | — | true |
|
||||
@ -436,6 +440,7 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
|
||||
| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
|
||||
| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
|
||||
| modal-class | Extra class names for shadowing layer | string | - | -
|
||||
| z-index | set z-index | number | - | - |
|
||||
|
||||
### Drawer Slot
|
||||
|
||||
|
||||
@ -60,7 +60,7 @@ Since v-model is natively supported for all components, `visible.sync` has been
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
||||
|
||||
const drawer = ref(false);
|
||||
const direction = ref('rtl');
|
||||
const handleClose = (done) => {
|
||||
@ -244,12 +244,12 @@ export default {
|
||||
<!--
|
||||
<setup>
|
||||
|
||||
import {defineComponent, reactive, toRefs } from 'vue';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
import {defineComponent, reactive, toRefs } from 'vue';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
||||
|
||||
const state = reactive({
|
||||
table: false,
|
||||
dialog: false,
|
||||
@ -382,7 +382,7 @@ import { ElMessageBox } from 'element-plus';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
|
||||
|
||||
const drawer = ref(false);
|
||||
const innerDrawer = ref(false);
|
||||
const handleClose = (done) => {
|
||||
@ -426,8 +426,12 @@ Drawerは `destroyOnClose` というAPIを提供しています。これはフ
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | Drawerを表示する場合は、 | boolean | — | false |
|
||||
| append-to-body | DrawerがDocumentBody要素に挿入されている場合のコントロールは、ネストされたDrawerはこのパラメータを**true**に割り当てなければなりません。| boolean | — | false |
|
||||
| lock-scroll | Drawer 表示中にボディのスクロールを無効にするかどうか | boolean | — | true |
|
||||
| before-close | 設定されている場合は、終了処理を停止します。 | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |
|
||||
| close-on-click-modal | Drawer を閉じることができるかどうか | boolean | — | true |
|
||||
| close-on-press-escape | ESC を押してDrawerを閉じることができるかどうかを示す。 | boolean | — | true |
|
||||
| open-delay | Time(milliseconds) before open | number | — | 0 |
|
||||
| close-delay | Time(milliseconds) before close | number | — | 0 |
|
||||
| custom-class | Drawerの追加クラス名 | string | — | — |
|
||||
| destroy-on-close | Drawerが閉じた後にChildrenが破壊されるべきかどうかを示す | boolean | - | false |
|
||||
| modal | シャドウイングレイヤーを表示するか | boolean | — | true |
|
||||
@ -437,6 +441,8 @@ Drawerは `destroyOnClose` というAPIを提供しています。これはフ
|
||||
| title | Drawerのタイトルは、スロットの名前を指定して設定することもできます。 | string | — | — |
|
||||
| withHeader | デフォルトは true で、withHeader が false に設定されている場合は `title attribute` と `title slot` の両方が動作しません。 | boolean | - | true |
|
||||
| modal-class | シャドウレイヤーの追加クラス名 | string | — | — |
|
||||
| z-index | set z-index | number | - | - |
|
||||
|
||||
### Drawerスロット
|
||||
|
||||
| Name | Description |
|
||||
|
||||
@ -414,14 +414,18 @@ Drawer 提供一个 `destroyOnClose` API, 用来在关闭 Drawer 时销毁子组
|
||||
|
||||
:::
|
||||
### Drawer Attributes
|
||||
Drawer has almost identical attributes as Dialog.
|
||||
Drawer 和 Dialog 的属性几乎相同。
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | 是否显示 Drawer | boolean | — | false |
|
||||
| append-to-body | Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true | boolean | — | false |
|
||||
| lock-scroll | 是否在 Drawer 出现时将 body 滚动锁定 | boolean | — | true |
|
||||
| before-close | 关闭前的回调，会暂停 Drawer 的关闭 | function(done)，done 用于关闭 Drawer | — | — |
|
||||
| close-on-click-modal | 是否可以通过点击 modal 关闭 Drawer | boolean | — | true |
|
||||
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Drawer | boolean | — | true |
|
||||
| open-delay | Drawer 打开的延时时间，单位毫秒 | number | — | 0 |
|
||||
| close-delay | Drawer 关闭的延时时间，单位毫秒 | number | — | 0 |
|
||||
| custom-class | Drawer 的自定义类名 | string | — | — |
|
||||
| destroy-on-close | 控制是否在关闭 Drawer 之后将子元素全部销毁 | boolean | - | false |
|
||||
| modal | 是否需要遮罩层 | boolean | — | true |
|
||||
@ -431,6 +435,8 @@ Drawer has almost identical attributes as Dialog.
|
||||
| title | Drawer 的标题，也可通过具名 slot （见下表）传入 | string | — | — |
|
||||
| withHeader | 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 | boolean | - | true |
|
||||
| modal-class | 遮罩层的自定义类名 | string | - | - |
|
||||
| z-index | 设置 z-index | number | - | - |
|
||||
|
||||
### Drawer Slot
|
||||
|
||||
| name | 说明 |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user