Action sheet

A short list of actions on an item from the bottom edge, the destructive one in danger, cancel apart.

MobileBêtaSuperpositions

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: the menu of a long press and of "more" on a row.

Quand l’utiliser

The “more” button of a video, a message, a comment.
Choosing where a photo comes from: the library or the camera.

Quand ne pas l’utiliser

For more than six actions or for content.À la place : Dialog
To confirm what the action does.À la place : Dialog

Installation

Installer

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

Importer

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

A video's actions

Share, auction, edit, delete — cancel apart.

Props

A short list of actions from the bottom edge — share, edit, delete — and a cancel button apart, as the platforms do.

Prop	Type	Défaut	Description
`actions`requis	`readonly ActionSheetAction[]`	—	The choices, in order.
`cancelLabel`requis	`string`	—	The cancel button's words (“Cancel”) — passed translated.
`title`requis	`string`	—	What the choices are about (“Your video”) — the accessible name.
`defaultOpen`	`boolean`	—	Open at first, uncontrolled.
`description`	`string`	—	One line under the title.
`onOpenChange`	`((open: boolean) => void)`	—	Called when it opens or closes (the back button, the scrim, an action).
`open`	`boolean`	—	Open (controlled).

Accessibilité

A menu of menuitems named by the title; cancel is a button apart.
A selection tick on each action when the app gives haptics.

Bonnes pratiques

Put the destructive action last, in its own words (“Delete the video”).
Keep it to verbs: share, edit, start an auction.

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