Floating action button

The screen's one main action, floating above the content in the accent, clear of the safe area and the tab bar.

MobileBêtaActions

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 main creation action of a list screen.

Quand l’utiliser

Create on a list screen: a new challenge, a new message.
Record on a camera-first screen.

Quand ne pas l’utiliser

For a secondary action or several actions.À la place : Button
On a form: its submit button belongs at the bottom of the form.À la place : Button

Installation

Installer

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

Importer

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

Extended and round

With its words, and the round button alone.

Props

The screen's main action, floating above the content in the accent — one per screen (create, compose, record). It keeps clear of the safe area and the tab bar (offset), shows its words when extended, a light tap confirms.

Prop	Type	Défaut	Description
`icon`requis	`ReactNode`	—	The icon (decorative).
`label`requis	`string`	—	The action in words (“New challenge”) — passed translated: the accessible name, and shown when `extended`.
`onPress`requis	`() => void`	—	What it does.
`extended`	`boolean`	—	Shows the words beside the icon (collapse it while the list scrolls down).
`offset`	`number`	`0`	Extra distance from the bottom, above a tab bar (its height). Default 0.
`placement`	`"center" \| "end" \| "start"`	`end`	Which corner. Default `end` (bottom right in left-to-right).
`style`	`StyleProp<ViewStyle>`	—	Styles merged last.

Accessibilité

A button named by label, extended or not.
56 points high; a light tap when pressed.

Bonnes pratiques

One per screen, for the action the screen exists for.
extended shows the words; collapse it while the list scrolls down.
Pass the tab bar's height in offset.

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