네모네모 부품

옛 컴퓨터 창

먹색 테두리, 딱딱한 그림자, 줄무늬 제목 줄이 달린 상자예요. 한 화면에서 묶어 보여 줄 내용 덩어리에 써요.

기본

제목 줄 왼쪽에는 작은 네모 닫기 칸이, 가운데에는 대문자 이름이 놓여요.

WINDOW

알림 설정

새 소식을 받을 방법을 골라 주세요.

<Window title="알림 설정">
  <p>새 소식을 받을 방법을 골라 주세요.</p>
</Window>

그림자는 세 단계예요. 겹쳐 놓은 창은 뒤쪽일수록 작게 해서 앞뒤를 알려 줘요.

SHADOW

LEVEL 1

2px 그림자

LEVEL 2

4px 그림자

LEVEL 3

6px 그림자

<Window title="SMALL" shadow={1}>…</Window>
<Window title="MEDIUM" shadow={2}>…</Window>
<Window title="LARGE" shadow={3}>…</Window>

창 맨 아래에 버튼을 둘 수 있어요. 주 버튼은 오른쪽 끝에 하나만 둬요.

ACTIONS

저장하기

바뀐 내용을 저장하시겠어요?

<Window
  title="저장하기"
  actions={<><Button variant="outlined" size="sm">취소</Button><Button size="sm">저장하기</Button></>}
>
  바뀐 내용을 저장할까요?
</Window>

보라 제목 줄은 한 화면에서 가장 중요한 창 하나에만 써요. 표나 그림을 꽉 채울 때는 여백을 없애요.

TONE

이번 주 목표

3일 연속 출석

강조

거래 내역

여백 없음

<Window title="이번 주 목표" tone="accent">…</Window>
<Window title="거래 내역" flush>…</Window>

요약

이번 달 모은 포인트는 1,200P예요.

이렇게창 하나에 묶음 하나. 제목은 짧은 영문 한두 단어나 한글 두세 글자로.

창 안에 창

또 창

안쪽

이렇게 말고창 안에 창을 겹치면 선이 복잡해져요. 안쪽은 선 하나짜리 칸으로 나눠요.