Sheet — Kuito Documentation

Present contextual content over the current screen. Use it for filters, a queue or a lightweight editor.

Open and close a queue

tsx

import { Button, Sheet, Text, VStack, signal } from 'kuito';

export default function Player() {
  const queueOpen = signal(false);

  return (
    <VStack flex={1} padding={16}>
      <Button onPress={() => (queueOpen.value = true)}>Up next</Button>
      <Sheet open={queueOpen.value} onClose={() => (queueOpen.value = false)} padding={24}>
        <Text>Up next</Text>
      </Sheet>
    </VStack>
  );
}

Behavior

Keep the open state synchronized with native dismissal through a signal or onClose. snapPoints defines permitted heights. Use a presented route when the sheet is a navigable screen or must return a typed result.

Props

Prop	Meaning
`open`	Shows the sheet while true. Controlled: set it back to false in `onClose`.
`onClose`	The user dismissed it (swipe, backdrop or back); set `open` back to false.
`snapPoints`	Resting heights, smallest first: points, `'50%'`, or `'content'` (default).
`onSnap`	`{ index }` of the snap point the sheet settled at.
`grabber`	The drag handle; shown by default.
`dismissible`	Whether swiping down or tapping outside dismisses it; true by default.
`borderRadius`	The sheet's corner radius.
`motion`	`sheetMotion()`: its `height` and its `progress` between its snap points move with the sheet every frame, on the UI thread (follow a sheet).

Continue

Read Navigation for a complete workflow. See the complete prop reference for types and documented defaults.

Référence

Signatures

(props: SheetProps): KuitoElement

Paramètres

Nom	Type	Requis	Description
`props`	`SheetProps`	Oui	—

Retourne

KuitoElement

Props: SheetProps

Props (props héritées incluses) 103

Nom	Type	Requis	Description
`onClose`	`(event: KuitoEvent<"close">) => void`	Non	The user dismissed the sheet (swipe down, backdrop tap or back).
`onSnap`	`(event: SnapEvent) => void`	Non	The sheet settled at another snap point.
`motion`	`SheetMotion`	Non	Moves with the sheet every frame on the UI thread: `sheetMotion()`, given to one sheet.
`opacity`	`Animatable<number>`	Non	—
`backgroundColor`	`Animatable<string>`	Non	—
`borderColor`	`Animatable<string>`	Non	—
`width`	`Animatable<SizeValue>`	Non	—
`height`	`Animatable<SizeValue>`	Non	—
`translateX`	`Animatable<number>`	Non	—
`translateY`	`Animatable<number>`	Non	—
`scale`	`Animatable<number>`	Non	—
`scaleX`	`Animatable<number>`	Non	—
`scaleY`	`Animatable<number>`	Non	—
`rotate`	`Animatable<number>`	Non	Degrees.
`shadowColor`	`Animatable<string>`	Non	—
`shadowRadius`	`Animatable<number>`	Non	—
`shadowOffsetX`	`Animatable<number>`	Non	—
`shadowOffsetY`	`Animatable<number>`	Non	—
`hidden`	`Prop<boolean>`	Non	Takes the view out of layout and off screen, as CSS `display: none`.
`padding`	`Prop<LengthPercentage>`	Non	—
`position`	`Prop<"relative" \| "absolute">`	Non	—
`children`	`KuitoNode`	Non	—
`id`	`string`	Non	—
`ref`	`ElementRef<ElementHandle>`	Non	—
`class`	`Prop<ClassNames>`	Non	Class names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
`style`	`StyleDeclarations`	Non	Styles of this view alone, compiled at build time: CSS properties in camelCase. A value that changes must set a native prop (`opacity`).
`onPress`	`(event: PressEvent) => void`	Non	—
`onPressCapture`	`(event: PressEvent) => void`	Non	—
`key`	`string \| number`	Non	—
`paddingTop`	`Prop<LengthPercentage>`	Non	—
`paddingRight`	`Prop<LengthPercentage>`	Non	—
`paddingBottom`	`Prop<LengthPercentage>`	Non	—
`paddingLeft`	`Prop<LengthPercentage>`	Non	—
`minWidth`	`Prop<SizeValue>`	Non	—
`maxWidth`	`Prop<SizeValue>`	Non	—
`minHeight`	`Prop<SizeValue>`	Non	—
`maxHeight`	`Prop<SizeValue>`	Non	—
`aspectRatio`	`Prop<number>`	Non	Width divided by height; sizes the missing side from the other.
`top`	`Prop<LengthPercentageAuto>`	Non	—
`right`	`Prop<LengthPercentageAuto>`	Non	—
`bottom`	`Prop<LengthPercentageAuto>`	Non	—
`left`	`Prop<LengthPercentageAuto>`	Non	—
`margin`	`Prop<LengthPercentageAuto>`	Non	—
`marginTop`	`Prop<LengthPercentageAuto>`	Non	—
`marginRight`	`Prop<LengthPercentageAuto>`	Non	—
`marginBottom`	`Prop<LengthPercentageAuto>`	Non	—
`marginLeft`	`Prop<LengthPercentageAuto>`	Non	—
`flexGrow`	`Prop<number>`	Non	—
`flexShrink`	`Prop<number>`	Non	—
`flexBasis`	`Prop<SizeValue \| "content">`	Non	—
`flex`	`Prop<number>`	Non	A grow factor from a zero basis, as CSS `flex: n`; 0 is inflexible.
`alignSelf`	`Prop<"auto" \| SelfAlignment>`	Non	—
`direction`	`Prop<"ltr" \| "rtl">`	Non	The way lines run; unset, the parent's, and the app's first language's at the root.
`boxSizing`	`Prop<"border-box" \| "content-box">`	Non	—
`paddingInlineStart`	`Prop<LengthPercentage>`	Non	Padding on the side lines start from: the left in `ltr`, the right in `rtl`.
`paddingInlineEnd`	`Prop<LengthPercentage>`	Non	Padding on the side lines end at: the right in `ltr`, the left in `rtl`.
`marginInlineStart`	`Prop<LengthPercentageAuto>`	Non	Margin on the side lines start from: the left in `ltr`, the right in `rtl`.
`marginInlineEnd`	`Prop<LengthPercentageAuto>`	Non	Margin on the side lines end at: the right in `ltr`, the left in `rtl`.
`insetInlineStart`	`Prop<LengthPercentageAuto>`	Non	`left` in `ltr`, `right` in `rtl`.
`insetInlineEnd`	`Prop<LengthPercentageAuto>`	Non	`right` in `ltr`, `left` in `rtl`.
`role`	`Prop<Role>`	Non	—
`onAction`	`(event: AccessibilityActionEvent) => void`	Non	The screen reader action taken, by `name`.
`accessible`	`Prop<boolean>`	Non	Makes the view one screen reader element, read as its label or its children's text.
`label`	`Prop<string>`	Non	What a screen reader says for the view.
`hint`	`Prop<string>`	Non	What happens when the view is activated, read after the label.
`aria-hidden`	`Prop<boolean>`	Non	Screen readers skip the view and its subtree.
`actions`	`Prop<readonly AccessibilityAction[]>`	Non	Actions a screen reader offers; `onAction` receives the one taken.
`live`	`Prop<"off" \| "polite" \| "assertive">`	Non	ARIA's `aria-live`: announces changes to the view's content, on iOS too.
`aria-disabled`	`Prop<boolean>`	Non	—
`aria-selected`	`Prop<boolean>`	Non	—
`aria-checked`	`Prop<boolean \| "mixed">`	Non	—
`aria-busy`	`Prop<boolean>`	Non	—
`aria-expanded`	`Prop<boolean>`	Non	—
`aria-valuemin`	`Prop<number>`	Non	—
`aria-valuemax`	`Prop<number>`	Non	—
`aria-valuenow`	`Prop<number>`	Non	—
`aria-valuetext`	`Prop<string>`	Non	—
`gestures`	`readonly Composable[]`	Non	The view's gestures; several race unless composed with together or orElse.
`transition`	`Partial<Record<"opacity" \| "backgroundColor" \| "transform" \| "borderRadius" \| "borderColor" \| "shadow" \| "width" \| "height" \| "all", Animation<unknown> \| AnimationSpec>>`	Non	How the animatable props move when they change, enter or leave, by group; a CSS `transition` compiles to it.
`animate`	`Partial<Record<AnimatableProps, string \| number>>`	Non	Animatable props whose every change moves as `transition` says; the first value applies at once.
`enter`	`Effect`	Non	Where the view enters from: `fade.and(slide.up(12))`.
`exit`	`Prop<Effect>`	Non	Where the view leaves to; it stays on screen until it is there. The renderer gets `true`, and keeps the view until `exited`.
`layout`	`Animation<number>`	Non	How the view moves to a new frame the layout gives it: `layout={spring()}`.
`overflow`	`Prop<"visible" \| "hidden" \| "clip" \| "scroll">`	Non	hidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
`borderWidth`	`Prop<number>`	Non	—
`backgroundGradient`	`{ angle: number; colors: string[];}`	Non	—
`color`	`Prop<string>`	Non	—
`sharedId`	`Prop<string>`	Non	A view the navigation stack flies to the view with the same sharedId on the screen it pushes or pops to (docs/navigation.md#shared-elements).
`alignItems`	`Prop<SelfAlignment>`	Non	—
`justifyContent`	`Prop<ContentAlignment>`	Non	—
`gap`	`Prop<LengthPercentage>`	Non	—
`rowGap`	`Prop<LengthPercentage>`	Non	—
`columnGap`	`Prop<LengthPercentage>`	Non	—
`flexDirection`	`Prop<"row" \| "column" \| "row-reverse" \| "column-reverse">`	Non	—
`flexWrap`	`Prop<"nowrap" \| "wrap" \| "wrap-reverse" \| "balance">`	Non	—
`flexLineCount`	`Prop<number>`	Non	The minimum number of lines a wrapping container breaks into (CSS Flexbox 2).
`alignContent`	`Prop<ContentAlignment>`	Non	—
`keyboard`	`Prop<{ avoid?: "none" \| "padding" \| "position";}>`	Non	—
`open`	`Bound<boolean>`	Oui	—
`snapPoints`	`Prop<readonly SnapPoint[]>`	Non	Heights the sheet rests at, smallest first; `['content']` by default.
`grabber`	`Prop<boolean>`	Non	Shows the drag handle; true by default.
`dismissible`	`Prop<boolean>`	Non	Whether swiping down or tapping outside dismisses it; true by default.
`borderRadius`	`Prop<number>`	Non	—

onClose — signatures de méthode

Signatures

(event: KuitoEvent<"close">): void

Paramètres

Nom	Type	Requis	Description
`event`	`KuitoEvent<"close">`	Oui	—

Retourne

void

onSnap — signatures de méthode

Signatures

(event: SnapEvent): void

Paramètres

Nom	Type	Requis	Description
`event`	`SnapEvent`	Oui	—

Retourne

void

onPress — signatures de méthode

Signatures

(event: PressEvent): void

Paramètres

Nom	Type	Requis	Description
`event`	`PressEvent`	Oui	—

Retourne

void

onPressCapture — signatures de méthode

Signatures

(event: PressEvent): void

Paramètres

Nom	Type	Requis	Description
`event`	`PressEvent`	Oui	—

Retourne

void

onAction — signatures de méthode

Signatures

(event: AccessibilityActionEvent): void

Paramètres

Nom	Type	Requis	Description
`event`	`AccessibilityActionEvent`	Oui	—

Retourne

void

backgroundGradient — champs imbriqués

backgroundGradient champs

Nom	Type	Requis	Description
`angle`	`number`	Oui	—
`colors`	`string[]`	Oui	—

Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.

#Open and close a queue

#Behavior

#Props

#Continue

Référence

Signatures

Paramètres

Retourne

Props (props héritées incluses) 103

Signatures

Paramètres

Retourne

Signatures

Paramètres

Retourne

Signatures

Paramètres

Retourne

Signatures

Paramètres

Retourne

Signatures

Paramètres

Retourne

backgroundGradient champs

Open and close a queue

Behavior

Props

Continue