React
Chip Tabs
Chip 형태로 표현된 탭 컴포넌트입니다. 카테고리나 필터를 선택하여 콘텐츠를 전환할 때 사용됩니다.
import * as React from "react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";
export default function ChipTabsPreview() {
const [value, setValue] = React.useState("1");
return (
<>
<ChipTabsRoot
variant="neutralSolid"
defaultValue="1"
value={value}
onValueChange={(value) => setValue(value)}
>
<ChipTabsList>
<ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
<ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
<ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
</ChipTabsList>
</ChipTabsRoot>
{value === "1" && <div>content 1</div>}
{value === "2" && <div>content 2</div>}
{value === "3" && <div>content 3</div>}
</>
);
}Installation
npx @seed-design/cli@latest add ui:chip-tabspnpm dlx @seed-design/cli@latest add ui:chip-tabsyarn dlx @seed-design/cli@latest add ui:chip-tabsbun x @seed-design/cli@latest add ui:chip-tabs의존성 설치
npm install @seed-design/reactyarn add @seed-design/reactpnpm add @seed-design/reactbun add @seed-design/react아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:chip-tabs
* @requires @seed-design/react@^2.0.0
* @requires @seed-design/css@^2.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" | undefinedvalue?string | undefineddefaultValue?string | undefinedonValueChange?((value: string) => void) | undefinedChipTabsList
Prop
Type
ChipTabsTrigger
Prop
Type
notification?boolean | undefinedvaluestringdisabled?boolean | undefinedChipTabsCarousel
Prop
Type
swipeable?boolean | undefinedautoHeight?boolean | undefinedloop?boolean | undefineddragThreshold?number | undefinedonSettle?(() => void) | undefinedChipTabsContent
Prop
Type
valuestringExamples
Size=Medium
import * as React from "react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";
export default function ChipTabsSizeMedium() {
const [value, setValue] = React.useState("1");
return (
<>
<ChipTabsRoot
variant="neutralSolid"
size="medium"
defaultValue="1"
value={value}
onValueChange={(value) => setValue(value)}
>
<ChipTabsList>
<ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
<ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
<ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
</ChipTabsList>
</ChipTabsRoot>
{value === "1" && <div>content 1</div>}
{value === "2" && <div>content 2</div>}
{value === "3" && <div>content 3</div>}
</>
);
}Size=Large
import * as React from "react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";
export default function ChipTabsSizeLarge() {
const [value, setValue] = React.useState("1");
return (
<>
<ChipTabsRoot
variant="neutralSolid"
size="large"
defaultValue="1"
value={value}
onValueChange={(value) => setValue(value)}
>
<ChipTabsList>
<ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
<ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
<ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
</ChipTabsList>
</ChipTabsRoot>
{value === "1" && <div>content 1</div>}
{value === "2" && <div>content 2</div>}
{value === "3" && <div>content 3</div>}
</>
);
}Variant=Neutral Solid
import * as React from "react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";
export default function ChipTabsVariantNeutralSolid() {
const [value, setValue] = React.useState("1");
return (
<>
<ChipTabsRoot
variant="neutralSolid"
defaultValue="1"
value={value}
onValueChange={(value) => setValue(value)}
>
<ChipTabsList>
<ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
<ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
<ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
</ChipTabsList>
</ChipTabsRoot>
{value === "1" && <div>content 1</div>}
{value === "2" && <div>content 2</div>}
{value === "3" && <div>content 3</div>}
</>
);
}Variant=Neutral Outline
import * as React from "react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";
export default function ChipTabsVariantNeutralOutline() {
const [value, setValue] = React.useState("1");
return (
<>
<ChipTabsRoot
variant="neutralOutline"
defaultValue="1"
value={value}
onValueChange={(value) => setValue(value)}
>
<ChipTabsList>
<ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
<ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
<ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
</ChipTabsList>
</ChipTabsRoot>
{value === "1" && <div>content 1</div>}
{value === "2" && <div>content 2</div>}
{value === "3" && <div>content 3</div>}
</>
);
}Notification
import * as React from "react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";
export default function ChipTabsNotification() {
const [value, setValue] = React.useState("1");
return (
<>
<ChipTabsRoot
variant="neutralOutline"
size="medium"
defaultValue="1"
value={value}
onValueChange={(value) => setValue(value)}
>
<ChipTabsList>
<ChipTabsTrigger notification value="1">
라벨1
</ChipTabsTrigger>
<ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
<ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
</ChipTabsList>
</ChipTabsRoot>
{value === "1" && <div>content 1</div>}
{value === "2" && <div>content 2</div>}
{value === "3" && <div>content 3</div>}
</>
);
}With Scroll Fog
탭이 많아 가로 스크롤이 필요한 경우 Scroll Fog를 적용하여 좌우 스크롤 힌트를 제공할 수 있습니다.
권장 padding인 20px을 유지해야 합니다.
import { ScrollFog } from "@seed-design/react";
import {
ChipTabsCarousel,
ChipTabsList,
ChipTabsRoot,
ChipTabsTrigger,
} from "seed-design/ui/chip-tabs";
export default function ChipTabsWithScrollFog() {
return (
<div style={{ maxWidth: "360px" }}>
<ChipTabsRoot variant="neutralSolid" defaultValue="1">
<ChipTabsCarousel>
<ScrollFog placement={["left", "right"]}>
<ChipTabsList style={{ paddingLeft: "20px", paddingRight: "20px" }}>
{Array.from({ length: 15 }, (_, i) => (
<ChipTabsTrigger key={i + 1} value={String(i + 1)}>
라벨{i + 1}
</ChipTabsTrigger>
))}
</ChipTabsList>
</ScrollFog>
</ChipTabsCarousel>
</ChipTabsRoot>
</div>
);
}Last updated on