Collapsible

패널을 확장하거나 접을 수 있는 인터랙티브 컴포넌트입니다.

Docs API Reference

@huntabyte가 스타를 누른 저장소 3개

@huntabyte/bits-ui

<script lang="ts">
  import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
  import * as Collapsible from "$lib/components/ui/collapsible/index.js";
  import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
 
<Collapsible.Root class="w-[350px] space-y-2">
  <div class="flex items-center justify-between space-x-4 px-4">
    <h4 class="text-sm font-semibold">@huntabyte가 스타를 누른 저장소 3개</h4>
    <Collapsible.Trigger
      class={buttonVariants({ variant: "ghost", size: "sm", class: "w-9 p-0" })}
    >
      <ChevronsUpDownIcon />
      <span class="sr-only">토글</span>
    </Collapsible.Trigger>
  </div>
  <div class="rounded-md border px-4 py-3 font-mono text-sm">
    @huntabyte/bits-ui
  </div>
  <Collapsible.Content class="space-y-2">
    <div class="rounded-md border px-4 py-3 font-mono text-sm">
      @melt-ui/melt-ui
    </div>
    <div class="rounded-md border px-4 py-3 font-mono text-sm">
      @sveltejs/svelte
    </div>
  </Collapsible.Content>
</Collapsible.Root>

설치

pnpm dlx shadcn-svelte@latest add collapsible

npx shadcn-svelte@latest add collapsible

npx shadcn-svelte@latest add collapsible

bun x shadcn-svelte@latest add collapsible

Install 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 { Collapsible as CollapsiblePrimitive } from "bits-ui";

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

<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />

사용법

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

<Collapsible.Root>
  <Collapsible.Trigger>내 프로젝트에서 사용할 수 있나요?</Collapsible.Trigger>
  <Collapsible.Content>
    네. 개인 및 상업용 프로젝트에 무료로 사용할 수 있습니다. 출처 표시가
    필요하지 않습니다.
  </Collapsible.Content>
</Collapsible.Root>

Checkbox Combobox