javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): [drawer] (#13677)

Browse Source
This commit is contained in:
btea
2023-07-22 16:19:19 +08:00
committed by GitHub
parent 708f6ab5b8
commit d4ffc4f644
1 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
docs/en-US/component/drawer.md
View File

@@ -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 |
| ------ | ------------------------------------------------ | --------- |