PwaTitleBar

Layout

PWA 창 상단에서 제목과 창 제어 영역을 배치하는 타이틀 바.

Usage

설치형 웹앱에서 운영체제 창과 이어지는 제목·제어 영역이 필요할 때 사용한다.

import

import { PwaTitleBar } from '@mildang/design-system/PwaTitleBar';

API Reference

PwaTitleBar Props

Prop

Type

Default

title

필수

ReactNode

지정 안 함

children

ReactNode

지정 안 함

left

ReactNode

지정 안 함

right

ReactNode

지정 안 함

variant

"default" | "custom"

default

창 제어 오버레이 동작

PwaTitleBar는 window-controls-overlay 환경에서만 제목 바를 렌더링한다. children은 환경과 무관하게 콘텐츠 영역으로 렌더링되므로, 브라우저 탭에서도 페이지 콘텐츠는 유지된다.

기본 사용

PWA 창 제목과 콘텐츠 영역을 함께 구성한다. 창 제어 오버레이가 없으면 제목 바는 숨겨진다.

코드

Open in Playground

import { PwaTitleBar } from '@mildang/design-system/PwaTitleBar';

export default function PwaTitleBarExample() {
  return (
    <PwaTitleBar title="수업 자료 편집">
      <div style={{ padding: 24 }}>창 콘텐츠가 이 영역에 표시됩니다.</div>
    </PwaTitleBar>
  );
}