Tabs

한 번에 하나씩 표시되는 계층화된 콘텐츠 섹션(탭 패널)의 집합입니다.

Docs API Reference

계정

계정 정보를 여기에서 변경할 수 있습니다. 완료되면 저장을 클릭하세요.

이름

사용자명

<script lang="ts">
  import * as Tabs from "$lib/components/ui/tabs/index.js";
  import * as Card from "$lib/components/ui/card/index.js";
  import { Button } 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>
 
<div class="-mb-4 flex w-full max-w-sm flex-col gap-6">
  <Tabs.Root value="account">
    <Tabs.List>
      <Tabs.Trigger value="account">계정</Tabs.Trigger>
      <Tabs.Trigger value="password">비밀번호</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="account">
      <Card.Root>
        <Card.Header>
          <Card.Title>계정</Card.Title>
          <Card.Description>
            계정 정보를 여기에서 변경할 수 있습니다. 완료되면 저장을 클릭하세요.
          </Card.Description>
        </Card.Header>
        <Card.Content class="grid gap-6">
          <div class="grid gap-3">
            <Label for="tabs-demo-name">이름</Label>
            <Input id="tabs-demo-name" value="Pedro Duarte" />
          </div>
          <div class="grid gap-3">
            <Label for="tabs-demo-username">사용자명</Label>
            <Input id="tabs-demo-username" value="@peduarte" />
          </div>
        </Card.Content>
        <Card.Footer>
          <Button>변경사항 저장</Button>
        </Card.Footer>
      </Card.Root>
    </Tabs.Content>
    <Tabs.Content value="password">
      <Card.Root>
        <Card.Header>
          <Card.Title>비밀번호</Card.Title>
          <Card.Description>
            비밀번호를 여기에서 변경할 수 있습니다. 저장 후 로그아웃됩니다.
          </Card.Description>
        </Card.Header>
        <Card.Content class="grid gap-6">
          <div class="grid gap-3">
            <Label for="tabs-demo-current">현재 비밀번호</Label>
            <Input id="tabs-demo-current" type="password" />
          </div>
          <div class="grid gap-3">
            <Label for="tabs-demo-new">새 비밀번호</Label>
            <Input id="tabs-demo-new" type="password" />
          </div>
        </Card.Content>
        <Card.Footer>
          <Button>비밀번호 저장</Button>
        </Card.Footer>
      </Card.Root>
    </Tabs.Content>
  </Tabs.Root>
</div>

설치

pnpm dlx shadcn-svelte@latest add tabs

npx shadcn-svelte@latest add tabs

npx shadcn-svelte@latest add tabs

bun x shadcn-svelte@latest add tabs

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 "./tabs.svelte";
import Content from "./tabs-content.svelte";
import List from "./tabs-list.svelte";
import Trigger from "./tabs-trigger.svelte";

export {
  Root,
  Content,
  List,
  Trigger,
  //
  Root as Tabs,
  Content as TabsContent,
  List as TabsList,
  Trigger as TabsTrigger,
};

사용법

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

<Tabs.Root value="account" class="w-[400px]">
  <Tabs.List>
    <Tabs.Trigger value="account">계정</Tabs.Trigger>
    <Tabs.Trigger value="password">비밀번호</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="account">여기에서 계정을 변경하세요.</Tabs.Content>
  <Tabs.Content value="password">여기에서 비밀번호를 변경하세요.</Tabs.Content>
</Tabs.Root>

Table Textarea