Dialog

미리보기

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

사용법

• 리소스 편집이나 계획 확인처럼 사용자가 온전히 집중해야 하는 작업에 쓰세요. Title과 Description을 넣으세요. 닫기(X) 버튼은 모든 dialog에 있고, Footer에는 작업의 액션을 둡니다.
• 목록이나 카드 그리드에서 세션, 배포 같은 항목의 상세를 보여 줄 때는 dialog 대신 옆에 Sheet를 열어 목록이 화면에 남게 하세요. 탭이 필요한 긴 기록은 페이지를 따로 두세요.

• 간단한 공지로 흐름을 반복해서 막지 마세요. 대신 Toast를 사용하세요.
• Dialog에서 데이터 손실을 확인하지 마세요. 별도의 AlertDialog를 사용하세요.
• 작업이 없는 dialog의 Footer에 닫기 버튼을 넣지 마세요. 닫기(X) 버튼이 이미 그 일을 합니다. Footer에는 저장, 취소 같은 액션을 두세요.

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

구성

Root → Trigger → Content → Header(Title / Description / X) + Body + Footer

키보드와 접근성

Tab은 dialog 안에서 포커스를 유지합니다. Escape 또는 닫기 버튼이 dialog를 닫습니다. 중첩된 Select가 먼저 닫힌 다음, 부모 Dialog가 닫힙니다.

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

예시 코드

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

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

<Dialog.Root>
  <Dialog.Trigger render={<Button />}>Open plan</Dialog.Trigger>
  <Dialog.Content closeLabel='Close plan'>
    <Dialog.Header>
      <Dialog.Title>Deployment plan</Dialog.Title>
      <Dialog.Description>Preview only.</Dialog.Description>
    </Dialog.Header>
    <Dialog.Body>Plan details</Dialog.Body>
    <Dialog.Footer>
      <Dialog.Close render={<Button />}>Done</Dialog.Close>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

주요 API

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

관련 토큰