Drawer

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

모바일에서 스와이프로 닫히는 작업 패널을 표시하세요. 키보드 지원과 닫기 버튼도 제공하세요.

닫기 제스처를 완료나 저장으로 취급하지 마세요. 그 동작은 Footer의 명시적 버튼에 두세요. 드래그로만 동작하는 UI를 만들지 마세요. 키보드와 버튼 경로도 제공하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root → Trigger → Content(handle / popup) → Header / Body / Footer

키보드와 접근성

포커스는 패널 안에 유지됩니다. Escape 또는 닫기 버튼이 패널을 닫습니다. 스와이프로 닫은 후에는 포커스가 Trigger로 돌아갑니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Drawer, Button } from '@surflane/ui'

<Drawer.Root>
  <Drawer.Trigger render={<Button />}>Prepare run</Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>Prepare deployment</Drawer.Title>
      <Drawer.Description>Preview only.</Drawer.Description>
    </Drawer.Header>
    <Drawer.Body>Run settings</Drawer.Body>
    <Drawer.Footer>
      <Drawer.Close render={<Button />}>Cancel</Drawer.Close>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰