ScrollHandle — Kuito Dokumentation

Verwendung

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>
  );
}

Typdeklaration

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;
}

Mitglieder 11

Name	Typ	Erforderlich	Beschreibung
`scrollTo`	`(params: { offset: number; animated?: boolean;} \| { page: number; animated?: boolean;}) => void`	Ja	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.
`scrollToEnd`	`(params?: { animated?: boolean;}) => void`	Ja	Scrolls to the end of the content, including what the same update added.
`id`schreibgeschützt	`string`	Ja	—
`parent`schreibgeschützt	`ElementHandle`	Ja	—
`children`schreibgeschützt	`ElementHandle[]`	Ja	—
`focus`	`() => void`	Ja	—
`blur`	`() => void`	Ja	—
`setProperty`	`<K extends keyof ElementProperties>(key: K, value: ElementProperties[K] \| null) => void`	Ja	Sets 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;}) => void`	Ja	—
`removeEventListener`	`(type: string, fn: (e: KuitoNativeEvent) => void, options?: boolean \| { capture?: boolean;}) => void`	Ja	—
`dispatchEvent`	`(event: { type: string; bubbles?: boolean; cancelable?: boolean;}) => boolean`	Ja	Sends 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 — Methodensignaturen

Signaturen

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

Parameter

Name	Typ	Erforderlich	Beschreibung
`params`	`{ offset: number; animated?: boolean;} \| { page: number; animated?: boolean;}`	Ja	—

Rückgabe

void

scrollToEnd — Methodensignaturen

Signaturen

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

Parameter

Name	Typ	Erforderlich	Beschreibung
`params`	`{ animated?: boolean;}`	Nein	—

Rückgabe

void

focus — Methodensignaturen

Signaturen

(): void

Parameter

Keine Parameter.

Rückgabe

void

blur — Methodensignaturen

Signaturen

(): void

Parameter

Keine Parameter.

Rückgabe

void

setProperty — Methodensignaturen

Signaturen

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

Typparameter

Name	Einschränkung	Standard
`K`	`keyof ElementProperties`	—

Parameter

Name	Typ	Erforderlich	Beschreibung
`key`	`K`	Ja	—
`value`	`ElementProperties[K]`	Ja	—

Rückgabe

void

addEventListener — Methodensignaturen

Signaturen

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

Parameter

Name	Typ	Erforderlich	Beschreibung
`type`	`string`	Ja	—
`fn`	`(e: KuitoNativeEvent) => void`	Ja	—
`options`	`boolean \| { capture?: boolean; once?: boolean; signal?: AbortSignal;}`	Nein	—

Rückgabe

void

removeEventListener — Methodensignaturen

Signaturen

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

Parameter

Name	Typ	Erforderlich	Beschreibung
`type`	`string`	Ja	—
`fn`	`(e: KuitoNativeEvent) => void`	Ja	—
`options`	`boolean \| { capture?: boolean;}`	Nein	—

Rückgabe

void

dispatchEvent — Methodensignaturen

Signaturen

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

Parameter

Name	Typ	Erforderlich	Beschreibung
`event`	`{ type: string; bubbles?: boolean; cancelable?: boolean;}`	Ja	—

Rückgabe

boolean

Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.