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.

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

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.

import { Segmented } from "@krizaka/ui/native";
import { useState } from "react";
import { View } from "react-native";

const OPTIONS = [
  { value: "feed", label: "Feed" },
  { value: "auctions", label: "Auctions" },
  { value: "challenges", label: "Challenges" },
] as const;

// Controlled: the screen holds the value and shows the matching view.
export default function NativeSegmentedDefault() {
  const [value, setValue] = useState<(typeof OPTIONS)[number]["value"]>("auctions");
  return (
    <View style={{ width: 320 }}>
      <Segmented aria-label="View" options={OPTIONS} value={value} onValueChange={setValue} />
    </View>
  );
}

Small

size="sm".

import { Segmented } from "@krizaka/ui/native";
import { useState } from "react";
import { View } from "react-native";

const OPTIONS = [
  { value: "feed", label: "Feed" },
  { value: "auctions", label: "Auctions" },
  { value: "challenges", label: "Challenges" },
] as const;

// `size="sm"`: in a header or a sheet.
export default function NativeSegmentedSmall() {
  const [value, setValue] = useState<(typeof OPTIONS)[number]["value"]>("auctions");
  return (
    <View style={{ width: 320 }}>
      <Segmented aria-label="View" options={OPTIONS} value={value} onValueChange={setValue} size="sm" />
    </View>
  );
}

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 2.0.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Segmented