목차

Table of contents

「이 페이지에서」 회색 목록. 지금 읽는 절만 검게 보이고 선이나 띠 표시는 없어요.

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

다른 이름: TocCollapsible

···

usage (Astro)

---
// design-systems/krds/components/ArticleLayout.astro
// Toc 은 이 파일 안에서 쓰인다(팩 구현끼리)
---
<Toc items={toc} placement="inline" variant={tocVariant} />

site.json

// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "Toc": "fold" }
}

props (TypeScript)

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

fold 는 폰에서 「이 글의 목차 13개 절」이 접힌 테두리 줄이고 꺾쇠로 펼쳐요. chips 는 모든 폭에서 테두리 있는 칩 줄로 절 이름이 나란히 놓이고 옆 목차가 없어요. open 은 연회색 판 안에 번호 1~13 목록이 처음부터 펼쳐져 있어요. fold 와 open 은 넓은 화면에서 오른쪽에 「이 페이지에서」 목록이 따로 나와요.

글이 길면 fold 로 화면을 아끼고, 절 이름을 훑게 하려면 chips, 목차를 바로 읽게 하려면 open 이에요. open 은 폰에서 목록이 길게 자리를 차지해요.

문서 사이트의 「On This Page」 모양이고 지금 읽는 절 표시에 선이나 띠를 쓰지 않아요.

이럴 때 — 변형 3

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