Grid and columns

WebiOSAndroid

9:41

« Photos », son histoire React Native à la largeur d’un téléphone — le même code sur iOS et Android.

Mobile uniquement — React Native, depuis @krizaka/ui/native. Bêta : son API peut encore changer à une version mineure.

• Web · n/a. On the web the grid is CSS and the page's width is the container query. → Card grid
• Bureau · n/a. The Mac app's window is the web: its columns are the web grid's. → Card grid

Pourquoi il est là. the native apps: Yomizaka and Akinaza mobile, Orazaka mobile: the dashboards, the galleries and the stat strips by size class (krizaka-ui#753; adoption yomizaka#430, akinaza#397).

Installation

Installer

npx expo install react-native-svg
npm install @krizaka/ui

Importer

import { Grid, Columns, useSizeClass, useFontScale, sizeClassOf, gridColumns } from "@krizaka/ui/native";

Enveloppez l’application une fois dans ThemeProvider de @krizaka/ui/native : chaque composant lit ses rôles de couleur.

Exemples

React Native n’a pas d’aperçu en direct sur le web : chaque exemple montre la capture de sa story, testée dans les deux thèmes, et le code à copier.

Photos

Two columns on a compact room, three on a regular one, four on an expanded one; tiles never narrower than 120 pt.

AperçuCode

A stat strip

Cards of equal height: two per row on a phone, four on a tablet, one at 200 % text.

AperçuCode

Columns

A third and two thirds that stack when the room cannot hold them.

AperçuCode

Props

Accessibilité

• A grid with an aria-label is a list and its cells are list items, so a screen reader announces Photos, list, 8 items.
• The reading order is the order of the children in every size class; columns only change where they sit.
• At 200 % text no cell is narrower than minItemWidth × 2: the text wraps in a wide cell instead of being cut.

Bonnes pratiques

• Ask for columns by size class: { compact: 1, regular: 2, expanded: 3 } is the default; a gallery says { compact: 2, regular: 3, expanded: 4 }. The numbers are a ceiling.
• Set minItemWidth to what the item needs to be readable (a stat card 140, a photo 100): the grid drops columns before an item gets narrower, so nothing overflows.
• The minimum grows with the system's text scale: at 200 % a card that held two per row on a phone stacks into one. Test it with fontScale={2}.
• Cells of a row are as tall as the tallest: give the item flex: 1 (a plain View is filled already), and equalHeight={false} for items of free height.
• Use the gap tokens (xs 4, sm 8, md 12, lg 16, xl 24), never a number.
• The size class is read from the width the grid is given (useSizeClass() reads the window): inside a split view or a sheet the grid adapts to that, not to the screen.
• Right-to-left needs nothing: the grid uses no physical edge, the first item is at the start edge.

Composants liés

• ScreenA screen of the app — a header, the content (scrolling, rising with the keyboard, refreshing on a pull), a footer — and the templates built on it: app shell, dashboard, sign-in, profile, feed, chat, settings, a map, notifications.
• ListRecords read top to bottom — a leading visual, a title and a line, details and actions beside — dense or comfortable, selectable, windowed when long.
• List and detailA list and the item open from it. One pane at a time on a phone — the list, then the item with the way back — and both side by side when the room holds them, decided by the width the layout is given, not by the device.
• Card gridA responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal; each card keeps its own quiet hover.

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