문서 색인

그룹별 항목

가이드에서

사용 위치: the Guide index.

사용법과 인터페이스

DocumentationIndex는 큰 카탈로그를 섹션, 범주, 문자별로 정리하며 Guide와 Reference의 입구를 구성합니다. 학습 경로에는 충분한 설명을, 이름으로 찾는 API나 유틸리티에는 간결한 링크 목록을 사용하세요. 두 보기에는 같은 목적지가 포함됩니다.

각 섹션에 안정적인 id, 제목, 설명, groups를 제공하세요. 섹션은 순서대로 번호가 매겨집니다. 여러 범주가 있는 그룹에는 섹션 머리글 옆에 네이티브 앵커 바로가기가 제공됩니다. 순서가 바뀌어도 공유 URL을 유지하도록 각 그룹에도 고유하고 안정적인 id를 지정하세요. showDescriptions는 줄바꿈되는 전체 요약을 표시합니다. 기본값은 간결한 링크이며 related는 다른 카탈로그로 연결합니다.

<DocumentationIndex  name="guide"  sections={[{    id: 'learn', title: 'Learn',    description: 'Start with a working example.',    groups: [{ entries: [{      id: 'intro', title: 'Introduction', category: 'Guide',      description: 'Write your first classes.',      url: 'https://rc.css.master.co/guide/introduction',    }] }],  }]}  showDescriptions  related={{ href: 'https://rc.css.master.co/reference', title: 'Reference',    description: 'Look up a utility.' }}/>

카탈로그는 카드 격자보다 책의 목차처럼 읽힙니다. 가는 선 위의 번호 있는 섹션 목록을 상호 링크로 마무리하고 각 섹션을 선으로 구분한 펼침면처럼 배치합니다. 44rem부터는 번호, 이름, 요약이 항목 옆에 유지됩니다. 설명이 있는 항목은 선으로 구분된 행과 포인터 아래 화살표를 사용하고, 간결한 링크는 열로, A–Z 보기는 책의 색인처럼 문자별 열로 배치합니다. 별도 프레임은 없으며 휴대전화의 터치 행은 44px을 유지합니다. 자체 컨테이너와 열 레이아웃을 가지므로 측정 데모 밖의 읽기 열에 배치하세요. 범주와 A–Z 컨트롤은 눌림 상태가 있는 네이티브 버튼입니다. 문자와 범주 바로가기는 직접 진입 URL로도 쓸 수 있는 실제 프래그먼트 링크입니다. 공개 카탈로그는 기존 앵커를 유지하도록 idPrefix를 생략하고, 한 검토 페이지에 여러 카탈로그를 표시할 때만 서로 다른 접두사를 지정합니다. 전체 범주 보기는 서버 렌더링 HTML에 포함되며 A–Z 전환에는 JavaScript가 필요합니다. 색인 검토 페이지에서 현재 카탈로그를 확인하세요.