Dialog

기본 창이나 다른 대화상자 위에 오버레이되는 창으로, 아래 콘텐츠를 비활성화합니다.

Docs API Reference

<script lang="ts">
  import { Button, buttonVariants } from "$lib/components/ui/button/index.js";
  import * as Dialog from "$lib/components/ui/dialog/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
</script>
 
<Dialog.Root>
  <form>
    <Dialog.Trigger class={buttonVariants({ variant: "outline" })}
      >다이얼로그 열기</Dialog.Trigger
    >
    <Dialog.Content class="sm:max-w-[425px]">
      <Dialog.Header>
        <Dialog.Title>프로필 수정</Dialog.Title>
        <Dialog.Description>
          여기서 프로필을 변경하세요. 완료되면 저장을 클릭하세요.
        </Dialog.Description>
      </Dialog.Header>
      <div class="grid gap-4">
        <div class="grid gap-3">
          <Label for="name-1">이름</Label>
          <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
        </div>
        <div class="grid gap-3">
          <Label for="username-1">사용자명</Label>
          <Input id="username-1" name="username" defaultValue="@peduarte" />
        </div>
      </div>
      <Dialog.Footer>
        <Dialog.Close class={buttonVariants({ variant: "outline" })}
          >취소</Dialog.Close
        >
        <Button type="submit">변경사항 저장</Button>
      </Dialog.Footer>
    </Dialog.Content>
  </form>
</Dialog.Root>

설치

pnpm dlx shadcn-svelte@latest add dialog

npx shadcn-svelte@latest add dialog

npx shadcn-svelte@latest add dialog

bun x shadcn-svelte@latest add dialog

bits-ui 설치:

pnpm i bits-ui -D

npm i bits-ui -D

yarn install bits-ui -D

bun install bits-ui -D

다음 코드를 프로젝트에 복사하여 붙여넣으세요.

<script lang="ts">
  import { Dialog as DialogPrimitive } from "bits-ui";

  let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
</script>

<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />

사용법

<script lang="ts">
  import * as Dialog from "$lib/components/ui/dialog/index.js";
</script>

<Dialog.Root>
  <Dialog.Trigger>열기</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>정말 확실하신가요?</Dialog.Title>
      <Dialog.Description>
        이 작업은 취소할 수 없습니다. 계정이 영구적으로 삭제되고 서버에서
        데이터가 제거됩니다.
      </Dialog.Description>
    </Dialog.Header>
  </Dialog.Content>
</Dialog.Root>

예제

커스텀 닫기 버튼

<script lang="ts">
  import { buttonVariants } from "$lib/components/ui/button/index.js";
  import * as Dialog from "$lib/components/ui/dialog/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
</script>
 
<Dialog.Root>
  <Dialog.Trigger class={buttonVariants({ variant: "outline" })}
    >공유</Dialog.Trigger
  >
  <Dialog.Content class="sm:max-w-md">
    <Dialog.Header>
      <Dialog.Title>링크 공유</Dialog.Title>
      <Dialog.Description
        >이 링크를 가진 사람은 누구나 볼 수 있습니다.</Dialog.Description
      >
    </Dialog.Header>
    <div class="flex items-center gap-2">
      <div class="grid flex-1 gap-2">
        <Label for="link" class="sr-only">링크</Label>
        <Input
          id="link"
          defaultValue="https://shadcn-svelte.com/docs/installation"
        />
      </div>
    </div>
    <Dialog.Footer class="sm:justify-start">
      <Dialog.Close class={buttonVariants({ variant: "secondary" })}
        >닫기</Dialog.Close
      >
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

Date Picker Drawer