목차 — 디자인 팩 아틀라스

Table of contents

넓은 화면에서는 글 오른쪽에 「이 글의 목차」가 따라다니고, 폰에서는 상자로 접히거나 펼쳐져요. 칩 줄 변형도 있어요.

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

다른 이름: TocNavList

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

fold는 폰에서 「이 글의 목차 13」 한 줄로 접혀 있다가 누르면 열려요(넓은 화면에서는 옆 목록만 보여요). open은 폰에서 번호 붙은 줄이 처음부터 펼쳐져요. chips는 어느 화면에서나 목차를 둥근 칩 줄로 보여 주고 옆 목차 칸은 없어요. 지금 읽는 절은 옆 목록에서 연한 바탕과 굵은 글자로 표시돼요.

긴 글이라면 옆에 따라붙는 목록이 문서 사이트 같은 느낌이에요. 칩은 오른쪽 칸을 비우고 싶은 짧은 글에 맞아요. 데모에서는 칩 13개가 세 줄에 걸쳐 놓여서 항목이 많으면 꽤 길어져요.

색 띠 없이 바탕과 굵기만으로 현재 위치를 표시하는 점이 이 팩의 특징이에요.

이럴 때 — 변형 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