LogoCoUI

Navigation

네비게이션 바 컴포넌트

Navigation#

앱의 주요 탐색을 위한 네비게이션 바 컴포넌트입니다.

사용법#

// 상단 네비게이션 바
CouiNavBar(
  title: Text('앱 제목'),
  leading: CouiButton.ghost(
    onPressed: handleBack,
    child: Icon(Icons.arrow_back),
  ),
  actions: [
    CouiButton.ghost(
      onPressed: handleSearch,
      child: Icon(Icons.search),
    ),
  ],
)

// 하단 네비게이션
CouiBottomNav(
  currentIndex: selectedIndex,
  onTap: handleNavTap,
  items: [
    CouiBottomNavItem(icon: Icons.home, label: '홈'),
    CouiBottomNavItem(icon: Icons.search, label: '검색'),
    CouiBottomNavItem(icon: Icons.person, label: '프로필'),
  ],
)

NavBar(
  title: Text('앱 제목'),
  leading: Button.ghost(onClick: handleBack, child: Icon(Icons.arrow_back)),
  actions: [
    Button.ghost(onClick: handleSearch, child: Icon(Icons.search)),
  ],
)

BottomNav(
  currentIndex: selectedIndex,
  onTap: handleNavTap,
  items: [
    BottomNavItem(icon: Icons.home, label: '홈'),
    BottomNavItem(icon: Icons.search, label: '검색'),
    BottomNavItem(icon: Icons.person, label: '프로필'),
  ],
)

Props / Parameters#

CouiNavBar#

속성타입기본값설명
titleWidget?null네비게이션 제목
leadingWidget?null좌측 위젯
actions List<Widget>? null 우측 액션 위젯 목록
elevatedbooltrue그림자 표시

CouiBottomNav#

속성타입기본값설명
currentIndexint0현재 선택 인덱스
onTap ValueChanged<int>? null 탭 콜백
items List<CouiBottomNavItem> 필수 네비게이션 항목

변형 (Variants)#

사이드 네비게이션#

CouiSideNav(
  currentIndex: selectedIndex,
  onTap: handleNavTap,
  items: [
    CouiSideNavItem(icon: Icons.dashboard, label: '대시보드'),
    CouiSideNavItem(icon: Icons.analytics, label: '분석'),
    CouiSideNavItem(icon: Icons.settings, label: '설정'),
  ],
)

배지 포함 네비게이션#

CouiBottomNavItem(
  icon: Icons.notifications,
  label: '알림',
  badge: CouiBadge.count(count: 5),
)