Dock

화면 하단에 고정되는 독 스타일 내비게이션 바

Dock#

모바일/태블릿 앱 하단에 고정되는 아이콘 + 라벨 기반 내비게이션 바입니다. 5단계 사이즈(xs/sm/md/lg/xl)를 지원하며 xs/sm에서는 라벨이 자동으로 숨겨집니다.

Live Preview#

Web

Flutter

Loading Flutter...

class DockDefaultExample extends StatefulComponent {
  const DockDefaultExample({super.key});

  @override
  State<DockDefaultExample> createState() => _DockDefaultExampleState();
}

class _DockDefaultExampleState extends State<DockDefaultExample> {
  int _index = 0;

  @override
  Component build(BuildContext context) {
    CoreDockItemData<Component> item(int idx, IconName icon, String label) {
      return CoreDockItemData<Component>(
        icon: CoIcon(icon),
        label: label,
        isActive: _index == idx,
        onPressed: () => setState(() => _index = idx),
      );
    }

    return CoDock(
      items: [
        item(0, CoLucideIcons.house, 'Home'),
        item(1, CoLucideIcons.search, 'Search'),
        item(2, CoLucideIcons.user, 'Profile'),
      ],
    );
  }
}

class DockDefaultExample extends StatefulWidget {
  const DockDefaultExample({super.key});

  @override
  State<DockDefaultExample> createState() => _DockDefaultExampleState();
}

class _DockDefaultExampleState extends State<DockDefaultExample> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    CoreDockItemData<Widget> item(int idx, IconName icon, String label) {
      return CoreDockItemData<Widget>(
        icon: CoIcon(icon),
        label: label,
        isActive: _index == idx,
        onPressed: () => setState(() => _index = idx),
      );
    }

    return CoDock(
      items: [
        item(0, CoLucideIcons.house, 'Home'),
        item(1, CoLucideIcons.search, 'Search'),
        item(2, CoLucideIcons.user, 'Profile'),
      ],
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

앱의 최상위 3~5개 탭 사이를 이동할 때
현재 위치를 시각적으로 표시해야 할 때 (active item)

대신 다른 컴포넌트를 사용하세요:

NavigationBar: 데스크톱 상단 전역 내비게이션
Tabs: 컨텐츠 내부의 탭 전환

기본 사용법 (Basic Usage)#

CoDock(
  items: [
    CoreDockItemData<Widget>(
      icon: CoIcon(CoLucideIcons.house),
      label: 'Home',
      isActive: true,
      onPressed: () {},
    ),
    CoreDockItemData<Widget>(
      icon: CoIcon(CoLucideIcons.search),
      label: 'Search',
      onPressed: () {},
    ),
    CoreDockItemData<Widget>(
      icon: CoIcon(CoLucideIcons.user),
      label: 'Profile',
      onPressed: () {},
    ),
  ],
)

Props / Parameters#

`CoDock`#

속성	타입	기본값	설명
`items`	`List<CoreDockItemData<W>>`	필수	렌더링할 아이템 목록
`size`	`CoreDockSize?`	`md`	xs/sm/md/lg/xl 높이 스텝
`backgroundColor`	`Color?` / `String?`	null	배경색 override
`semanticLabel`	`String?`	`'navigation'`	스크린리더 landmark label

`CoreDockItemData<W>`#

속성	타입	기본값	설명
`icon`	`W`	필수	아이콘 위젯/컴포넌트
`label`	`String?`	null	아이콘 아래 텍스트 (xs/sm에서는 숨김)
`isActive`	`bool`	false	활성 상태 표시
`onPressed`	`VoidCallback?`	null	탭 핸들러

사이즈 (Sizes)#

사이즈	높이 (px)	아이콘 (px)	라벨 표시
`xs`	48	20	❌
`sm`	56	22	❌
`md` (기본)	64	24	✅
`lg`	72	28	✅
`xl`	80	32	✅

크로스 플랫폼 차이점 (Platform Differences)#

항목	Flutter	Web
클래스명	`CoDock`	`CoDock`
아이템 타입	`CoreDockItemData<Widget>`	`CoreDockItemData<Component>`
backgroundColor	`Color?`	`String?` (CSS)
클릭 커서	`MouseRegion(cursor: click)`	`cursor-pointer` class
렌더링	`Container` + `Row(spaceAround)`	`<div>` flex + 토큰 기반

NavigationBar: 상단 내비게이션
Tabs: 컨텐츠 내부 탭