From d4ffc4f644168e2efe87fe4afea8983eeab64bd5 Mon Sep 17 00:00:00 2001 From: btea <2356281422@qq.com> Date: Sat, 22 Jul 2023 16:19:19 +0800 Subject: [PATCH] docs(components): [drawer] (#13677) --- docs/en-US/component/drawer.md | 52 ++++++++++++++++++---------------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/docs/en-US/component/drawer.md b/docs/en-US/component/drawer.md index df9e74d281..16b7a33aa8 100644 --- a/docs/en-US/component/drawer.md +++ b/docs/en-US/component/drawer.md @@ -81,28 +81,30 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in ::: -## Drawer Attributes +## API -| Name | Description | Type | Acceptable Values | Default | -| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ------- | -| 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 ^(deprecated) | 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 | -| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / btt | rtl | -| show-close | Should show close button at the top right of Drawer | boolean | — | true | -| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' | -| 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 | - | - | +## Attributes + +| Name | Description | Type | Default | +| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | +| 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: (cancel?: boolean) => void) => void(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 ^(deprecated) | 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 | +| direction | Drawer's opening direction | ^[enum]`'rtl' \| 'ltr' \| 'ttb' \| 'btt' \| 'rtl'` | rtl | +| show-close | Should show close button at the top right of Drawer | ^[boolean] | true | +| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | ^[number] \| ^[string] | 30% | +| 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] | — | :::warning @@ -110,22 +112,22 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in ::: -## Drawer Slots +## Slots | Name | Description | | ------------------- | ---------------------------------------------------------------------------------------------- | -| — | Drawer's Content | +| default | Drawer's Content | | header | Drawer header section; Replacing this removes the title, but does not remove the close button. | | title ^(deprecated) | Works the same as the header slot. Use that instead. | | footer | Drawer footer Section | -## Drawer Methods +## Methods | Name | Description | | ----------- | --------------------------------------------------------------- | | handleClose | In order to close Drawer, this method will call `before-close`. | -## Drawer Events +## Events | Name | Description | Parameter | | ------ | ------------------------------------------------ | --------- |