Docs layout
A documentation page in the site's frame: the pages, the article and its contents on a wide screen; on a phone the pages fold into a disclosure above the article.
Web uniquement — React, depuis @krizaka/ui/docs-layout. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- A documentation without a docs engine, or around one.
- Guides and references of a product.
Quand ne pas l’utiliser
- For a reading page of a site without a list of pages.À la place : Table of contents
- For a hub of entry points.À la place : Link card
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { DocsLayout } from "@krizaka/ui/docs-layout";Exemples
A documentation page
Pages, an article with two headings, its contents.
Pages of the documentation
Getting started
Install
npx orazaka install
Props
A documentation page: pages · article · contents, in the site's frame.
| Prop | Type | Défaut | Description |
|---|---|---|---|
sidebarrequis | ReactNode | — | The pages of the documentation (a nav of links, grouped). |
sidebarLabelrequis | string | — | On a phone the sidebar is folded: the words that open it (Pages of the documentation). |
toc | ReactNode | — | The page's table of contents (a Toc of
@krizaka /ui/toc): beside the article from xl. |
Accessibilité
- The pages are your
nav; on a phone the same nav sits in a nativedetails. - The article is an
article; the contents aToc.
Clavier
| Touches | Action |
|---|---|
| Enter / Space | On a phone, opens or closes the list of pages. |
Bonnes pratiques
- The frame of the docs is wider (
--kz-page-max-docs): give the bar the same width on these pages. - Keep the article under 48rem; the contents list three to eight headings.
Composants liés
Générée depuis le code de @krizaka/ui 2.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub
Detail layout
One object's page: the way back, its media, name, status, facts and actions, its tabs, the content and a side panel that goes under the content on a phone.
Marketing layout
A site's page: the link that skips to the content, the floating bar, the page made of a PageHero and Sections in one frame, the footer.