diff --git a/packages/documentation/pages/usage/components/drawer.vue b/packages/documentation/pages/usage/components/drawer.vue index c85d44da6c..7e9603870a 100644 --- a/packages/documentation/pages/usage/components/drawer.vue +++ b/packages/documentation/pages/usage/components/drawer.vue @@ -9,10 +9,6 @@ It is best to place secondary functionality or information into the drawer, and ![Structure](~/assets/img/drawer_structure.png) -- **Drawer:** The size of drawer depends on information density. -- **Handle:** By clicking the handles, the drawer can be `Expanded` to display more information. -- **Background:** The background should be black `#000000` with `46%` opacity. - ## Size
@@ -54,6 +50,24 @@ It is best to place secondary functionality or information into the drawer, and
+## Expansion + +
+ + +
+

Default Size Drawer

+
+
+

This drawer is expanded by default.

+
+
+ +
+
+ +
+ There are different ways to customize the width of the drawer. Each drawer has a default state and a wide state, the transition can be triggered by clicking on the arrow at the edge of the drawer. @@ -125,17 +139,6 @@ When the `disallowCloseOutside` flag is set, it prevents the user from accidenta - -## Usage - -### Attributes - -| Attribute | Description | Type | Accepted values | Default | -| :--------------------- | :----------------------------------------- | :-------- | :-------------- | :------ | -| `disallowCloseOutside` | closed drawer when click outside of drawer | `Boolean` | — | `true` | -| `defaultWidth` | width when drawer is closed | `String` | CSS width | — | -| `expandWidth` | width when drawer is expanded | `String` | CSS width | — | -| `isWide` | wide drawer | `Boolean` | — | `false` |