목차 — 디자인 팩 아틀라스

Table of contents

「이 페이지에서」 목록은 왼쪽에 가는 회색 선이 있고 지금 읽는 절만 진해져요. 접힌 상자, 칩 줄, 번호 목록으로 바꿀 수 있어요.

쓰는 규칙절이 세 개 넘을 때만 그린다. 지금 읽는 절은 색만이 아니라 화면 읽기 프로그램에도 알린다.

다른 이름: TocOn this page

export interface TocProps { items: TocItem[]; /** inline = 글 위(폰, chips 변형은 모든 폭), sidebar = 넓은 화면 옆 */ placement: 'inline' | 'sidebar'; variant?: VariantOf<'Toc'>; }

fold는 폰에서 「이 글의 목차 13」 한 줄에 꺾쇠가 달린 접힌 상자예요. 넓은 화면에서는 본문 옆에 따라오는 목록이 돼요. chips는 모든 화면에서 같아요. 둥근 회색 칩이 줄바꿈하며 이어지고 옆 목차 칸은 없어요. open은 폰에서 48px 번호 줄(01, 02 …)로 펼쳐지고, 넓은 화면에서는 옆 목록이 따로 있어요.

절이 열 개를 넘으면 fold가 폰 화면을 아껴 줘요. 목차를 눈에 띄는 안내로 쓰려면 open이, 옆 칸 없이 본문을 넓게 쓰려면 chips가 맞아요. 단, 데모에서는 fold와 open의 넓은 화면 옆 목록이 본문 칸 오른쪽에 같이 보여요.

이럴 때 — 변형 3

fold접힘 글이 길고 폰 첫 화면을 아끼고 싶을 때 — 폰은 접힌 상자, 넓은 화면은 옆 목록.쓰는 사이트 3곳: babyplay, babysick, babysleep
chips칩 줄 절이 짧고 몇 개 안 돼 옆 칸이 아까울 때 — 모든 폭에서 칩 한 줄.쓰는 사이트 5곳: babyfood, milestone, newborn, toddlerfood, 허브
open펼침 절 제목만 읽어도 글 흐름이 보이게 하고 싶을 때 — 폰에서도 펼친 번호 목록.쓰는 사이트 3곳: birthprep, feeding, vaccination

같은 컴포넌트, 다른 팩

12목차Table of contents

12목차Table of contents

12목차Table of contents

이럴 때 — 변형 3