Drawer

드로어/사이드바 컴포넌트

Drawer#

화면 측면에서 슬라이드하여 나타나는 패널 컴포넌트입니다.

사용법#

// 기본 드로어
CouiDrawer(
  title: '설정',
  child: Column(
    children: [
      CouiToggle(value: darkMode, onChanged: handleDarkMode, label: '다크 모드'),
      CouiToggle(value: notifications, onChanged: handleNotif, label: '알림'),
    ],
  ),
)

// 드로어 열기
showCouiDrawer(
  context: context,
  builder: (context) => CouiDrawer(
    title: '필터',
    child: FilterPanel(),
    footer: CouiButton(
      onPressed: handleApplyFilter,
      child: Text('적용'),
    ),
  ),
);

// 위치 지정
CouiDrawer(
  placement: DrawerPlacement.right,
  title: '상세 정보',
  child: DetailPanel(),
)

Drawer(
  title: '설정',
  children: [
    Toggle(checked: darkMode, onChange: handleDarkMode, label: '다크 모드'),
    Toggle(checked: notifications, onChange: handleNotif, label: '알림'),
  ],
)

Drawer(
  placement: DrawerPlacement.right,
  title: '상세 정보',
  child: DetailPanel(),
)

Props / Parameters#

속성	타입	기본값	설명
`title`	`String?`	`null`	드로어 제목
`placement`	`DrawerPlacement`	`left`	표시 위치
`size`	`DrawerSize`	`md`	드로어 너비
`dismissible`	`bool`	`true`	외부 클릭으로 닫기
`showOverlay`	`bool`	`true`	배경 오버레이 표시
`child`	`Widget?`	`null`	드로어 내용
`footer`	`Widget?`	`null`	하단 영역

변형 (Variants)#

위치#

CouiDrawer(placement: DrawerPlacement.left, child: content)   // 좌측
CouiDrawer(placement: DrawerPlacement.right, child: content)  // 우측
CouiDrawer(placement: DrawerPlacement.top, child: content)    // 상단
CouiDrawer(placement: DrawerPlacement.bottom, child: content) // 하단

크기#

크기	값	너비
SM	`DrawerSize.sm`	280px
MD	`DrawerSize.md`	360px
LG	`DrawerSize.lg`	480px
XL	`DrawerSize.xl`	640px

네비게이션 드로어#

CouiDrawer(
  title: '메뉴',
  child: CouiSideNav(
    currentIndex: selectedIndex,
    onTap: handleNavTap,
    items: navItems,
  ),
)