WindowPanel

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

WindowPanel#

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

Live Preview#

Web

Flutter

Loading Flutter...

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

  @override
  Component build(BuildContext context) {
    return div(
      [
        WindowPanel(
          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: WindowPanel(
        title: Text('Window Title'),
        minimizable: true,
        maximizable: true,
        child: Align(
          alignment: Alignment.centerLeft,
          child: Text('Window content goes here.'),
        ),
      ),
    );
  }
}

사용 시기 (When to Use)#

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

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

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

모달: Dialog / Drawer
단순 카드: Card

기본 사용법 (Basic Usage)#

WindowPanel(
  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`	콘텐츠 영역을 숨김 (타이틀 바만 남김)
`windowPanelStyle`	`CoreWindowPanelStyle?`	null	외부 프레임 코너 반경 / 타이틀 바 배경 등 chrome 오버라이드

Theming#

CoreComponentTheme.windowPanel 의 style 슬롯으로 기본값 오버라이드:

CoreComponentTheme(
  windowPanel: CoreWindowPanelTheme(
    style: CoreWindowPanelStyle(
      borderRadius: CoreBorderRadius.all(CoreRadius.radius12),
      titleBarColor: CoreColor.token(CoreColors.surfaceContainerHigh),
    ),
  ),
)