Segmented

A segmented control that switches between views of a screen — the native counterpart of the web's segmented tabs.

MobileBêtaNavigation

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

Pourquoi il est là. the native apps: Yasakia (PY4), Yororis (PYO2), Orochia mobile (PS6), Orazaka mobile: switching a view inside a screen.

Quand l’utiliser

At the top of a screen, to switch between two to four views of the same content: feed, auctions, challenges.

Quand ne pas l’utiliser

To filter a list.À la place : Chip
On the web.À la place : Tabs

Installation

Installer

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

Importer

import { Segmented } 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.

Default

Controlled, three views.

Small

size="sm".

Props

Switches between views of one screen: equal segments on a track, the chosen one raised — the web Tabs variant="segmented". A tab list for screen readers. To filter a list, use Chip.Group.

Prop	Type	Défaut	Description
`onValueChange`requis	`(value: T) => void`	—	Called with the view pressed.
`options`requis	`readonly SegmentedOption<T>[]`	—	The views, in order; `label` passed translated.
`value`requis	`string`	—	The selected view (controlled).
`aria-label`	`string`	—	The accessible name of the tab list — passed translated.
`size`	`"sm" \| "md"`	`md`	sm · md (default).
`style`	`StyleProp<ViewStyle>`	—	Styles merged last.

Accessibilité

A tab list named by aria-label; each segment is a tab with its selected state.
An option with disabled is announced as disabled and cannot be pressed.

Bonnes pratiques

Controlled: keep value in the screen's state (or the route).
One or two words per segment, passed translated.

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