Drawer

Drawerは、画面の端から表示されるパネルのコンポーネントです。

ソース @yamada-ui/modal

Props

DrawerProps

説明

If true, the open will be opened.

タイプ

boolean

説明

Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.

タイプ

boolean

デフォルト

false.

タイプ

"symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "text" | "g" | "p" | "big" | "link" | "small" | "sub" | "sup" | "style" | "animate" | "section" | "a" | "abbr" | "address" | ... 148 more ... | "textPath"

説明

Props for the blank area when closeOnDrag is true.

タイプ

CSSUIObject

説明

If true, scrolling will be disabled on the body when the modal opens.

タイプ

boolean

デフォルト

true

説明

If true, then the drawer will close on drag.

タイプ

boolean

デフォルト

false

説明

If true, the modal will close when the Esc key is pressed.

タイプ

boolean

デフォルト

true

説明

If true, the modal will close when the overlay is clicked.

タイプ

boolean

デフォルト

true

説明

The visual color appearance of the component.

タイプ

"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "danger" | "rose" | "pink" | "flashy" | "orange" | "warning" | "amber" | "yellow" | "lime" | "green" | "success" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "primary" | "info" | "link" | "indigo" | "violet" | "secondary" | "purple" | "fuchsia"

説明

Props for modal container element.

タイプ

HTMLUIProps<"div">

説明

Applies constraints on the permitted draggable area.

タイプ

number

デフォルト

0

説明

The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.

タイプ

number

デフォルト

0.1

説明

Offset from being dragged to closing.

タイプ

number

デフォルト

80

説明

Velocity of the drag that triggers close.

タイプ

number

デフォルト

100

説明

The animation duration.

タイプ

number | Partial<Record<"exit" | "enter", number>>

説明

ref of the element to return focus to when FocusLock unmounts.

タイプ

RefObject<FocusableElement>

説明

ref of the element to receive focus initially.

タイプ

RefObject<FocusableElement>

説明

If true and drawer's placement is top or bottom, the drawer will occupy the viewport height (100dvh).

タイプ

boolean

説明

Enables aggressive focus capturing within iframes. - If true: keep focus in the lock, no matter where lock is active. - If false: allows focus to move outside of iframe.

タイプ

boolean

デフォルト

false

説明

Callback invoked to close the modal.

タイプ

() => void

説明

Callback function to run side effects after the modal has closed.

タイプ

() => void

説明

Callback fired when the escape key is pressed and focus is within modal.

タイプ

() => void

説明

Callback fired when the overlay is clicked.

タイプ

() => void

説明

The placement of the drawer.

タイプ

UIValue<"bottom" | "left" | "right" | "top">

デフォルト

'right'

説明

Props to be forwarded to the portal component.

タイプ

Omit<PortalProps, "children">

説明

If true, focus will be restored to the element that triggered the FocusLock once it unmounts.

タイプ

boolean

デフォルト

false

説明

The size of the Drawer.

タイプ

"xs" | "sm" | "md" | "lg" | "xl" | "full"

デフォルト

md

説明

The variant of the Drawer.

タイプ

string

説明

If true, display the modal close button.

タイプ

boolean

デフォルト

true

説明

If true, display the drag bar when closeOnDrag is true.

タイプ

boolean

デフォルト

true

説明

If true, display the modal overlay.

タイプ

boolean

デフォルト

true

DrawerHeaderProps

DrawerBodyProps

DrawerFooterProps

DrawerOverlayProps

タイプ

"symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "text" | "g" | "p" | "big" | "link" | "small" | "sub" | "sup" | "style" | "animate" | "section" | "a" | "abbr" | "address" | ... 148 more ... | "textPath"

DrawerCloseButtonProps

説明

If true, disable ripple effects when pressing a element.

タイプ

boolean

デフォルト

false

説明

If true, the button is disabled.

タイプ

boolean

デフォルト

false

説明

If true, the button is full rounded.

タイプ

boolean

デフォルト

false

GitHubでこのページを編集する

前Dialog 次Menu