목차 — 디자인 팩 아틀라스

Table of contents

목차는 오른쪽 「이 페이지의 구성」 목록이 기본이에요. 칩 변형은 모든 폭에서 칩 줄로 보여 줘요.

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

다른 이름: TocIn-page navigation

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

fold 는 폰에서 「이 글의 목차 13」 접힌 둥근 상자, 넓은 화면에서는 오른쪽에 세로선을 따라 작은 글씨 목록이에요. chips 는 테두리 있는 칩이 줄바꿈으로 이어지고 옆 목차 칸이 없어요. open 은 폰에서 번호가 붙은 펼친 목록, 넓은 화면에서는 오른쪽 목록과 함께 보여요.

항목이 많은 긴 글은 fold 가 본문을 덜 밀어내요. 짧은 글이나 폭을 넓게 쓰고 싶으면 chips 가 맞아요. 칩은 13개 항목에서 세 줄이 돼요.

「이 페이지의 구성」은 KRDS 의 in-page navigation 에서 온 이름이에요.

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