Chip Tabs

Chip 형태로 표현된 탭 컴포넌트입니다. 카테고리나 필터를 선택하여 콘텐츠를 전환할 때 사용됩니다.

사용 가능 버전@seed-design/[email protected], @seed-design/[email protected]

Content 1

import {
  ChipTabsContent,
  ChipTabsList,
  ChipTabsRoot,
  ChipTabsTrigger,
} from "seed-design/ui/chip-tabs";

export default function ChipTabsPreview() {
  return (
    <div style={{ width: "100%", maxWidth: "360px" }}>
      <ChipTabsRoot defaultValue="1">
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
        <ChipTabsContent value="1">
          <Content>Content 1</Content>
        </ChipTabsContent>
        <ChipTabsContent value="2">
          <Content>Content 2</Content>
        </ChipTabsContent>
        <ChipTabsContent value="3">
          <Content>Content 3</Content>
        </ChipTabsContent>
      </ChipTabsRoot>
    </div>
  );
}

const Content = (props: React.PropsWithChildren) => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "180px",
        backgroundColor: "var(--seed-color-bg-layer-default)",
      }}
    >
      {props.children}
    </div>
  );
};

Installation

npx @seed-design/cli@latest add ui:chip-tabs

pnpm dlx @seed-design/cli@latest add ui:chip-tabs

yarn dlx @seed-design/cli@latest add ui:chip-tabs

bun x @seed-design/cli@latest add ui:chip-tabs

의존성 설치

npm install @seed-design/react

yarn add @seed-design/react

pnpm add @seed-design/react

bun add @seed-design/react

아래 코드를 복사 후 붙여넣고 사용하세요

/**
 * @file ui:chip-tabs
 * @requires @seed-design/react@^2.0.0 || ^3.0.0
 **/

"use client";

import { HStack, NotificationBadge, ChipTabs as SeedChipTabs } from "@seed-design/react";
import { forwardRef } from "react";

export interface ChipTabsRootProps extends SeedChipTabs.RootProps {}

export const ChipTabsRoot = SeedChipTabs.Root;

export interface ChipTabsListProps extends SeedChipTabs.ListProps {}

export const ChipTabsList = SeedChipTabs.List;

export interface ChipTabsTriggerProps extends Omit<SeedChipTabs.TriggerProps, "asChild"> {
  notification?: boolean;
}

export const ChipTabsTrigger = forwardRef<HTMLButtonElement, ChipTabsTriggerProps>((props, ref) => {
  const { children, notification, ...otherProps } = props;
  return (
    <SeedChipTabs.Trigger ref={ref} {...otherProps}>
      {notification ? (
        <HStack as="span" gap="x1_5">
          {children}
          <NotificationBadge size="small" />
        </HStack>
      ) : (
        children
      )}
    </SeedChipTabs.Trigger>
  );
});
ChipTabsTrigger.displayName = "ChipTabsTrigger";

export interface ChipTabsCarouselProps extends Omit<SeedChipTabs.CarouselProps, "asChild"> {}

export const ChipTabsCarousel = (props: ChipTabsCarouselProps) => {
  const { children, ...otherProps } = props;
  return (
    <SeedChipTabs.Carousel {...otherProps}>
      <SeedChipTabs.CarouselCamera>{children}</SeedChipTabs.CarouselCamera>
    </SeedChipTabs.Carousel>
  );
};
ChipTabsCarousel.displayName = "ChipTabsCarousel";

export interface ChipTabsContentProps extends SeedChipTabs.ContentProps {}

export const ChipTabsContent = SeedChipTabs.Content;

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */

Props

`ChipTabsRoot`

Prop

Type

orientation?"horizontal" | "vertical" | undefined

value?string | undefined

defaultValue?string | undefined

onValueChange?((value: string) => void) | undefined

`ChipTabsTrigger`

Prop

Type

notification?boolean | undefined

valuestring

disabled?boolean | undefined

`ChipTabsCarousel`

Prop

Type

swipeable?boolean | undefined

autoHeight?boolean | undefined

loop?boolean | undefined

dragThreshold?number | undefined

onSettle?(() => void) | undefined

Usage

Content

탭 선택으로만 콘텐츠를 전환할 때는 ChipTabsContent를 ChipTabsRoot 안에 배치합니다. Trigger와 Content의 value를 맞추면 선택된 패널만 표시됩니다. 이 구성은 전환 애니메이션과 좌우 스와이프를 제공하지 않습니다.

import {
  ChipTabsContent,
  ChipTabsList,
  ChipTabsRoot,
  ChipTabsTrigger,
} from "seed-design/ui/chip-tabs";

export function App() {
  return (
    <ChipTabsRoot defaultValue="1">
      <ChipTabsList>
        <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
        <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
        <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
      </ChipTabsList>
      <ChipTabsContent value="1">첫 번째 콘텐츠</ChipTabsContent>
      <ChipTabsContent value="2">두 번째 콘텐츠</ChipTabsContent>
      <ChipTabsContent value="3">세 번째 콘텐츠</ChipTabsContent>
    </ChipTabsRoot>
  );
}

ChipTabsRoot는 value와 onValueChange로 제어하거나 defaultValue로 초기 선택 값을 지정합니다. ChipTabsTrigger의 notification은 label 옆에 작은 NotificationBadge를 표시합니다.

ChipTabsContent를 ChipTabsCarousel 안에 배치하면 탭을 바꿀 때 콘텐츠가 가로로 전환되고, swipeable을 설정하면 콘텐츠를 좌우로 밀어 탭을 바꿀 수 있습니다. Registry의 ChipTabsCarousel은 내부에서 Camera를 조립하므로 ChipTabsCarouselCamera를 따로 추가할 필요가 없습니다.

아래 예제에서 Trigger를 누르거나 콘텐츠를 좌우로 밀면 선택된 chip과 콘텐츠가 함께 바뀝니다. 스와이프 시작·종료·정착은 ChipTabsCarousel의 onSwipeStart, onSwipeEnd, onSettle로 처리할 수 있습니다.

Content 2

import {
  ChipTabsCarousel,
  ChipTabsContent,
  ChipTabsList,
  ChipTabsRoot,
  ChipTabsTrigger,
} from "seed-design/ui/chip-tabs";

export default function ChipTabsSwipeable() {
  return (
    <div style={{ width: "100%", maxWidth: "360px" }}>
      <ChipTabsRoot defaultValue="2">
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
        <ChipTabsCarousel swipeable>
          <ChipTabsContent value="1">
            <Content>Content 1</Content>
          </ChipTabsContent>
          <ChipTabsContent value="2">
            <Content>Content 2</Content>
          </ChipTabsContent>
          <ChipTabsContent value="3">
            <Content>Content 3</Content>
          </ChipTabsContent>
        </ChipTabsCarousel>
      </ChipTabsRoot>
    </div>
  );
}

const Content = (props: React.PropsWithChildren) => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "180px",
        backgroundColor: "var(--seed-color-bg-layer-default)",
      }}
    >
      {props.children}
    </div>
  );
};

Examples

Size=Medium

Content 1

import {
  ChipTabsContent,
  ChipTabsList,
  ChipTabsRoot,
  ChipTabsTrigger,
} from "seed-design/ui/chip-tabs";

export default function ChipTabsSizeMedium() {
  return (
    <div style={{ width: "100%", maxWidth: "360px" }}>
      <ChipTabsRoot variant="neutralSolid" size="medium" defaultValue="1">
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
        <ChipTabsContent value="1">
          <Content>Content 1</Content>
        </ChipTabsContent>
        <ChipTabsContent value="2">
          <Content>Content 2</Content>
        </ChipTabsContent>
        <ChipTabsContent value="3">
          <Content>Content 3</Content>
        </ChipTabsContent>
      </ChipTabsRoot>
    </div>
  );
}

const Content = (props: React.PropsWithChildren) => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "180px",
        backgroundColor: "var(--seed-color-bg-layer-default)",
      }}
    >
      {props.children}
    </div>
  );
};

Size=Large

Content 1

import {
  ChipTabsContent,
  ChipTabsList,
  ChipTabsRoot,
  ChipTabsTrigger,
} from "seed-design/ui/chip-tabs";

export default function ChipTabsSizeLarge() {
  return (
    <div style={{ width: "100%", maxWidth: "360px" }}>
      <ChipTabsRoot variant="neutralSolid" size="large" defaultValue="1">
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
        <ChipTabsContent value="1">
          <Content>Content 1</Content>
        </ChipTabsContent>
        <ChipTabsContent value="2">
          <Content>Content 2</Content>
        </ChipTabsContent>
        <ChipTabsContent value="3">
          <Content>Content 3</Content>
        </ChipTabsContent>
      </ChipTabsRoot>
    </div>
  );
}

const Content = (props: React.PropsWithChildren) => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "180px",
        backgroundColor: "var(--seed-color-bg-layer-default)",
      }}
    >
      {props.children}
    </div>
  );
};

Variant=Neutral Solid

Content 1

import {
  ChipTabsContent,
  ChipTabsList,
  ChipTabsRoot,
  ChipTabsTrigger,
} from "seed-design/ui/chip-tabs";

export default function ChipTabsVariantNeutralSolid() {
  return (
    <div style={{ width: "100%", maxWidth: "360px" }}>
      <ChipTabsRoot variant="neutralSolid" defaultValue="1">
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
        <ChipTabsContent value="1">
          <Content>Content 1</Content>
        </ChipTabsContent>
        <ChipTabsContent value="2">
          <Content>Content 2</Content>
        </ChipTabsContent>
        <ChipTabsContent value="3">
          <Content>Content 3</Content>
        </ChipTabsContent>
      </ChipTabsRoot>
    </div>
  );
}

const Content = (props: React.PropsWithChildren) => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "180px",
        backgroundColor: "var(--seed-color-bg-layer-default)",
      }}
    >
      {props.children}
    </div>
  );
};

Variant=Neutral Outline

Content 1

import {
  ChipTabsContent,
  ChipTabsList,
  ChipTabsRoot,
  ChipTabsTrigger,
} from "seed-design/ui/chip-tabs";

export default function ChipTabsVariantNeutralOutline() {
  return (
    <div style={{ width: "100%", maxWidth: "360px" }}>
      <ChipTabsRoot variant="neutralOutline" defaultValue="1">
        <ChipTabsList>
          <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
        <ChipTabsContent value="1">
          <Content>Content 1</Content>
        </ChipTabsContent>
        <ChipTabsContent value="2">
          <Content>Content 2</Content>
        </ChipTabsContent>
        <ChipTabsContent value="3">
          <Content>Content 3</Content>
        </ChipTabsContent>
      </ChipTabsRoot>
    </div>
  );
}

const Content = (props: React.PropsWithChildren) => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "180px",
        backgroundColor: "var(--seed-color-bg-layer-default)",
      }}
    >
      {props.children}
    </div>
  );
};

Notification

Content 1

import {
  ChipTabsContent,
  ChipTabsList,
  ChipTabsRoot,
  ChipTabsTrigger,
} from "seed-design/ui/chip-tabs";

export default function ChipTabsNotification() {
  return (
    <div style={{ width: "100%", maxWidth: "360px" }}>
      <ChipTabsRoot variant="neutralOutline" size="medium" defaultValue="1">
        <ChipTabsList>
          <ChipTabsTrigger notification value="1">
            라벨1
          </ChipTabsTrigger>
          <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
          <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
        </ChipTabsList>
        <ChipTabsContent value="1">
          <Content>Content 1</Content>
        </ChipTabsContent>
        <ChipTabsContent value="2">
          <Content>Content 2</Content>
        </ChipTabsContent>
        <ChipTabsContent value="3">
          <Content>Content 3</Content>
        </ChipTabsContent>
      </ChipTabsRoot>
    </div>
  );
}

const Content = (props: React.PropsWithChildren) => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "180px",
        backgroundColor: "var(--seed-color-bg-layer-default)",
      }}
    >
      {props.children}
    </div>
  );
};

Extending to Safe Area

ChipTabsRoot에 extendSafeAreaX를 지정하면 가로 스크롤 영역과 ChipTabsCarousel의 패널이 좌우 safe area inset까지 화면 끝으로 넓어집니다. 스크롤하기 전에는 첫 chip이, 끝까지 스크롤한 뒤에는 마지막 chip이 safe area 경계에서 화면 여백만큼 떨어져 놓입니다. AppScreenContent처럼 inset을 반영한 컨테이너 바로 안에서 사용하세요. 화면 끝까지 채우는 다른 방법은 Safe Area 구현 가이드를 참고하세요.

ChipTabsCarousel의 패널은 inset만큼 안쪽 여백을 다시 가지므로, 패널 안에서도 AppScreenContent 안과 같은 방법으로 요소를 화면 끝까지 넓힐 수 있습니다. 다만 100vw나 position: fixed처럼 패널의 여백을 따르지 않는 요소는 이 보정을 받지 않습니다.

With Scroll Fog

탭이 많아 가로 스크롤이 필요한 경우 Scroll Fog를 적용하여 좌우 스크롤 힌트를 제공할 수 있습니다.

권장 padding인 20px을 유지해야 합니다.

Content 1

import { ScrollFog } from "@seed-design/react";
import {
  ChipTabsContent,
  ChipTabsList,
  ChipTabsRoot,
  ChipTabsTrigger,
} from "seed-design/ui/chip-tabs";

const tabs = Array.from({ length: 15 }, (_, i) => String(i + 1));

export default function ChipTabsWithScrollFog() {
  return (
    <div style={{ width: "100%", maxWidth: "360px" }}>
      <ChipTabsRoot variant="neutralSolid" defaultValue="1">
        <ScrollFog placement={["left", "right"]}>
          <ChipTabsList style={{ paddingLeft: "20px", paddingRight: "20px" }}>
            {tabs.map((value) => (
              <ChipTabsTrigger key={value} value={value}>
                라벨{value}
              </ChipTabsTrigger>
            ))}
          </ChipTabsList>
        </ScrollFog>
        {tabs.map((value) => (
          <ChipTabsContent key={value} value={value}>
            <Content>Content {value}</Content>
          </ChipTabsContent>
        ))}
      </ChipTabsRoot>
    </div>
  );
}

const Content = (props: React.PropsWithChildren) => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "180px",
        backgroundColor: "var(--seed-color-bg-layer-default)",
      }}
    >
      {props.children}
    </div>
  );
};

Chip Tabs

Installation

의존성 설치

아래 코드를 복사 후 붙여넣고 사용하세요

Props

`ChipTabsRoot`

`ChipTabsList`

`ChipTabsTrigger`

`ChipTabsCarousel`

`ChipTabsContent`

Usage

Content

Swipeable

Examples

Size=Medium

Size=Large

Variant=Neutral Solid

Variant=Neutral Outline

Notification

Extending to Safe Area

With Scroll Fog

목차

Chip Tabs

Manual Installation

의존성 설치

아래 코드를 복사 후 붙여넣고 사용하세요

목차