이 사이트는 shadcn-svelte 공식 문서의 한국어 번역입니다.
6.9k

Empty

Previous Next

빈 상태를 표시하는 Empty 컴포넌트입니다.

프로젝트가 없습니다
아직 프로젝트를 만들지 않았습니다. 첫 번째 프로젝트를 만들어 시작하세요.
<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import FolderCodeIcon from "@tabler/icons-svelte/icons/folder-code";
  import ArrowUpRightIcon from "@lucide/svelte/icons/arrow-up-right";
</script>
 
<Empty.Root>
  <Empty.Header>
    <Empty.Media variant="icon">
      <FolderCodeIcon />
    </Empty.Media>
    <Empty.Title>프로젝트가 없습니다</Empty.Title>
    <Empty.Description>
      아직 프로젝트를 만들지 않았습니다. 첫 번째 프로젝트를 만들어 시작하세요.
    </Empty.Description>
  </Empty.Header>
  <Empty.Content>
    <div class="flex gap-2">
      <Button>프로젝트 만들기</Button>
      <Button variant="outline">프로젝트 가져오기</Button>
    </div>
  </Empty.Content>
  <Button variant="link" class="text-muted-foreground" size="sm">
    <a href="#/">
      더 알아보기 <ArrowUpRightIcon class="inline" />
    </a>
  </Button>
</Empty.Root>

설치

pnpm dlx shadcn-svelte@latest add empty

사용법

<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import FolderCodeIcon from "@tabler/icons-svelte/icons/folder-code";
</script>
<Empty.Root>
  <Empty.Header>
    <Empty.Media variant="icon">
      <FolderCodeIcon />
    </Empty.Media>
    <Empty.Title>데이터 없음</Empty.Title>
    <Empty.Description>데이터를 찾을 수 없습니다</Empty.Description>
  </Empty.Header>
  <Empty.Content>
    <Button>데이터 추가</Button>
  </Empty.Content>
</Empty.Root>

예제

외곽선

border 유틸리티 클래스를 사용하여 외곽선이 있는 빈 상태를 만들 수 있습니다.

클라우드 저장소가 비어 있습니다
클라우드 저장소에 파일을 업로드하여 어디서나 액세스하세요.
<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import CloudIcon from "@tabler/icons-svelte/icons/cloud";
</script>
 
<Empty.Root class="border border-dashed">
  <Empty.Header>
    <Empty.Media variant="icon">
      <CloudIcon />
    </Empty.Media>
    <Empty.Title>클라우드 저장소가 비어 있습니다</Empty.Title>
    <Empty.Description>
      클라우드 저장소에 파일을 업로드하여 어디서나 액세스하세요.
    </Empty.Description>
  </Empty.Header>
  <Empty.Content>
    <Button variant="outline" size="sm">파일 업로드</Button>
  </Empty.Content>
</Empty.Root>

배경

bg-* 및 bg-gradient-* 유틸리티를 사용하여 빈 상태에 배경을 추가할 수 있습니다.

알림이 없습니다
모두 확인했습니다. 새 알림이 여기에 표시됩니다.
<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import BellIcon from "@tabler/icons-svelte/icons/bell";
  import RefreshCcwIcon from "@lucide/svelte/icons/refresh-ccw";
</script>
 
<Empty.Root
  class="from-muted/50 to-background h-full bg-gradient-to-b from-30%"
>
  <Empty.Header>
    <Empty.Media variant="icon">
      <BellIcon />
    </Empty.Media>
    <Empty.Title>알림이 없습니다</Empty.Title>
    <Empty.Description
      >모두 확인했습니다. 새 알림이 여기에 표시됩니다.</Empty.Description
    >
  </Empty.Header>
  <Empty.Content>
    <Button variant="outline" size="sm">
      <RefreshCcwIcon />
      새로고침
    </Button>
  </Empty.Content>
</Empty.Root>

아바타

EmptyMedia 컴포넌트를 사용하여 빈 상태에 아바타를 표시할 수 있습니다.

LR
사용자가 오프라인입니다
이 사용자는 현재 오프라인 상태입니다. 메시지를 남겨 알리거나 나중에 다시 시도하세요.
<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
 
<Empty.Root>
  <Empty.Header>
    <Empty.Media variant="default">
      <Avatar.Root class="size-12">
        <Avatar.Image src="https://github.com/shadcn.png" class="grayscale" />
        <Avatar.Fallback>LR</Avatar.Fallback>
      </Avatar.Root>
    </Empty.Media>
    <Empty.Title>사용자가 오프라인입니다</Empty.Title>
    <Empty.Description>
      이 사용자는 현재 오프라인 상태입니다. 메시지를 남겨 알리거나 나중에 다시
      시도하세요.
    </Empty.Description>
  </Empty.Header>
  <Empty.Content>
    <Button size="sm">메시지 남기기</Button>
  </Empty.Content>
</Empty.Root>

아바타 그룹

EmptyMedia 컴포넌트를 사용하여 빈 상태에 아바타 그룹을 표시할 수 있습니다.

CN
LR
ER
팀 구성원이 없습니다
이 프로젝트에서 협업할 팀을 초대하세요.
<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Avatar from "$lib/components/ui/avatar/index.js";
  import PlusIcon from "@lucide/svelte/icons/plus";
</script>
 
<Empty.Root class="flex-none border">
  <Empty.Header>
    <Empty.Media>
      <div
        class="*:ring-background flex -space-x-2 *:size-12 *:ring-2 *:grayscale"
      >
        <Avatar.Root>
          <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
          <Avatar.Fallback>CN</Avatar.Fallback>
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image
            src="https://github.com/maxleiter.png"
            alt="@maxleiter"
          />
          <Avatar.Fallback>LR</Avatar.Fallback>
        </Avatar.Root>
        <Avatar.Root>
          <Avatar.Image
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <Avatar.Fallback>ER</Avatar.Fallback>
        </Avatar.Root>
      </div>
    </Empty.Media>
    <Empty.Title>팀 구성원이 없습니다</Empty.Title>
    <Empty.Description
      >이 프로젝트에서 협업할 팀을 초대하세요.</Empty.Description
    >
  </Empty.Header>
  <Empty.Content>
    <Button size="sm">
      <PlusIcon />
      구성원 초대
    </Button>
  </Empty.Content>
</Empty.Root>

InputGroup

EmptyContent 컴포넌트에 InputGroup 컴포넌트를 추가할 수 있습니다.

404 - 찾을 수 없음
찾으시는 페이지가 존재하지 않습니다. 아래에서 필요한 내용을 검색해 보세요.
/
도움이 필요하신가요? 지원팀에 문의하기
<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import * as InputGroup from "$lib/components/ui/input-group/index.js";
  import * as Kbd from "$lib/components/ui/kbd/index.js";
  import SearchIcon from "@lucide/svelte/icons/search";
</script>
 
<Empty.Root>
  <Empty.Header>
    <Empty.Title>404 - 찾을 수 없음</Empty.Title>
    <Empty.Description>
      찾으시는 페이지가 존재하지 않습니다. 아래에서 필요한 내용을 검색해 보세요.
    </Empty.Description>
  </Empty.Header>
  <Empty.Content>
    <InputGroup.Root class="sm:w-3/4">
      <InputGroup.Input placeholder="페이지를 검색해 보세요..." />
      <InputGroup.Addon>
        <SearchIcon />
      </InputGroup.Addon>
      <InputGroup.Addon align="inline-end">
        <Kbd.Root>/</Kbd.Root>
      </InputGroup.Addon>
    </InputGroup.Root>
    <Empty.Description>
      도움이 필요하신가요? <a href="#/">지원팀에 문의하기</a>
    </Empty.Description>
  </Empty.Content>
</Empty.Root>