WindowPanel

타이틀 바 + 컨트롤(최소화/최대화/닫기) + 콘텐츠 영역을 가진 윈도우 스타일 패널

WindowPanel#

데스크탑 앱 창을 연상시키는 윈도우 스타일 패널입니다. 타이틀 바 · 선택적 액션 슬롯 · 최소화/최대화/닫기 컨트롤 버튼 · 콘텐츠 영역으로 구성되며, 단독으로도 쓸 수 있고 더 큰 윈도우 매니저(CoWindowNavigator)의 building block으로도 쓸 수 있습니다.

Live Preview#

Web

Flutter

Loading Flutter...

class WindowPanelDefaultExample extends StatelessComponent {
  const WindowPanelDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return div(
      [
        CoWindowPanel(
          title: Component.text('Window Title'),
          minimizable: true,
          maximizable: true,
          child: Component.text('Window content goes here.'),
        ),
      ],
      styles: Styles(
        raw: const {'width': '${320 / 16}rem'},
      ),
    );
  }
}

class WindowPanelDefaultExample extends StatelessWidget {
  const WindowPanelDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      width: 320,
      child: CoWindowPanel(
        title: Text('Window Title'),
        minimizable: true,
        maximizable: true,
        child: Align(
          alignment: Alignment.centerLeft,
          child: Text('Window content goes here.'),
        ),
      ),
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

문서 내 데스크탑 UI 샘플, 툴바 / 사이드바 위에 얹는 보조 패널, 개발 도구형 UI에서 창 외형이 필요할 때
CoWindow / CoWindowNavigator 를 구현할 때의 프레임 쉘

대신 다른 컴포넌트를 사용하세요:

모달: CoDialog / CoDrawer
단순 카드: CoCard

기본 사용법 (Basic Usage)#

CoWindowPanel(
  title: Text('Window Title'),
  minimizable: true,
  maximizable: true,
  onClose: () {},
  child: Text('Window content'),
)

Web도 동일한 생성자로 사용합니다 — child/title/actions 타입만 다릅니다.

Props / Parameters#

이름	타입	기본값	설명
`title`	`W?`	null	타이틀 바에 표시할 위젯/컴포넌트
`child`	`W?`	null	콘텐츠 영역 (isMinimized=true면 숨김)
`actions`	`W?`	null	타이틀 바 우측 액션 슬롯 (기본 컨트롤 버튼 앞에 배치)
`closable`	`bool`	`true`	닫기 버튼 표시
`minimizable`	`bool`	`false`	최소화 버튼 표시
`maximizable`	`bool`	`false`	최대화 버튼 표시
`onClose`	`CoreVoidCallback?`	null	닫기 버튼 콜백
`onMinimize`	`CoreVoidCallback?`	null	최소화 버튼 콜백
`onMaximize`	`CoreVoidCallback?`	null	최대화 버튼 콜백
`isMinimized`	`bool`	`false`	콘텐츠 영역을 숨김 (타이틀 바만 남김)
`borderRadius`	`BorderRadiusGeometry?` (Flutter) / `double?` (Web)	theme or `CoreRadius.box`	외부 프레임 코너 반경
`titleBarColor`	`Color?` (Flutter) / `String?` (Web)	theme or `surfaceContainer`	타이틀 바 배경 오버라이드

Theming#

CoreComponentTheme.windowPanel 로 기본값 오버라이드:

CoreComponentTheme(
  windowPanel: CoreWindowPanelTheme(
    borderRadius: 12,
    titleBarColorKey: 'surfaceContainerHigh',
  ),
)