LogoCoUI

Popover

팝오버 컴포넌트

Popover#

트리거 요소 근처에 부가 콘텐츠를 표시하는 팝오버 컴포넌트입니다.

사용법#

// 기본 팝오버
CouiPopover(
  trigger: CouiButton(
    onPressed: null,
    child: Text('정보 보기'),
  ),
  child: Padding(
    padding: EdgeInsets.all(kDefaultPadding),
    child: Column(
      children: [
        Text('팝오버 제목', style: TextStyle(fontWeight: FontWeight.bold)),
        Text('팝오버 내용입니다.'),
      ],
    ),
  ),
)

// 위치 지정
CouiPopover(
  placement: PopoverPlacement.top,
  trigger: Icon(Icons.info),
  child: Text('위쪽에 표시됩니다'),
)

// 프로그래밍 방식 제어
final popoverController = CouiPopoverController();

CouiPopover(
  controller: popoverController,
  trigger: trigger,
  child: content,
)
// popoverController.show() / popoverController.hide()

Popover(
  trigger: Button(onClick: null, child: Text('정보 보기')),
  child: Column(
    children: [
      Text('팝오버 제목'),
      Text('팝오버 내용입니다.'),
    ],
  ),
)

Popover(
  placement: PopoverPlacement.top,
  trigger: Icon(Icons.info),
  child: Text('위쪽에 표시됩니다'),
)

Props / Parameters#

속성타입기본값설명
triggerWidget필수팝오버를 여는 트리거 위젯
childWidget필수팝오버 내용
placement PopoverPlacement bottom 표시 위치
triggerMode PopoverTriggerMode tap 트리거 방식
controller CouiPopoverController? null 팝오버 컨트롤러
dismissible bool true 외부 클릭으로 닫기
offset Offset Offset.zero 위치 보정값

변형 (Variants)#

위치#

CouiPopover(placement: PopoverPlacement.top, ...)
CouiPopover(placement: PopoverPlacement.bottom, ...)
CouiPopover(placement: PopoverPlacement.left, ...)
CouiPopover(placement: PopoverPlacement.right, ...)
CouiPopover(placement: PopoverPlacement.topStart, ...)
CouiPopover(placement: PopoverPlacement.bottomEnd, ...)

트리거 방식#

// 클릭으로 열기
CouiPopover(triggerMode: PopoverTriggerMode.tap, ...)

// 호버로 열기
CouiPopover(triggerMode: PopoverTriggerMode.hover, ...)

화살표 표시#

CouiPopover(
  showArrow: true,
  trigger: trigger,
  child: content,
)