Tabs

Playground

'use client';
import { useState } from 'react';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@mbsw/ui';
import { Plus } from 'lucide-react';
import { Icon } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "leadingIcon": false,
    "disabled": false
  };
  const [value, setValue] = useState('0');
  const items = ['Tab1', 'Tab2', 'Tab3'];
  return (
    <Tabs
      value={value}
      onValueChange={setValue}
      style={{
        width: 'fit-content',
        maxWidth: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      }}
    >
      <TabsList aria-label={"예제 탭"}>
        {items.map((label, index) => (
          <TabsTrigger
            key={index}
            value={String(index)}
            disabled={settings.disabled}
            leading={
              settings.leadingIcon ? (
                <Icon icon={Plus} size="sm" decorative />
              ) : undefined
            }
          >
            {label}
          </TabsTrigger>
        ))}
      </TabsList>
      {items.map((_, index) => (
        <TabsContent key={index} value={String(index)} />
      ))}
    </Tabs>
  );
}

Properties

Leading icon

Disabled

Usage

TabsList에 TabsTrigger를 넣고 같은 value를 가진 TabsContent를 연결합니다. 다른 URL로 이동하는 탐색에는 탭 대신 링크를 사용합니다.

'use client';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@mbsw/ui';

export default function Example() {
  return (
    <Tabs defaultValue="0">
      <TabsList aria-label={"예제 탭"}>
        <TabsTrigger value="0">Tab1</TabsTrigger>
        <TabsTrigger value="1">Tab2</TabsTrigger>
        <TabsTrigger value="2">Tab3</TabsTrigger>
      </TabsList>
      <TabsContent value="0" />
      <TabsContent value="1" />
      <TabsContent value="2" />
    </Tabs>
  );
}

Playground의 Code 탭에서 현재 설정과 동작이 포함된 예제 전체를 복사할 수 있습니다. 공통 CSS 설치는 설치하기를 확인하세요.

Composition

TabsTabsContentTabsListTabsTrigger