Toggle

토글 스위치 컴포넌트

Toggle#

켜기/끄기 상태를 전환하는 토글 스위치 컴포넌트입니다.

사용법#

// 기본 토글
CouiToggle(
  value: isDarkMode,
  onChanged: handleDarkModeToggle,
)

// 라벨 포함
CouiToggle(
  value: isNotificationEnabled,
  onChanged: handleNotificationToggle,
  label: '알림 수신',
)

// 크기 지정
CouiToggle(
  value: isActive,
  onChanged: handleToggle,
  size: ToggleSize.lg,
)

Toggle(
  checked: isDarkMode,
  onChange: handleDarkModeToggle,
)

Toggle(
  checked: isNotificationEnabled,
  onChange: handleNotificationToggle,
  label: '알림 수신',
)

Props / Parameters#

속성	타입	기본값	설명
`value`	`bool`	필수	현재 상태
`onChanged`	`ValueChanged<bool>?`	`null`	상태 변경 콜백
`label`	`String?`	`null`	라벨 텍스트
`size`	`ToggleSize`	`md`	토글 크기
`enabled`	`bool`	`true`	활성화 여부

변형 (Variants)#

크기#

CouiToggle(value: v1, onChanged: handle, size: ToggleSize.sm)
CouiToggle(value: v2, onChanged: handle, size: ToggleSize.md)
CouiToggle(value: v3, onChanged: handle, size: ToggleSize.lg)

설정 목록에서 사용#

Column(
  children: [
    CouiToggle(
      value: settings.darkMode,
      onChanged: handleDarkMode,
      label: '다크 모드',
    ),
    CouiToggle(
      value: settings.notifications,
      onChanged: handleNotifications,
      label: '푸시 알림',
    ),
    CouiToggle(
      value: settings.autoSave,
      onChanged: handleAutoSave,
      label: '자동 저장',
    ),
  ],
)