Krizaka UI
Krizaka UI
Patrons

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.

WebBêtaMises en page

Web uniquement — React, depuis @krizaka/ui/settings-layout. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. the web apps' adoption: Orochia (PS5), Orazaka (PS6): account and product settings.

Quand l’utiliser

  • Account, workspace and administration settings.
  • Any long form that splits into independent groups.

Quand ne pas l’utiliser

  • For a step-by-step setup the user follows once.À la place : Stepper
  • For one small form.À la place : Field

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@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.

A fan unlocks a video
An auction ends
Weekly summary by email

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.

PropTypeDéfautDescription
navrequisreadonly SettingsNavItem[]—The sections.
navLabelrequisstring—The navigation's accessible name (Settings sections).
descriptionReactNode—One sentence under it.
linkAsElementType<any, keyof IntrinsicElements>aThe app's link component for the sections (Next's Link); an <a> otherwise.
titleReactNode—The screen's title (Settings).

SettingsSection

A group of settings: a titled card with its fields and its own save.

PropTypeDéfautDescription
titlerequisReactNode—The section's title: it names the region (and is its anchor's target when id is set).
descriptionReactNode—What these settings change, in one sentence.
footerReactNode—At the foot: the section's own save (a Button), a note.

Accessibilité

  • The sections are a nav named by navLabel; the current one has aria-current (page or location).
  • Each section is a section named by its h2.

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.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Marketing layout

Précédent

Split view

Suivant

Sur cette page

Quand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés