DismissableLayer는 외부 영역 클릭, 포커스, 혹은 esc keydown을 핸들링 할 수 있는 컴포넌트입니다.
Introduce
children 컴포넌트 외 다른 영역을 클릭, 포커스, 혹은 esc keydown시를 핸들링 할 수 있습니다.
일반적으로는 사용하지 않으며 시스템 컴포넌트를 직접 구현할 때 사용합니다.
@radix-ui/react-dismissable-layer 컴포넌트를 re-export 하여 제공하고 있습니다.
wds-ignore-dismissable-layer="true" 속성을 가진 요소는 pointerdown, focus 이벤트를 하더라도 Dismiss처리하지 않습니다.
모든 이벤트는 preventDefault() 를 통해 막을 수 있습니다.
API
Name
Types
defaultValue
disableOutsidePointerEvents
boolean
When `true`, hover/focus/click interactions will be disabled on elements outside the `DismissableLayer`. Users will need to click twice on outside elements to interact with them: once to close the `DismissableLayer`, and again to trigger the element.
-
onEscapeKeyDown
(event: KeyboardEvent) => void
Event handler called when the escape key is down. Can be prevented.
-
onPointerDownOutside
(event: CustomEvent) => void
Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
-
onFocusOutside
(event: CustomEvent) => void
Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
-
onDismiss
() => void
Handler called when the `DismissableLayer` should be dismissed