Tag Group

텍스트 태그를 수평으로 나열해 여러 속성·상태·메타데이터를 한눈에 보여주는 정보 요약 컴포넌트입니다.

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

Lynx 예제를 불러오는 중입니다.

import "./styles";

import { TagGroupRoot, TagGroupItem } from "@/components/ui/tag-group";

export default function Example() {
  return (
    <TagGroupRoot className="tag-group-preview__group">
      <TagGroupItem label="500m" />
      <TagGroupItem label="서초4동" />
      <TagGroupItem label="3분 전" />
    </TagGroupRoot>
  );
}

Installation

npx @seed-design/cli add ui:tag-group

pnpm dlx @seed-design/cli add ui:tag-group

yarn dlx @seed-design/cli add ui:tag-group

bun x @seed-design/cli add ui:tag-group

의존성 설치

npm install @seed-design/lynx-react

yarn add @seed-design/lynx-react

pnpm add @seed-design/lynx-react

bun add @seed-design/lynx-react

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

/**
 * @file ui:tag-group
 * @requires @seed-design/lynx-react@^1.0.0
 * @requires @seed-design/lynx-css@^1.0.0
 **/

/**
 * @see https://seed-design.io/lynx/components/tag-group
 */
import * as React from "@lynx-js/react";
import { TagGroup as SeedTagGroup } from "@seed-design/lynx-react";

export interface TagGroupRootProps extends SeedTagGroup.RootProps {}

export const TagGroupRoot = SeedTagGroup.Root;

export interface TagGroupItemProps extends Omit<SeedTagGroup.ItemProps, "children"> {
  label: React.ReactNode;
}

export const TagGroupItem = React.forwardRef<unknown, TagGroupItemProps>(
  ({ label, ...props }, ref) => {
    return (
      <SeedTagGroup.Item {...props} ref={ref}>
        <SeedTagGroup.ItemLabel>{label}</SeedTagGroup.ItemLabel>
      </SeedTagGroup.Item>
    );
  },
);
TagGroupItem.displayName = "TagGroupItem";

/**
 * 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

`TagGroupRoot`

`TagGroupItem`

Examples

Usage

import { TagGroupRoot, TagGroupItem } from "@/components/ui/tag-group";

export function App() {
  return (
    <TagGroupRoot size="t2">
      <TagGroupItem label="동네 인증" />
      <TagGroupItem label="매너 온도 42.0°C" />
      <TagGroupItem tone="brand" weight="bold" label="추천" />
    </TagGroupRoot>
  );
}

TagGroupRoot의 size, weight, tone은 항목의 기본값이며 개별 TagGroupItem에서 덮어쓸 수 있습니다. 구분자는 기본 "·"이고 separator로 바꿀 수 있습니다.

TagGroupItem의 flexShrink로 긴 태그의 축소 우선순위를 조절할 수 있습니다.

TagGroup은 읽기 전용입니다. 단일 선택에는 RadioGroup, 다중 선택에는 Checkbox를 사용하세요.

Sizes

Lynx 예제를 불러오는 중입니다.

import "./styles";

import { VStack } from "@seed-design/lynx-react";
import { TagGroupRoot, TagGroupItem } from "@/components/ui/tag-group";

export default function Example() {
  return (
    <VStack className="tag-group-preview" gap="spacingY.componentDefault">
      <TagGroupRoot size="t2" className="tag-group-preview__group">
        <TagGroupItem label="t2" />
        <TagGroupItem label="t2" />
        <TagGroupItem label="t2" />
      </TagGroupRoot>
      <TagGroupRoot size="t3" className="tag-group-preview__group">
        <TagGroupItem label="t3" />
        <TagGroupItem label="t3" />
        <TagGroupItem label="t3" />
      </TagGroupRoot>
      <TagGroupRoot size="t4" className="tag-group-preview__group">
        <TagGroupItem label="t4" />
        <TagGroupItem label="t4" />
        <TagGroupItem label="t4" />
      </TagGroupRoot>
    </VStack>
  );
}

Weights

Lynx 예제를 불러오는 중입니다.

import "./styles";

import { VStack } from "@seed-design/lynx-react";
import { TagGroupRoot, TagGroupItem } from "@/components/ui/tag-group";

export default function Example() {
  return (
    <VStack className="tag-group-preview" gap="spacingY.componentDefault">
      <TagGroupRoot weight="regular" className="tag-group-preview__group">
        <TagGroupItem label="regular" />
        <TagGroupItem label="regular" />
        <TagGroupItem label="regular" />
      </TagGroupRoot>
      <TagGroupRoot weight="bold" className="tag-group-preview__group">
        <TagGroupItem label="bold" />
        <TagGroupItem label="bold" />
        <TagGroupItem label="bold" />
      </TagGroupRoot>
    </VStack>
  );
}

Tones

Lynx 예제를 불러오는 중입니다.

import "./styles";

import { VStack } from "@seed-design/lynx-react";
import { TagGroupRoot, TagGroupItem } from "@/components/ui/tag-group";

export default function Example() {
  return (
    <VStack className="tag-group-preview" gap="spacingY.componentDefault">
      <TagGroupRoot tone="neutralSubtle" className="tag-group-preview__group">
        <TagGroupItem label="neutralSubtle" />
        <TagGroupItem label="neutralSubtle" />
        <TagGroupItem label="neutralSubtle" />
      </TagGroupRoot>
      <TagGroupRoot tone="neutral" className="tag-group-preview__group">
        <TagGroupItem label="neutral" />
        <TagGroupItem label="neutral" />
        <TagGroupItem label="neutral" />
      </TagGroupRoot>
      <TagGroupRoot tone="brand" className="tag-group-preview__group">
        <TagGroupItem label="brand" />
        <TagGroupItem label="brand" />
        <TagGroupItem label="brand" />
      </TagGroupRoot>
    </VStack>
  );
}

With Icons

Lynx Registry의 TagGroupItem은 prefixIcon과 suffixIcon을 제공하지 않습니다. 아이콘이 필요한 정보는 앱에서 별도 레이아웃으로 구성하세요.

Customizing `TagGroupItem`

개별 항목의 tone과 weight만 다르게 지정할 수 있습니다.

Lynx 예제를 불러오는 중입니다.

import "./styles";

import { VStack } from "@seed-design/lynx-react";
import { TagGroupRoot, TagGroupItem } from "@/components/ui/tag-group";

export default function Example() {
  return (
    <VStack className="tag-group-preview" gap="spacingY.componentDefault">
      <TagGroupRoot className="tag-group-preview__group">
        <TagGroupItem weight="bold" tone="neutral" label="4.5" />
        <TagGroupItem label="후기 37" />
        <TagGroupItem label="단골 12" />
      </TagGroupRoot>
      <TagGroupRoot tone="neutral" className="tag-group-preview__group">
        <TagGroupItem tone="brand" label="인증됨" />
        <TagGroupItem label="10" />
        <TagGroupItem label="3" />
      </TagGroupRoot>
    </VStack>
  );
}

Customizing Separators

separator로 구분 기호를 바꿀 수 있습니다. 문자열 앞뒤 공백은 제거되므로 공백만 있는 구분자는 빈 문자열로 렌더링됩니다.

Lynx 예제를 불러오는 중입니다.

import "./styles";

import { VStack } from "@seed-design/lynx-react";
import { TagGroupRoot, TagGroupItem } from "@/components/ui/tag-group";

export default function Example() {
  return (
    <VStack className="tag-group-preview" gap="spacingY.componentDefault">
      <TagGroupRoot separator=" | " size="t4" className="tag-group-preview__group">
        <TagGroupItem label="가" />
        <TagGroupItem label="나" />
        <TagGroupItem label="다" />
        <TagGroupItem label="라" />
      </TagGroupRoot>
      <TagGroupRoot separator=" / " size="t4" className="tag-group-preview__group">
        <TagGroupItem label="가" />
        <TagGroupItem label="나" />
        <TagGroupItem label="다" />
        <TagGroupItem label="라" />
      </TagGroupRoot>
    </VStack>
  );
}

Wrapping Behavior

컨테이너 너비를 초과하면 구분자와 뒤따르는 항목이 함께 다음 줄로 이동합니다. 아이콘이나 한 줄 말줄임이 필요하면 별도 레이아웃을 구성하세요.

Lynx 예제를 불러오는 중입니다.

import "./styles";

import { Text, VStack } from "@seed-design/lynx-react";
import { TagGroupRoot, TagGroupItem } from "@/components/ui/tag-group";

export default function Example() {
  return (
    <VStack className="tag-group-preview__wrapping-container" gap="x1" align="flex-start">
      <Text textStyle="t2Medium">default (wrap)</Text>
      <TagGroupRoot className="tag-group-preview__wrapping-group">
        <TagGroupItem label="부산광역시 해운대구" />
        <TagGroupItem label="123 456 789 012 345" />
        <TagGroupItem label="Ut minim laboris enim" />
      </TagGroupRoot>
    </VStack>
  );
}

웹 버전과의 차이

웹은 inline text flow로 항목 안의 텍스트도 줄바꿈할 수 있습니다. Lynx는 항목 단위로 다음 줄에 배치합니다.
문자열 구분자의 앞뒤 공백은 제거하고 컴포넌트가 일정한 간격을 적용합니다.
구분자는 스크린 리더에서 제외합니다. Root와 Item에는 전달한 accessibility-* 속성을 적용합니다.
이벤트는 onClick 대신 bindtap 또는 main-thread:bindtap으로 받습니다.

미지원 prop

truncate
asChild
prefixIcon, suffixIcon

Tag Group

Manual Installation

의존성 설치

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

목차