Skip to Content
ComponentsIcignalNavigationTabs

Tabs

탭 네비게이션 컴포넌트입니다.

개요

Tabs는 관련된 콘텐츠를 탭으로 전환하며 표시하는 컴포넌트입니다. iCignal Tabs는 iCignal 브랜드 스타일이 적용되어 있으며, 대시보드 뷰 전환과 리포트 섹션 구분에 최적화되어 있습니다. Foundation Tabs의 모든 기능을 상속합니다.

주요 특징:

  • 탭 전환 애니메이션
  • 키보드 네비게이션
  • iCignal 브랜드 강조 색상

사용 사례:

  • iCignal 대시보드 뷰 전환
  • 리포트 섹션 구분
  • 데이터 소스 선택
  • 설정 카테고리

설치

npx @vortex/cli add tabs --package icignal

기본 사용법

import "@vortex/ui-icignal/theme"; // iCignal 테마 적용
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@vortex/ui-icignal";
 
export default function Example() {
  return (
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">탭 1</TabsTrigger>
        <TabsTrigger value="tab2">탭 2</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">
        <p>탭 1 내용</p>
      </TabsContent>
      <TabsContent value="tab2">
        <p>탭 2 내용</p>
      </TabsContent>
    </Tabs>
  );
}

iCignal 브랜딩

iCignal 특화 사용 가이드

대시보드 뷰 전환:

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@vortex/ui-icignal";
import { Card, CardContent } from "@vortex/ui-icignal";
import { BarChart2, Users, TrendingUp } from "lucide-react";
 
<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">
      <BarChart2 size={16} className="mr-xs" />
      개요
    </TabsTrigger>
    <TabsTrigger value="users">
      <Users size={16} className="mr-xs" />
      사용자
    </TabsTrigger>
    <TabsTrigger value="conversion">
      <TrendingUp size={16} className="mr-xs" />
      전환
    </TabsTrigger>
  </TabsList>
 
  <TabsContent value="overview">
    <Card>
      <CardContent className="pt-lg">{/* Overview charts */}</CardContent>
    </Card>
  </TabsContent>
 
  <TabsContent value="users">
    <Card>
      <CardContent className="pt-lg">{/* User analytics */}</CardContent>
    </Card>
  </TabsContent>
 
  <TabsContent value="conversion">
    <Card>
      <CardContent className="pt-lg">{/* Conversion metrics */}</CardContent>
    </Card>
  </TabsContent>
</Tabs>;

리포트 섹션:

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@vortex/ui-icignal";
 
<Tabs defaultValue="summary">
  <TabsList>
    <TabsTrigger value="summary">요약</TabsTrigger>
    <TabsTrigger value="details">상세 데이터</TabsTrigger>
    <TabsTrigger value="insights">인사이트</TabsTrigger>
    <TabsTrigger value="recommendations">권장사항</TabsTrigger>
  </TabsList>
 
  <TabsContent value="summary">
    <div className="prose max-w-none">
      <h3>리포트 요약</h3>
      <p>주요 지표와 트렌드 분석...</p>
    </div>
  </TabsContent>
 
  <TabsContent value="details">
    <Table>{/* Detailed data table */}</Table>
  </TabsContent>
 
  <TabsContent value="insights">
    <ul className="space-y-md">{/* Insight list */}</ul>
  </TabsContent>
 
  <TabsContent value="recommendations">
    <div className="space-y-md">{/* Recommendations */}</div>
  </TabsContent>
</Tabs>;

데이터 소스 선택:

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@vortex/ui-icignal";
import { Globe, Smartphone, Code } from "lucide-react";
 
<Card>
  <CardHeader>
    <h3 className="font-semibold">데이터 소스별 분석</h3>
  </CardHeader>
  <CardContent>
    <Tabs defaultValue="web">
      <TabsList>
        <TabsTrigger value="web">
          <Globe size={16} className="mr-xs" />
          웹사이트
        </TabsTrigger>
        <TabsTrigger value="mobile">
          <Smartphone size={16} className="mr-xs" />
          모바일 앱
        </TabsTrigger>
        <TabsTrigger value="api">
          <Code size={16} className="mr-xs" />
          API
        </TabsTrigger>
      </TabsList>
 
      <TabsContent value="web">{/* Web analytics */}</TabsContent>
      <TabsContent value="mobile">{/* Mobile analytics */}</TabsContent>
      <TabsContent value="api">{/* API analytics */}</TabsContent>
    </Tabs>
  </CardContent>
</Card>;

Foundation과의 차이점

속성FoundationiCignal
활성 색상중립 블루iCignal Blue (#2196f3)
브랜드 적용없음iCignal Dashboard 패턴
사용 맥락범용Analytics 뷰 전환
테마중립적 테마iCignal 테마 (@vortex/ui-icignal/theme)

import 경로 차이:

// Foundation
import { Tabs } from "@vortex/ui-foundation";
 
// iCignal
import "@vortex/ui-icignal/theme"; // 테마 import 필수
import { Tabs } from "@vortex/ui-icignal";

Props API

PropTypeDefaultDescription
defaultValuestring-기본 선택 탭
valuestring-선택된 탭
onValueChange(value) => void-탭 변경 핸들러

예제

예제 1: iCignal Analytics 대시보드

import "@vortex/ui-icignal/theme";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@vortex/ui-icignal";
import { Card, CardHeader, CardContent } from "@vortex/ui-icignal";
import { BarChart2, Users, ShoppingCart, TrendingUp } from "lucide-react";
 
export default function AnalyticsDashboard() {
  return (
    <div className="p-lg">
      <h1 className="text-2xl font-bold mb-lg">Analytics Dashboard</h1>
 
      <Tabs defaultValue="overview">
        <TabsList>
          <TabsTrigger value="overview">
            <BarChart2 size={16} className="mr-xs" />
            개요
          </TabsTrigger>
          <TabsTrigger value="audience">
            <Users size={16} className="mr-xs" />
            사용자
          </TabsTrigger>
          <TabsTrigger value="ecommerce">
            <ShoppingCart size={16} className="mr-xs" />
            전자상거래
          </TabsTrigger>
          <TabsTrigger value="goals">
            <TrendingUp size={16} className="mr-xs" />
            목표
          </TabsTrigger>
        </TabsList>
 
        <TabsContent value="overview" className="mt-lg">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-lg">
            <Card>
              <CardHeader>
                <h3 className="font-semibold">트래픽 추이</h3>
              </CardHeader>
              <CardContent>{/* Line chart */}</CardContent>
            </Card>
            <Card>
              <CardHeader>
                <h3 className="font-semibold">사용자 분포</h3>
              </CardHeader>
              <CardContent>{/* Pie chart */}</CardContent>
            </Card>
          </div>
        </TabsContent>
 
        <TabsContent value="audience" className="mt-lg">
          <Card>
            <CardContent className="pt-lg">
              {/* Audience analytics */}
            </CardContent>
          </Card>
        </TabsContent>
 
        <TabsContent value="ecommerce" className="mt-lg">
          <Card>
            <CardContent className="pt-lg">
              {/* E-commerce metrics */}
            </CardContent>
          </Card>
        </TabsContent>
 
        <TabsContent value="goals" className="mt-lg">
          <Card>
            <CardContent className="pt-lg">{/* Goal tracking */}</CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}

관련 컴포넌트

Last updated on
Pagination