App frame

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

• Mobile · n/a. On a phone the frame is a tab bar, a header and a screen: the native twin is the tabs shell template. → Tab bar

Pourquoi il est là. The one signed-in frame of Yomizaka, Akinaza and Orazaka (UX audit F1, F2; yomizaka#429, akinaza#396, orazaka-web-client#294).

Installation

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

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

import { AppFrame, navWords, publicBarLinks, framePlaces } from "@krizaka/ui/app-frame";

Exemples

Props

Accessibilité

• The rail is a nav named by label; the current section carries aria-current="page".
• Exactly one brand mark is visible at every width (the rail's on a desktop, the top bar's on a phone).
• A count on a section is said in words with badgeLabel.

Clavier

Bonnes pratiques

• Pass the sections the product has: place: "foot" puts one at the rail's foot; gated leaves one out for this person (a permission, a feature not open). Five main sections at most: a phone's tab bar carries five.
• The account menu is fixed: identity, Profile, Settings, Billing (only when you pass it), Administration (only for an admin), then Language and Theme, then Sign out. Settings is one entry that lands on the settings home, never a tab.
• A place is on the rail or under the avatar, never both: a section with the id of an account link (settings, billing) leaves the rail.
• The theme and the language are always in the menu, never in the header: a phone's header has no room. The theme is the ThemeProvider's unless you pass theme.
• Say the shared words with the shared vocabulary (navWords, EN/FR): Docs, Terms / Conditions d'utilisation, Settings / Réglages. Override one (words) only when the product truly says it otherwise (« Credits and usage »).
• The public bar is the other half of the family: publicBarLinks gives its flat links, four at most — How it works · Pricing · Docs · Download.
• The page inside is <main id="content">; the frame does not draw it.

Composants liés

• Rail navThe compact navigation of an application: a vertical rail of icons on a desktop — the product's mark on top, a tooltip on each icon, an accent bar on the current one, a footer for settings and the account — that becomes a bottom tab bar on a phone. Paired with AppHeader, which carries the product's name (and, on a phone, its mark).
• App headerThe family's top bar beside a RailNav: the product's name as text, optional status chips, then the session's controls in a fixed order — search (⌘K), language, the host's actions, messages and notifications with their unread counts, the primary action, the account with its name. Every slot is the host's; an empty one draws nothing.
• Account menuThe menu under a signed-in person's avatar: who they are, their profile and settings, the language and the theme as compact submenus, Sign out.
• App shellThe shell of an application screen: a sidebar of sections that collapses to its icons on a desktop and opens as a drawer on a phone, a sticky header with the screen's title, a search that opens the command palette and its actions, the content — and the keyboard shortcuts a console lives by (⌘B, ⌘K, g then a letter).
• Nav barThe Krizaka navigation bar, the same on every site of the family: a floating pill that tightens as the page scrolls, the family switcher on the brand, one light that glides to the item under the pointer or the focus and rests on the current page, accessible menus with rich links, and a mobile panel.

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