Sheet

화면의 주요 콘텐츠를 보완하는 콘텐츠를 표시하기 위해 Dialog 컴포넌트를 확장합니다.

Docs API Reference

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Sheet from "$lib/components/ui/sheet/index.js";
  import { buttonVariants } from "$lib/components/ui/button/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
</script>
 
<Sheet.Root>
  <Sheet.Trigger class={buttonVariants({ variant: "outline" })}
    >열기</Sheet.Trigger
  >
  <Sheet.Content side="right">
    <Sheet.Header>
      <Sheet.Title>프로필 수정</Sheet.Title>
      <Sheet.Description>
        여기서 프로필을 변경하세요. 완료되면 저장을 클릭하세요.
      </Sheet.Description>
    </Sheet.Header>
    <div class="grid flex-1 auto-rows-min gap-6 px-4">
      <div class="grid gap-3">
        <Label for="name" class="text-end">이름</Label>
        <Input id="name" value="Pedro Duarte" />
      </div>
      <div class="grid gap-3">
        <Label for="username" class="text-end">사용자명</Label>
        <Input id="username" value="@peduarte" />
      </div>
    </div>
    <Sheet.Footer>
      <Button type="submit">변경사항 저장</Button>
      <Sheet.Close class={buttonVariants({ variant: "outline" })}
        >닫기</Sheet.Close
      >
    </Sheet.Footer>
  </Sheet.Content>
</Sheet.Root>

설치

pnpm dlx shadcn-svelte@latest add sheet

npx shadcn-svelte@latest add sheet

npx shadcn-svelte@latest add sheet

bun x shadcn-svelte@latest add sheet

bits-ui 설치:

pnpm i bits-ui -D

npm i bits-ui -D

yarn install bits-ui -D

bun install bits-ui -D

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

import Root from "./sheet.svelte";
import Portal from "./sheet-portal.svelte";
import Trigger from "./sheet-trigger.svelte";
import Close from "./sheet-close.svelte";
import Overlay from "./sheet-overlay.svelte";
import Content from "./sheet-content.svelte";
import Header from "./sheet-header.svelte";
import Footer from "./sheet-footer.svelte";
import Title from "./sheet-title.svelte";
import Description from "./sheet-description.svelte";

export {
  Root,
  Close,
  Trigger,
  Portal,
  Overlay,
  Content,
  Header,
  Footer,
  Title,
  Description,
  //
  Root as Sheet,
  Close as SheetClose,
  Trigger as SheetTrigger,
  Portal as SheetPortal,
  Overlay as SheetOverlay,
  Content as SheetContent,
  Header as SheetHeader,
  Footer as SheetFooter,
  Title as SheetTitle,
  Description as SheetDescription,
};

사용법

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

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

예제

Side

<Sheet.Content />에 side 속성을 전달하여 컴포넌트가 나타날 화면의 가장자리를 지정합니다. 값은 top, right, bottom 또는 left가 될 수 있습니다.

Size

CSS 클래스를 사용하여 시트의 크기를 조정할 수 있습니다:

<Sheet.Root>
  <Sheet.Trigger>열기</Sheet.Trigger>
  <Sheet.Content class="w-[400px] sm:w-[540px]">
    <Sheet.Header>
      <Sheet.Title>정말로 확실합니까?</Sheet.Title>
      <Sheet.Description>
        이 작업은 취소할 수 없습니다. 계정이 영구적으로 삭제되고 서버에서
        데이터가 제거됩니다.
      </Sheet.Description>
    </Sheet.Header>
  </Sheet.Content>
</Sheet.Root>

Separator Sidebar