Skip to content

Commit

Permalink
editing based on reviews
Browse files Browse the repository at this point in the history
  • Loading branch information
danilo-leal committed Sep 18, 2023
1 parent c975685 commit 3be41a5
Showing 1 changed file with 9 additions and 7 deletions.
16 changes: 9 additions & 7 deletions docs/data/joy/components/drawer/drawer.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,22 @@ It will also close if an item inside of it is selected, which can be controlled
### Anchor

Use the anchor prop to specify where the drawer should appear from.
The default value is `left`.

{{"demo": "DrawerAnchor.js"}}

### Close button
### Size

Use the Modal Close component to add a close button to the Drawer.
Use the size prop to adjust the Drawer's width and height when positioned left/right and top/bottom, respectively.

{{"demo": "DrawerCloseButton.js"}}
{{"demo": "DrawerSize.js"}}

### Size
### Close button

Use the `size` prop to adjust the Drawer's width.
Use the Modal Close component to add a close button to the Drawer.
It automatically handles the `onClick` event.

{{"demo": "DrawerSize.js"}}
{{"demo": "DrawerCloseButton.js"}}

### Transition

Expand All @@ -67,6 +69,6 @@ A common use case for the Drawer is mobile menus.

### Inset drawer

To make the Drawer not glued to the edge of the viewport, creating an inset style, use a combination of background and padding values on the Drawer component and either a Box or [Sheet](/joy-ui/react-sheet/) to the full-height wrapper.
To make the Drawer not glued to the edge of the viewport, creating an inset style, use a combination of background and padding values on the Drawer component and either the Box or [Sheet](/joy-ui/react-sheet/) components for the full-height wrapper.

{{"demo": "DrawerFilters.js"}}

0 comments on commit 3be41a5

Please sign in to comment.