Skeleton

콘텐츠가 로딩되는 동안 표시할 플레이스홀더입니다.

<script lang="ts">
  import { Skeleton } from "$lib/components/ui/skeleton/index.js";
</script>
 
<div class="flex items-center space-x-4">
  <Skeleton class="size-12 rounded-full" />
  <div class="space-y-2">
    <Skeleton class="h-4 w-[250px]" />
    <Skeleton class="h-4 w-[200px]" />
  </div>
</div>

설치

pnpm dlx shadcn-svelte@latest add skeleton

npx shadcn-svelte@latest add skeleton

npx shadcn-svelte@latest add skeleton

bun x shadcn-svelte@latest add skeleton

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

import Root from "./skeleton.svelte";

export {
  Root,
  //
  Root as Skeleton,
};

사용법

<script lang="ts">
  import { Skeleton } from "$lib/components/ui/skeleton/index.js";
</script>

<Skeleton class="h-[20px] w-[100px] rounded-full" />

예제

카드

<script lang="ts">
  import { Skeleton } from "$lib/components/ui/skeleton/index.js";
</script>
 
<div class="flex flex-col space-y-3">
  <Skeleton class="h-[125px] w-[250px] rounded-xl" />
  <div class="space-y-2">
    <Skeleton class="h-4 w-[250px]" />
    <Skeleton class="h-4 w-[200px]" />
  </div>
</div>

Sidebar Slider