TextFieldProps — Kuito Documentation

Utilisation

React to a change outside the UI

Ce type est utilisé par TextField

tsx

import { TextField, signal, watch } from 'kuito';

export function Search(props: { search: (query: string) => void }) {
  const query = signal('');
  watch(query, (text) => {
    const timer = setTimeout(() => props.search(text), 250);
    return () => clearTimeout(timer);
  });
  return <TextField label="Search" value={query} />;
}

Déclaration du type

export interface TextFieldProps extends CommonProps, TextFieldNativeProps {
  /**
   * The text the field shows for what the user typed: a card number's
   * groups, a date's slashes. The caret stays after the character it
   * followed. Runs on the UI thread, before the frame, when it can
   * (docs/keyboard.md#formatting).
   */
  format?: (text: string) => string;
  /** The text, as the user changes it. */
  onChange?: (text: string) => void;
  /** The selected range, as the user moves the caret or selects. */
  onSelectionChange?: (selection: TextSelection) => void;
  onSubmit?: (event: SubmitEvent) => void;
  onFocus?: (event: FocusEvent) => void;
  onBlur?: (event: FocusEvent) => void;
}

Membres 107

Nom	Type	Requis	Description
`format`	`(text: string) => string`	Non	The text the field shows for what the user typed: a card number's groups, a date's slashes. The caret stays after the character it followed. Runs on the UI thread, before the frame, when it can (docs/keyboard.md#formatting).
`onChange`	`(text: string) => void`	Non	The text, as the user changes it.
`onSelectionChange`	`(selection: TextSelection) => void`	Non	The selected range, as the user moves the caret or selects.
`onSubmit`	`(event: SubmitEvent) => void`	Non	—
`onFocus`	`(event: FocusEvent) => void`	Non	—
`onBlur`	`(event: FocusEvent) => void`	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	—
`hidden`	`Prop<boolean>`	Non	Takes the view out of layout and off screen, as CSS `display: none`.
`padding`	`Prop<LengthPercentage>`	Non	—
`paddingTop`	`Prop<LengthPercentage>`	Non	—
`paddingRight`	`Prop<LengthPercentage>`	Non	—
`paddingBottom`	`Prop<LengthPercentage>`	Non	—
`paddingLeft`	`Prop<LengthPercentage>`	Non	—
`width`	`Animatable<SizeValue>`	Non	—
`height`	`Animatable<SizeValue>`	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.
`position`	`Prop<"relative" \| "absolute">`	Non	—
`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.
`opacity`	`Animatable<number>`	Non	—
`backgroundColor`	`Animatable<string>`	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.
`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()}`.
`borderRadius`	`Animatable<number>`	Non	—
`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	—
`borderColor`	`Animatable<string>`	Non	—
`shadowColor`	`Animatable<string>`	Non	—
`shadowRadius`	`Animatable<number>`	Non	—
`shadowOffsetX`	`Animatable<number>`	Non	—
`shadowOffsetY`	`Animatable<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).
`value`	`Bound<string>`	Non	The field's text, as HTML's `value`.
`disabled`	`Prop<boolean>`	Non	Takes no presses or input, as HTML `disabled`.
`placeholder`	`Prop<string>`	Non	—
`placeholderColor`	`Prop<string>`	Non	The placeholder's color.
`selectionColor`	`Prop<string>`	Non	The cursor and selection color.
`enterKeyHint`	`Prop<"enter" \| "done" \| "go" \| "next" \| "search" \| "send">`	Non	HTML's `enterkeyhint`: the enter key's label. `next` moves focus to the next input natively.
`submitBehavior`	`Prop<"submit" \| "blurAndSubmit" \| "newline">`	Non	What the enter key does: `newline` (default with `lines`) adds a line; after onSubmit, `blurAndSubmit` (default without) hides the keyboard, or moves to the next input with enterKeyHint `next`, and `submit` keeps the focus.
`autoFocus`	`Prop<boolean>`	Non	Focuses the input once it is on screen.
`type`	`Prop<"number" \| "search" \| "text" \| "password" \| "email" \| "tel" \| "url">`	Non	HTML's input `type`: the keyboard, and `password` hides the text.
`inputMode`	`Prop<InputMode>`	Non	HTML's `inputmode`: the keyboard to show instead of the type's; `none` shows none.
`autoComplete`	`Prop<"off" \| "email" \| "tel" \| "username" \| "current-password" \| "new-password" \| "one-time-code" \| "name" \| "given-name" \| "family-name" \| "street-address" \| "postal-code" \| "country-name" \| "cc-number">`	Non	HTML's `autocomplete`: what the field holds, for autofill and the password manager.
`autoCapitalize`	`Prop<"none" \| "sentences" \| "words" \| "characters">`	Non	HTML's `autocapitalize`. Unset, `sentences` for `text` and `search` fields and `none` for the others.
`maxLength`	`Prop<number>`	Non	HTML's `maxlength`: the most UTF-16 code units the user can enter. Text the app sets is not cut.
`spellCheck`	`Prop<boolean>`	Non	HTML's `spellcheck`, which also turns autocorrection on or off. Unset, on for `text` and `search` fields.
`lines`	`Prop<number \| { min?: number; max?: number;}>`	Non	Wraps the text over lines: a count sets the height, `{ min, max }` grows with the text (1 and no limit by default). Adding or removing it remounts the field.
`selection`	`Bound<TextSelection>`	Non	The selected range, `{ start, end }` in UTF-16 offsets as HTML's `selectionStart` and `selectionEnd`; `start === end` is the caret. Two-way when given a signal; unset, the caret goes to the end.

format — signatures de méthode

Signatures

(text: string): string

Paramètres

Nom	Type	Requis	Description
`text`	`string`	Oui	—

Retourne

string

onChange — signatures de méthode

Signatures

(text: string): void

Paramètres

Nom	Type	Requis	Description
`text`	`string`	Oui	—

Retourne

void

onSelectionChange — signatures de méthode

Signatures

(selection: TextSelection): void

Paramètres

Nom	Type	Requis	Description
`selection`	`TextSelection`	Oui	—

Retourne

void

onSubmit — signatures de méthode

Signatures

(event: SubmitEvent): void

Paramètres

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

Retourne

void

onFocus — signatures de méthode

Signatures

(event: FocusEvent): void

Paramètres

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

Retourne

void

onBlur — signatures de méthode

Signatures

(event: FocusEvent): void

Paramètres

Nom	Type	Requis	Description
`event`	`FocusEvent`	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.