Settings layout
Settings: the sections on the side (a row of chips that scrolls on a phone) and the current section's forms, each a titled card with its own save.
Web uniquement — React, depuis @krizaka/ui/settings-layout. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- Account, workspace and administration settings.
- Any long form that splits into independent groups.
Quand ne pas l’utiliser
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { SettingsLayout, SettingsSection } from "@krizaka/ui/settings-layout";Exemples
Account settings
Profile and notifications, each with its own save; the sections as chips on a phone.
Settings
Your profile, what we tell you and how you are paid.
Profile
What your fans see.
Notifications
Only what you ask for.
One section per page
A workspace's settings, the current section marked.
Workspace
Props
SettingsLayout
A settings screen: sections on the left (chips on a phone), forms on the right.
| Prop | Type | Défaut | Description |
|---|---|---|---|
navrequis | readonly SettingsNavItem[] | — | The sections. |
navLabelrequis | string | — | The navigation's accessible name (Settings sections). |
description | ReactNode | — | One sentence under it. |
linkAs | ElementType<any, keyof IntrinsicElements> | a | The app's link component for the sections (Next's Link); an <a> otherwise. |
title | ReactNode | — | The screen's title (Settings). |
SettingsSection
A group of settings: a titled card with its fields and its own save.
| Prop | Type | Défaut | Description |
|---|---|---|---|
titlerequis | ReactNode | — | The section's title: it names the region (and is its anchor's target when id is set). |
description | ReactNode | — | What these settings change, in one sentence. |
footer | ReactNode | — | At the foot: the section's own save (a Button), a note. |
Accessibilité
- The sections are a
navnamed bynavLabel; the current one hasaria-current(page or location). - Each section is a
sectionnamed by itsh2.
Bonnes pratiques
- One save per section, at its foot: a change never waits for another.
- Sections as pages (
/settings/billing) or as anchors of one long page (#billing). - Say in the description what the section changes for the user.
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
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.
Split view
A list and its open item: two panes on a desktop; on a phone one at a time, the open item with the way back — chosen by showDetail, from the address.