Skip to content

Commit

Permalink
Merge pull request #227 from yamada-ui/docs/add-closeOnDrag-prop
Browse files Browse the repository at this point in the history
Added `closeOnDrag` prop example in document
  • Loading branch information
hirotomoyamada authored Mar 21, 2024
2 parents 652721c + e568360 commit f6e2452
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 0 deletions.
44 changes: 44 additions & 0 deletions docs/contents/components/overlay/drawer/index.ja.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
title: Drawer
description: "`Drawer`は、画面の端から表示されるパネルのコンポーネントです。"
package_name: "@yamada-ui/modal"
label: Updated
is_tabs: true
with_description: true
tab: 使い方
Expand Down Expand Up @@ -299,6 +300,49 @@ return (
)
```

### ドラッグして閉じる

`Drawer`をドラッグで閉じたい場合は、`closeOnDrag``true`に設定します。

```tsx functional=true
const placementMap = ["top", "right", "bottom", "left"]
const [placement, setPlacement] = useState("center")
const { isOpen, onOpen, onClose } = useDisclosure()

return (
<>
<Wrap gap="md">
{placementMap.map((placement) => (
<Button
key={placement}
onClick={() => {
setPlacement(placement)
onOpen()
}}
>
Open {placement} Drawer
</Button>
))}
</Wrap>

<Drawer closeOnDrag isOpen={isOpen} onClose={onClose} placement={placement}>
<DrawerHeader>ドラゴンボール</DrawerHeader>

<DrawerBody>
『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
</DrawerBody>

<DrawerFooter>
<Button variant="ghost" onClick={onClose}>
とじる
</Button>
<Button colorScheme="primary">Wikipadia</Button>
</DrawerFooter>
</Drawer>
</>
)
```

### オーバーレイをカスタマイズする

`DrawerOverlay``props`などを渡して、カスタマイズしたい場合は、省略せずに設定します。
Expand Down
44 changes: 44 additions & 0 deletions docs/contents/components/overlay/drawer/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
title: Drawer
description: "`Drawer` is a component for a panel that appears from the edge of the screen."
package_name: "@yamada-ui/modal"
label: Updated
is_tabs: true
with_description: true
tab: Usage
Expand Down Expand Up @@ -299,6 +300,49 @@ return (
)
```

### Close on drag

If you want to close the `Drawer` on drag, set `closeOnDrag` to `true`.

```tsx functional=true
const placementMap = ["top", "right", "bottom", "left"]
const [placement, setPlacement] = useState("center")
const { isOpen, onOpen, onClose } = useDisclosure()

return (
<>
<Wrap gap="md">
{placementMap.map((placement) => (
<Button
key={placement}
onClick={() => {
setPlacement(placement)
onOpen()
}}
>
Open {placement} Drawer
</Button>
))}
</Wrap>

<Drawer closeOnDrag isOpen={isOpen} onClose={onClose} placement={placement}>
<DrawerHeader>ドラゴンボール</DrawerHeader>

<DrawerBody>
『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
</DrawerBody>

<DrawerFooter>
<Button variant="ghost" onClick={onClose}>
とじる
</Button>
<Button colorScheme="primary">Wikipadia</Button>
</DrawerFooter>
</Drawer>
</>
)
```

### Customize the Overlay

If you want to customize the `DrawerOverlay` by passing `props`, etc., set it without omitting.
Expand Down

0 comments on commit f6e2452

Please sign in to comment.