Tinyrack

Tabs

슬라이딩 선택 표시선으로 콘텐츠 패널을 전환해요.

슬라이딩 선택 표시선으로 콘텐츠 패널을 전환해요.

핵심 속성

속성설명
너비TRTabsWidth.fill이 기본값이며 사용할 수 있는 스트립 너비를 탭마다 나눠요. TRTabsWidth.fixed는 각 탭에 TRMeasurements.measureSm 논리 픽셀을 사용하고 탭이 넘치면 가로로 스크롤해요.
드래그TRTabsDragConfiguration을 넘겨 기능을 켜세요. TRTabDropDetails는 목록을 직접 바꾸지 않고 출발 그룹, 대상 그룹, 탭 값, 삽입 위치를 알려줘요.

TRTabs는 하나의 전체 너비 스트립에서 패널, 닫기, 액션, 드래그 기능을 선택적으로 조합해요. 문서 탭을 measure-sm 너비로 유지하려면 tabWidth: TRTabsWidth.fixed를 사용하고, 기본값은 스트립을 채워요. 탭 소유권과 저장은 앱에서 관리하세요.

설치

패키지를 추가한 뒤 공개 라이브러리를 가져오세요.

flutter pub add tinyrack_ui
import 'package:tinyrack_ui/tinyrack_ui.dart';

플레이그라운드

사용법

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

TRTabs(
  tabs: const [
    TRTabsTab(value: 'overview', label: 'Overview'),
    TRTabsTab(value: 'settings', label: 'Settings'),
  ],
  panelBuilder: buildPanel,
)

예시

크기 고유 링크

md and lg로 탭 바 크기가 바뀌며 활성 표시는 그대로 유지돼요.

패널 구성 고유 링크

panelBuilder에서 활성 값을 분기해 탭마다 패널을 지정하세요.

조합 가능한 탭 스트립 고유 링크

창에서 활성 문서를 관리한다면 panelBuilder를 생략하고 문서 탭을 measure-sm 너비로 유지하면서 닫기, 선행 아이콘, 액션, 드래그를 필요한 경우에만 추가하세요.

API

Tabs는 Flutter의 네이티브 상태와 콜백을 유지하고 Tinyrack 토큰을 기본값으로 사용해요.