Tabs

탭 컴포넌트

Tabs#

콘텐츠를 탭으로 구분하여 표시하는 컴포넌트입니다.

사용법#

CouiTabs(
  onChanged: handleTabChange,
  tabs: [
    CouiTab(label: '개요'),
    CouiTab(label: '리뷰'),
    CouiTab(label: '관련 상품'),
  ],
  children: [
    OverviewPanel(),
    ReviewPanel(),
    RelatedProductsPanel(),
  ],
)

// 컨트롤러 사용
final tabController = CouiTabController(length: 3);

CouiTabs(
  controller: tabController,
  tabs: [
    CouiTab(label: '탭 1'),
    CouiTab(label: '탭 2'),
    CouiTab(label: '탭 3'),
  ],
  children: [Tab1Content(), Tab2Content(), Tab3Content()],
)

Tabs(
  onChange: handleTabChange,
  tabs: [
    Tab(label: '개요'),
    Tab(label: '리뷰'),
    Tab(label: '관련 상품'),
  ],
  children: [
    OverviewPanel(),
    ReviewPanel(),
    RelatedProductsPanel(),
  ],
)

Props / Parameters#

속성	타입	기본값	설명
`tabs`	`List<CouiTab>`	필수	탭 목록
`children`	`List<Widget>`	필수	탭 콘텐츠
`controller`	`CouiTabController?`	`null`	탭 컨트롤러
`onChanged`	`ValueChanged<int>?`	`null`	탭 변경 콜백
`variant`	`TabVariant`	`line`	탭 스타일 변형
`initialIndex`	`int`	`0`	초기 선택 탭

변형 (Variants)#

라인 탭#

CouiTabs(variant: TabVariant.line, tabs: tabs, children: contents)

박스 탭#

CouiTabs(variant: TabVariant.boxed, tabs: tabs, children: contents)

필 탭#

CouiTabs(variant: TabVariant.filled, tabs: tabs, children: contents)

아이콘 포함#

CouiTab(
  label: '설정',
  icon: Icon(Icons.settings),
)

비활성화 탭#

CouiTab(label: '준비 중', enabled: false)