Drawer

화면 가장자리에서 내용을 열고 바깥 방향 스와이프로 닫습니다.

용법

bottom

아래쪽 가장자리에서 모달 화면을 열고 핸들을 아래로 끌어 닫습니다.

<!-- Drawer / Bottom -->
<script setup lang="ts">
import { DrawerRoot, DrawerTrigger, DrawerOverlay, DrawerContent, DrawerHandle, DrawerTitle, DrawerDescription, DrawerClose } from '@sectile/vue/drawer'
</script>

<template>
  <DrawerRoot>
    <DrawerTrigger>Open filters</DrawerTrigger>
    <DrawerOverlay class="drawer-overlay" />
    <DrawerContent class="drawer-content">
      <DrawerHandle class="drawer-handle" />
      <DrawerTitle>Filters</DrawerTitle>
      <DrawerDescription>Refine the deployment list.</DrawerDescription>
      <DrawerClose>Apply filters</DrawerClose>
    </DrawerContent>
  </DrawerRoot>
</template>

side

같은 드로어 계약을 화면의 가로 가장자리에서 엽니다.

<!-- Drawer / Side -->
<script setup lang="ts">
import { DrawerRoot, DrawerTrigger, DrawerOverlay, DrawerContent, DrawerHandle, DrawerTitle, DrawerDescription, DrawerClose } from '@sectile/vue/drawer'
</script>

<template>
  <DrawerRoot side="right">
    <DrawerTrigger>Open inspector</DrawerTrigger>
    <DrawerOverlay class="drawer-overlay" />
    <DrawerContent class="drawer-content drawer-content-side">
      <DrawerHandle class="drawer-handle" />
      <DrawerTitle>Inspector</DrawerTitle>
      <DrawerDescription>Review the selected deployment.</DrawerDescription>
      <DrawerClose>Close</DrawerClose>
    </DrawerContent>
  </DrawerRoot>
</template>

외부 상태 관리

현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.

<!-- Drawer / Controlled -->
<script setup lang="ts">
import { DrawerRoot, DrawerTrigger, DrawerOverlay, DrawerContent, DrawerHandle, DrawerTitle, DrawerClose } from '@sectile/vue/drawer'
import { ref } from 'vue'

const open = ref(false)

</script>

<template>
  <DrawerRoot v-model:open="open">
    <DrawerTrigger>Open filters</DrawerTrigger>
    <DrawerOverlay class="drawer-overlay" />
    <DrawerContent class="drawer-content">
      <DrawerHandle class="drawer-handle" />
      <DrawerTitle>Controlled filters</DrawerTitle>
      <DrawerClose>Done</DrawerClose>
    </DrawerContent>
  </DrawerRoot>
</template>

외부 조작

closeOnInteractOutside로 콘텐츠 밖의 포인터 조작이 컴포넌트를 닫을지 정합니다. interactOutsideExclusions에 넣은 요소는 모달에서도 계속 조작할 수 있으며 외부 조작 판정에서 제외됩니다. 조건부로 유지하려면 interact-outside 이벤트에서 preventDefault()를 호출합니다.

template

<DrawerRoot
  :interact-outside-exclusions="[ignoredElement]"
  @interact-outside="(event) => {
    if (event.isInside(temporarilyIgnoredElement)) event.preventDefault()
  }"
/>

스와이프 동작

DrawerHandle을 드로어의 바깥 방향으로 끌면 닫힙니다. 폼 컨트롤처럼 드래그를 시작하면 안 되는 하위 요소에는 data-sectile-drawer-swipe-ignore를 지정합니다. data-swipe="move|cancel|end", data-swiping, --sectile-drawer-swipe-movement-x, --sectile-drawer-swipe-movement-y, --sectile-drawer-swipe-progress로 이동과 종료 애니메이션을 스타일링할 수 있습니다.

API

Vue 패키지: @sectile/vue/drawer

컴포넌트

DrawerRoot
DrawerTrigger
DrawerPortal
DrawerOverlay
DrawerContent
DrawerHandle
DrawerTitle
DrawerDescription
DrawerClose

Props

`DrawerRootProps`

autoFocus: 타입boolean기본값true
열릴 때 컴포넌트 안으로 포커스를 옮길지 여부입니다.
closeOnInteractOutside: 타입boolean기본값true
콘텐츠 밖을 조작하면 닫을지 여부입니다.
defaultOpen: 타입boolean기본값false
컴포넌트가 관리하는 초기 열림 상태입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
initialFocus: 타입HTMLElement기본값undefined
컴포넌트가 열릴 때 포커스를 받을 요소 또는 요소를 반환하는 함수입니다.
interactOutsideExclusions: 타입readonly HTMLElement[]기본값undefined
계속 조작할 수 있는 외부 조작 판정 제외 요소 목록입니다.
label: 타입string기본값undefined
보조 기술이 읽는 컨트롤 이름입니다.
modal: 타입boolean기본값true
열린 콘텐츠가 주변 페이지 조작을 막을지 여부입니다.
open: 타입boolean기본값undefined
연결된 팝업이나 펼침 영역이 열려 있는지 여부입니다.
restoreFocus: 타입boolean기본값true
열린 콘텐츠를 닫을 때 실행 요소로 포커스를 되돌릴지 여부입니다.
side: 타입DrawerSide기본값'bottom'
드로어가 열릴 화면 가장자리입니다.
swipeThreshold: 타입number기본값80
밀어서 닫을 때 필요한 포인터 이동 거리(픽셀)입니다.
swipeToDismiss: 타입boolean기본값true
바깥 방향 포인터 스와이프로 드로어를 닫을지 여부입니다.
swipeVelocityThreshold: 타입number기본값0.5
드로어를 닫는 바깥 방향 드래그 속도 기준값(px/ms)입니다.
trapFocus: 타입boolean기본값true
열린 콘텐츠 안에 키보드 포커스를 유지할지 여부입니다.
unmountOnExit: 타입boolean기본값false
닫힘 모션이 끝난 뒤 presence 관리 콘텐츠를 DOM에서 제거할지 여부입니다.

`DrawerPartProps`

as: 타입PrimitiveAs기본값파트별로 다름
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

`DrawerPortalProps`

defer: 타입boolean기본값false
Teleport 대상을 현재 mount 또는 update tick이 끝날 때 찾을지 여부입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
to: 타입string | HTMLElement기본값'body'
포털 콘텐츠를 옮길 대상입니다.

슬롯

`DrawerRootSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
open: 타입boolean
연결된 팝업이나 펼침 영역이 열려 있는지 여부입니다.

기타 타입

`DrawerOpenChangeHandler`

type DrawerOpenChangeHandler = PopupFactoryOptions['onOpenChange']

`DrawerInteractOutsideHandler`

type DrawerInteractOutsideHandler = NonNullable<PopupFactoryOptions['onInteractOutside']>

`DrawerSide`

type DrawerSide = 'top' | 'right' | 'bottom' | 'left'

파트

공통 범위: [data-scope="drawer"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.

파트	선택자	역할	추가 속성
`trigger`	`[data-part="trigger"]`	연결된 콘텐츠를 열고 닫거나 활성화합니다.	—
`overlay`	`[data-part="overlay"]`	모달이 열린 동안 주변 콘텐츠를 덮습니다.	—
`content`	`[data-part="content"]`	현재 상태에 맞는 컴포넌트 콘텐츠를 담습니다.	—
`handle`	`[data-part="handle"]`	바깥 방향 스와이프로 닫는 조작 영역을 제공합니다.	`aria-hidden="true"`
`title`	`[data-part="title"]`	연결된 콘텐츠의 제목을 표시합니다.	—
`description`	`[data-part="description"]`	연결된 콘텐츠나 결정 내용을 설명합니다.	—
`close`	`[data-part="close"]`	현재 화면을 닫거나 해제합니다.	—

키보드 동작

키	동작
`Enter` / `Space`	실행 요소나 포커스된 작업을 실행합니다.
`Tab` / `Shift+Tab`	모달 포커스를 내부에 유지하며 컨트롤 사이를 이동합니다.
`Escape`	드로어를 닫고 설정된 경우 포커스를 복원합니다.
`Pointer swipe`	핸들을 바깥 방향으로 거리 또는 속도 기준 이상 밀어 닫습니다.

접근성

드로어는 모달 대화상자 의미를 따르고 가장자리와 스와이프 방향을 노출하며 제스처 핸들은 보조 기술에서 숨깁니다.

관련 WAI-ARIA 패턴에서 호스트 접근성 규칙을 확인할 수 있습니다.

Drawer ​

용법 ​

bottom ​

side ​

외부 상태 관리 ​

외부 조작 ​

스와이프 동작 ​

API ​

Props ​

DrawerRootProps ​

DrawerPartProps ​

DrawerPortalProps ​

슬롯 ​

DrawerRootSlotProps ​

기타 타입 ​

DrawerOpenChangeHandler ​

DrawerInteractOutsideHandler ​

DrawerSide ​

파트 ​

키보드 동작 ​

접근성 ​