컴포넌트FOX · Navigation

상단 바

화면 맨 위에서 지금 어디인지 알려 주고, 뒤로 가거나 자주 쓰는 행동을 담는 줄이에요. 아래에 먹색 선이 깔려요.

가운데 제목

가장 기본이에요. 왼쪽에 뒤로 가기, 가운데에 제목을 둬요.

CENTER

<Navigation title="송금하기" onBack={() => router.back()} />

행동이 있을 때는 제목을 왼쪽으로 붙여요. 행동은 아이콘 버튼으로 두 개까지만 둬요.

LEFT WITH ACTIONS

<Navigation
  titleAlign="left"
  title="내 계좌"
  onBack={back}
  actions={<IconButton label="공유하기" appearance="plain">...</IconButton>}
/>

페이지 머리가 필요할 때 써요. 줄무늬 제목 줄이 달린 옛 컴퓨터 창 모양이에요.

WINDOW

MY ACCOUNT

<Navigation variant="window" title="MY ACCOUNT" onBack={back} />

sticky를 켜면 스크롤해도 화면 위에 남아요. 아래 상자를 스크롤해 보세요.

STICKY

1월 거래 내역이에요.

2월 거래 내역이에요.

3월 거래 내역이에요.

4월 거래 내역이에요.

5월 거래 내역이에요.

6월 거래 내역이에요.

7월 거래 내역이에요.

8월 거래 내역이에요.

9월 거래 내역이에요.

10월 거래 내역이에요.

11월 거래 내역이에요.

12월 거래 내역이에요.

<Navigation sticky title="최근 내역" onBack={back} />

이렇게제목은 짧게 한 줄로, 화면이 무엇인지만 적어요.

이렇게 말고제목이 길면 잘려요. 화면이 무엇인지 짧게만 적어요.