Scroll Area

커스텀 크로스 브라우저 스타일링을 위해 기본 스크롤 기능을 강화합니다.

Docs API Reference

<script lang="ts">
  import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
  import { Separator } from "$lib/components/ui/separator/index.js";
 
  const tags = Array.from({ length: 50 }).map(
    (_, i, a) => `v1.2.0-beta.${a.length - i}`
  );
</script>
 
<ScrollArea class="h-72 w-48 rounded-md border">
  <div class="p-4">
    <h4 class="mb-4 text-sm leading-none font-medium">태그</h4>
    {#each tags as tag (tag)}
      <div class="text-sm">
        {tag}
      </div>
      <Separator class="my-2" />
    {/each}
  </div>
</ScrollArea>

설치

pnpm dlx shadcn-svelte@latest add scroll-area

npx shadcn-svelte@latest add scroll-area

npx shadcn-svelte@latest add scroll-area

bun x shadcn-svelte@latest add scroll-area

bits-ui를 설치합니다:

pnpm i bits-ui -D

npm i bits-ui -D

yarn install bits-ui -D

bun install bits-ui -D

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

import Scrollbar from "./scroll-area-scrollbar.svelte";
import Root from "./scroll-area.svelte";

export {
  Root,
  Scrollbar,
  //,
  Root as ScrollArea,
  Scrollbar as ScrollAreaScrollbar,
};

사용법

<script lang="ts">
  import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
</script>

<ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
  광대는 한밤중에 성으로 몰래 들어와서 왕의 베개 밑, 수프 안, 심지어 왕실
  화장실에까지 농담을 남기기 시작했습니다. 왕은 분노했지만, 광대를 막을 수가
  없었습니다. 그러던 어느 날, 왕국의 사람들은 광대가 남긴 농담이 너무
  재미있어서 웃지 않을 수가 없다는 것을 발견했습니다. 그리고 일단 웃기
  시작하자, 멈출 수가 없었습니다.
</ScrollArea>

예제

가로 스크롤

가로 스크롤을 활성화하려면 orientation prop을 "horizontal"로 설정하세요.

Photo by Ornella Binni — 사진 제공: Ornella Binni

Photo by Vladimir Malyavko — 사진 제공: Vladimir Malyavko

<script lang="ts">
  import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
 
  type Artwork = {
    artist: string;
    art: string;
  };
 
  const works: Artwork[] = [
    {
      artist: "Ornella Binni",
      art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
    },
    {
      artist: "Tom Byrom",
      art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80"
    },
    {
      artist: "Vladimir Malyavko",
      art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80"
    }
  ];
</script>
 
<ScrollArea
  class="w-96 rounded-md border whitespace-nowrap"
  orientation="horizontal"
>
  <div class="flex w-max space-x-4 p-4">
    {#each works as artwork (artwork.artist)}
      <figure class="shrink-0">
        <div class="overflow-hidden rounded-md">
          <img
            src={artwork.art}
            alt="Photo by {artwork.artist}"
            class="aspect-[3/4] h-fit w-fit object-cover"
            width={300}
            height={400}
          />
        </div>
        <figcaption class="text-muted-foreground pt-2 text-xs">
          사진 제공:
          <span class="text-foreground font-semibold">
            {artwork.artist}
          </span>
        </figcaption>
      </figure>
    {/each}
  </div>
</ScrollArea>

Resizable Select