LogoCoUI

Menu

메뉴 및 컨텍스트 메뉴 컴포넌트

Menu#

액션 목록을 표시하는 메뉴 컴포넌트입니다. 드롭다운 및 컨텍스트 메뉴로 사용할 수 있습니다.

사용법#

// 드롭다운 메뉴
CouiMenu(
  trigger: CouiButton(
    onPressed: null,
    child: Text('메뉴'),
  ),
  items: [
    CouiMenuItem(
      label: '편집',
      icon: Icons.edit,
      onTap: handleEdit,
    ),
    CouiMenuItem(
      label: '복사',
      icon: Icons.copy,
      onTap: handleCopy,
    ),
    CouiMenuDivider(),
    CouiMenuItem(
      label: '삭제',
      icon: Icons.delete,
      onTap: handleDelete,
      destructive: true,
    ),
  ],
)

// 컨텍스트 메뉴
CouiContextMenu(
  items: menuItems,
  child: Text('우클릭하세요'),
)

Menu(
  trigger: Button(onClick: null, child: Text('메뉴')),
  items: [
    MenuItem(label: '편집', icon: Icons.edit, onClick: handleEdit),
    MenuItem(label: '복사', icon: Icons.copy, onClick: handleCopy),
    MenuDivider(),
    MenuItem(label: '삭제', icon: Icons.delete, onClick: handleDelete),
  ],
)

Props / Parameters#

속성타입기본값설명
triggerWidget필수메뉴를 여는 트리거 위젯
items List<CouiMenuEntry> 필수 메뉴 항목 목록
placement MenuPlacement bottomStart 메뉴 표시 위치
onOpen VoidCallback? null 메뉴 열림 콜백
onClose VoidCallback? null 메뉴 닫힘 콜백

변형 (Variants)#

서브메뉴#

CouiMenu(
  trigger: trigger,
  items: [
    CouiMenuItem(label: '파일', onTap: handleFile),
    CouiSubMenu(
      label: '내보내기',
      items: [
        CouiMenuItem(label: 'PDF', onTap: handleExportPdf),
        CouiMenuItem(label: 'CSV', onTap: handleExportCsv),
      ],
    ),
  ],
)

단축키 표시#

CouiMenuItem(
  label: '붙여넣기',
  icon: Icons.paste,
  shortcut: 'Ctrl+V',
  onTap: handlePaste,
)

체크 메뉴#

CouiMenuCheckItem(
  label: '자동 저장',
  checked: isAutoSave,
  onChanged: handleAutoSaveToggle,
)