Utilização

Scroll after adding content

tsx
import { Button, For, ref, Scroll, signal, Text, VStack } from 'kuito';
import type { ScrollHandle } from 'kuito';

function Chat() {
  const messages = signal<string[]>([]);
  const thread = ref<ScrollHandle>();

  function send() {
    messages.value = [...messages.value, 'Message ' + (messages.value.length + 1)];
    thread.current?.scrollToEnd();
  }

  return (
    <VStack flex={1} gap={8}>
      <Scroll ref={thread} flex={1}>
        <For each={messages}>{(message) => <Text>{message}</Text>}</For>
      </Scroll>
      <Button onPress={send}>Send</Button>
    </VStack>
  );
}

Declaração do tipo

ts
export interface ScrollHandle extends ElementHandle {
  /**
   * Scrolls to `offset` points along the view's axis, or to `page`, a whole
   * view length each from 0, as `paging` rests; animated by default.
   */
  scrollTo(
    params: { offset: number; animated?: boolean } | { page: number; animated?: boolean },
  ): void;
  /** Scrolls to the end of the content, including what the same update added. */
  scrollToEnd(params?: { animated?: boolean }): void;
}

Membros 11

NomeTipoObrigatórioDescrição
scrollTo(params: { offset: number; animated?: boolean;} | { page: number; animated?: boolean;}) => voidSimScrolls to offset points along the view's axis, or to page, a whole view length each from 0, as paging rests; animated by default.
scrollToEnd(params?: { animated?: boolean;}) => voidSimScrolls to the end of the content, including what the same update added.
idsó de leiturastringSim—
parentsó de leituraElementHandleSim—
childrensó de leituraElementHandle[]Sim—
focus() => voidSim—
blur() => voidSim—
setProperty<K extends keyof ElementProperties>(key: K, value: ElementProperties[K] | null) => voidSimSets a native prop on the view now, until its binding writes it again.
addEventListener(type: string, fn: (e: KuitoNativeEvent) => void, options?: boolean | { capture?: boolean; once?: boolean; signal?: AbortSignal;}) => voidSim—
removeEventListener(type: string, fn: (e: KuitoNativeEvent) => void, options?: boolean | { capture?: boolean;}) => voidSim—
dispatchEvent(event: { type: string; bubbles?: boolean; cancelable?: boolean;}) => booleanSimSends an event through the tree, capture to bubble, as a native one travels: a KuitoCustomEvent, or any object with a type. False when a listener called preventDefault() on a cancelable event.
scrollTo — assinaturas de método

Assinaturas

ts
(params: { offset: number; animated?: boolean; } | { page: number; animated?: boolean; }): void

Parâmetros

NomeTipoObrigatórioDescrição
params{ offset: number; animated?: boolean;} | { page: number; animated?: boolean;}Sim—

Devolve

void

scrollToEnd — assinaturas de método

Assinaturas

ts
(params?: { animated?: boolean; }): void

Parâmetros

NomeTipoObrigatórioDescrição
params{ animated?: boolean;}Não—

Devolve

void

focus — assinaturas de método

Assinaturas

ts
(): void

Parâmetros

Sem parâmetros.

Devolve

void

blur — assinaturas de método

Assinaturas

ts
(): void

Parâmetros

Sem parâmetros.

Devolve

void

setProperty — assinaturas de método

Assinaturas

ts
<K extends keyof ElementProperties>(key: K, value: ElementProperties[K] | null): void

Parâmetros de tipo

NomeRestriçãoPredefinição
Kkeyof ElementProperties—

Parâmetros

NomeTipoObrigatórioDescrição
keyKSim—
valueElementProperties[K]Sim—

Devolve

void

addEventListener — assinaturas de método

Assinaturas

ts
(type: string, fn: (e: KuitoNativeEvent) => void, options?: boolean | { capture?: boolean; once?: boolean; signal?: AbortSignal; }): void

Parâmetros

NomeTipoObrigatórioDescrição
typestringSim—
fn(e: KuitoNativeEvent) => voidSim—
optionsboolean | { capture?: boolean; once?: boolean; signal?: AbortSignal;}Não—

Devolve

void

removeEventListener — assinaturas de método

Assinaturas

ts
(type: string, fn: (e: KuitoNativeEvent) => void, options?: boolean | { capture?: boolean; }): void

Parâmetros

NomeTipoObrigatórioDescrição
typestringSim—
fn(e: KuitoNativeEvent) => voidSim—
optionsboolean | { capture?: boolean;}Não—

Devolve

void

dispatchEvent — assinaturas de método

Assinaturas

ts
(event: { type: string; bubbles?: boolean; cancelable?: boolean; }): boolean

Parâmetros

NomeTipoObrigatórioDescrição
event{ type: string; bubbles?: boolean; cancelable?: boolean;}Sim—

Devolve

boolean

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.