Pager — Kuito Documentação

Swipe between pages with a native pager. Use it for onboarding, image galleries and full-screen sections.

Swipe through onboarding

tsx

import { Page, Pager, Text, VStack, signal } from 'kuito';

export default function Onboarding() {
  const page = signal(0);

  return (
    <VStack flex={1}>
      <Pager page={page} flex={1}>
        <Page justifyContent="center" alignItems="center">
          <Text>Welcome</Text>
        </Page>
        <Page justifyContent="center" alignItems="center">
          <Text>Sync your library</Text>
        </Page>
        <Page justifyContent="center" alignItems="center">
          <Text>You're all set</Text>
        </Page>
      </Pager>
      <Text textAlign="center">{`${page.value + 1} of 3`}</Text>
    </VStack>
  );
}

Behavior

page is a zero-based index and can be a signal for two-way updates. Put each page inside Page. Give the pager a bounded size so native paging has a viewport.

Continue

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

Referência

Assinaturas

(props: PagerProps): KuitoNode

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`props`	`PagerProps`	Sim	—

Devolve

KuitoNode

Props: PagerProps

Props (incluindo props herdadas) 105

Nome	Tipo	Obrigatório	Descrição
`page`	`number \| Signal<number>`	Não	The page shown, from 0; the first by default. Two-way when given a signal: the pager writes it as the user pages.
`onPageChange`	`(page: number) => void`	Não	The page the user paged to; the app's own `page` reports none.
`children`	`KuitoNode`	Não	Its pages, each a `Page`.
`scrollbar`	`Prop<boolean>`	Não	Shows the scrollbar while scrolling; true by default.
`opacity`	`Animatable<number>`	Não	—
`backgroundColor`	`Animatable<string>`	Não	—
`borderRadius`	`Animatable<number>`	Não	—
`borderColor`	`Animatable<string>`	Não	—
`width`	`Animatable<SizeValue>`	Não	—
`height`	`Animatable<SizeValue>`	Não	—
`translateX`	`Animatable<number>`	Não	—
`translateY`	`Animatable<number>`	Não	—
`scale`	`Animatable<number>`	Não	—
`scaleX`	`Animatable<number>`	Não	—
`scaleY`	`Animatable<number>`	Não	—
`rotate`	`Animatable<number>`	Não	Degrees.
`shadowColor`	`Animatable<string>`	Não	—
`shadowRadius`	`Animatable<number>`	Não	—
`shadowOffsetX`	`Animatable<number>`	Não	—
`shadowOffsetY`	`Animatable<number>`	Não	—
`hidden`	`Prop<boolean>`	Não	Takes the view out of layout and off screen, as CSS `display: none`.
`padding`	`Prop<LengthPercentage>`	Não	—
`position`	`Prop<"relative" \| "absolute">`	Não	—
`id`	`string`	Não	—
`class`	`Prop<ClassNames>`	Não	Class names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
`style`	`StyleDeclarations`	Não	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`	Não	—
`onPressCapture`	`(event: PressEvent) => void`	Não	—
`key`	`string \| number`	Não	—
`paddingTop`	`Prop<LengthPercentage>`	Não	—
`paddingRight`	`Prop<LengthPercentage>`	Não	—
`paddingBottom`	`Prop<LengthPercentage>`	Não	—
`paddingLeft`	`Prop<LengthPercentage>`	Não	—
`minWidth`	`Prop<SizeValue>`	Não	—
`maxWidth`	`Prop<SizeValue>`	Não	—
`minHeight`	`Prop<SizeValue>`	Não	—
`maxHeight`	`Prop<SizeValue>`	Não	—
`aspectRatio`	`Prop<number>`	Não	Width divided by height; sizes the missing side from the other.
`top`	`Prop<LengthPercentageAuto>`	Não	—
`right`	`Prop<LengthPercentageAuto>`	Não	—
`bottom`	`Prop<LengthPercentageAuto>`	Não	—
`left`	`Prop<LengthPercentageAuto>`	Não	—
`margin`	`Prop<LengthPercentageAuto>`	Não	—
`marginTop`	`Prop<LengthPercentageAuto>`	Não	—
`marginRight`	`Prop<LengthPercentageAuto>`	Não	—
`marginBottom`	`Prop<LengthPercentageAuto>`	Não	—
`marginLeft`	`Prop<LengthPercentageAuto>`	Não	—
`flexGrow`	`Prop<number>`	Não	—
`flexShrink`	`Prop<number>`	Não	—
`flexBasis`	`Prop<SizeValue \| "content">`	Não	—
`flex`	`Prop<number>`	Não	A grow factor from a zero basis, as CSS `flex: n`; 0 is inflexible.
`alignSelf`	`Prop<"auto" \| SelfAlignment>`	Não	—
`direction`	`Prop<"ltr" \| "rtl">`	Não	The way lines run; unset, the parent's, and the app's first language's at the root.
`boxSizing`	`Prop<"border-box" \| "content-box">`	Não	—
`paddingInlineStart`	`Prop<LengthPercentage>`	Não	Padding on the side lines start from: the left in `ltr`, the right in `rtl`.
`paddingInlineEnd`	`Prop<LengthPercentage>`	Não	Padding on the side lines end at: the right in `ltr`, the left in `rtl`.
`marginInlineStart`	`Prop<LengthPercentageAuto>`	Não	Margin on the side lines start from: the left in `ltr`, the right in `rtl`.
`marginInlineEnd`	`Prop<LengthPercentageAuto>`	Não	Margin on the side lines end at: the right in `ltr`, the left in `rtl`.
`insetInlineStart`	`Prop<LengthPercentageAuto>`	Não	`left` in `ltr`, `right` in `rtl`.
`insetInlineEnd`	`Prop<LengthPercentageAuto>`	Não	`right` in `ltr`, `left` in `rtl`.
`role`	`Prop<Role>`	Não	—
`onAction`	`(event: AccessibilityActionEvent) => void`	Não	The screen reader action taken, by `name`.
`accessible`	`Prop<boolean>`	Não	Makes the view one screen reader element, read as its label or its children's text.
`label`	`Prop<string>`	Não	What a screen reader says for the view.
`hint`	`Prop<string>`	Não	What happens when the view is activated, read after the label.
`aria-hidden`	`Prop<boolean>`	Não	Screen readers skip the view and its subtree.
`actions`	`Prop<readonly AccessibilityAction[]>`	Não	Actions a screen reader offers; `onAction` receives the one taken.
`live`	`Prop<"off" \| "polite" \| "assertive">`	Não	ARIA's `aria-live`: announces changes to the view's content, on iOS too.
`aria-disabled`	`Prop<boolean>`	Não	—
`aria-selected`	`Prop<boolean>`	Não	—
`aria-checked`	`Prop<boolean \| "mixed">`	Não	—
`aria-busy`	`Prop<boolean>`	Não	—
`aria-expanded`	`Prop<boolean>`	Não	—
`aria-valuemin`	`Prop<number>`	Não	—
`aria-valuemax`	`Prop<number>`	Não	—
`aria-valuenow`	`Prop<number>`	Não	—
`aria-valuetext`	`Prop<string>`	Não	—
`gestures`	`readonly Composable[]`	Não	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>>`	Não	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>>`	Não	Animatable props whose every change moves as `transition` says; the first value applies at once.
`enter`	`Effect`	Não	Where the view enters from: `fade.and(slide.up(12))`.
`exit`	`Prop<Effect>`	Não	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>`	Não	How the view moves to a new frame the layout gives it: `layout={spring()}`.
`overflow`	`Prop<"visible" \| "hidden" \| "clip" \| "scroll">`	Não	hidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
`borderWidth`	`Prop<number>`	Não	—
`backgroundGradient`	`{ angle: number; colors: string[];}`	Não	—
`color`	`Prop<string>`	Não	—
`sharedId`	`Prop<string>`	Não	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>`	Não	—
`justifyContent`	`Prop<ContentAlignment>`	Não	—
`gap`	`Prop<LengthPercentage>`	Não	—
`rowGap`	`Prop<LengthPercentage>`	Não	—
`columnGap`	`Prop<LengthPercentage>`	Não	—
`flexDirection`	`Prop<"row" \| "column" \| "row-reverse" \| "column-reverse">`	Não	—
`flexWrap`	`Prop<"nowrap" \| "wrap" \| "wrap-reverse" \| "balance">`	Não	—
`flexLineCount`	`Prop<number>`	Não	The minimum number of lines a wrapping container breaks into (CSS Flexbox 2).
`alignContent`	`Prop<ContentAlignment>`	Não	—
`keyboard`	`Prop<{ dismiss?: "none" \| "on-drag" \| "interactive"; persistTaps?: "never" \| "always" \| "handled"; inset?: boolean; avoid?: "none" \| "padding" \| "position";}>`	Não	—
`motion`	`ScrollMotion`	Não	Moves with the view every frame on the UI thread: `scrollMotion()`, given to one view.
`onScroll`	`(event: ScrollEvent) => void`	Não	—
`onReachEnd`	`(event: KuitoEvent<"reachend">) => void`	Não	Called once each time the content end comes within the threshold.
`onRefresh`	`(event: KuitoEvent<"refresh">) => void`	Não	Enables pull-to-refresh.
`scrollInterval`	`Prop<number>`	Não	At most one scroll event per this many milliseconds; 50 by default.
`reachEndThreshold`	`Prop<number>`	Não	Distance from the end, in visible lengths, that counts as the end; 0.5 by default.
`refreshing`	`Bound<boolean>`	Não	Shows the pull-to-refresh spinner while true.

onPageChange — assinaturas de método

Assinaturas

(page: number): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`page`	`number`	Sim	—

Devolve

void

onPress — assinaturas de método

Assinaturas

(event: PressEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`PressEvent`	Sim	—

Devolve

void

onPressCapture — assinaturas de método

Assinaturas

(event: PressEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`PressEvent`	Sim	—

Devolve

void

onAction — assinaturas de método

Assinaturas

(event: AccessibilityActionEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`AccessibilityActionEvent`	Sim	—

Devolve

void

backgroundGradient — campos aninhados

backgroundGradient campos

Nome	Tipo	Obrigatório	Descrição
`angle`	`number`	Sim	—
`colors`	`string[]`	Sim	—

onScroll — assinaturas de método

Assinaturas

(event: ScrollEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`ScrollEvent`	Sim	—

Devolve

void

onReachEnd — assinaturas de método

Assinaturas

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

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`KuitoEvent<"reachend">`	Sim	—

Devolve

void

onRefresh — assinaturas de método

Assinaturas

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

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`KuitoEvent<"refresh">`	Sim	—

Devolve

void

Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.

#Swipe through onboarding

#Behavior

#Continue

Referência

Assinaturas

Parâmetros

Devolve

Props (incluindo props herdadas) 105

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

backgroundGradient campos

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Swipe through onboarding

Behavior

Continue