Chip Tabs

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.

content 1

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 chip-tabs

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

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

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

Props

`ChipTabsRoot`

Prop	Type	Default
`asChild?`	`boolean`	`false`
`present?`	`boolean`	`false`
`unmountOnExit?`	`boolean`	`false`
`lazyMount?`	`boolean`	`false`
`onValueChange?`	`((value: string) => void)`	-
`defaultValue?`	`string`	-
`value?`	`string`	-
`orientation?`	`"horizontal" \| "vertical"`	-
`stickyList?`	`boolean`	`false`
`contentLayout?`	`"fill" \| "hug"`	`hug`
`variant?`	`"neutralSolid" \| "brandSolid"`	`neutralSolid`

`ChipTabsList`

Prop	Type	Default
`asChild?`	`boolean`	`false`

`ChipTabsTrigger`

Prop	Type	Default
`asChild?`	`boolean`	`false`
`disabled?`	`boolean`	-
`value?`	`string`	-

`ChipTabsCarousel`

Prop	Type	Default
`onSettle?`	`(() => void)`	-
`dragThreshold?`	`number`	-
`loop?`	`boolean`	-
`autoHeight?`	`boolean`	-
`swipeable?`	`boolean`	-

`ChipTabsContent`

Prop	Type	Default
`value?`	`string`	-
`asChild?`	`boolean`	`false`

Examples

Neutral Solid

content 1

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>}
    </>
  );
}

Brand Solid

content 1

import * as React from "react";
import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

export default function ChipTabsVariantBrandSolid() {
  const [value, setValue] = React.useState("1");
  return (
    <>
      <ChipTabsRoot
        variant="brandSolid"
        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>}
    </>
  );
}

Stackflow

Woolston

content 1

import * as React from "react";

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

import AppScreen from "@/components/stackflow/ActivityLayout";
import type { ActivityComponentType } from "@stackflow/react/future";

declare module "@stackflow/config" {
  interface Register {
    "chip-tabs-basic": unknown;
  }
}

const ChipTabsBasicActivity: ActivityComponentType<"chip-tabs-basic"> = () => {
  const [value, setValue] = React.useState("1");

  const commonStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#eeeeee",
    height: "100%",
  };

  return (
    <AppScreen>
      <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 style={commonStyle}>content 1</div>}
      {value === "2" && <div style={commonStyle}>content 2</div>}
      {value === "3" && <div style={commonStyle}>content 3</div>}
    </AppScreen>
  );
};

export default ChipTabsBasicActivity;

Chip Tabs

Manual Installation

On this page