kuito.
Loslegen

Match

Komponente
Die Übersetzung dieser Seite fehlt oder ist veraltet, daher wird sie auf Englisch angezeigt. Auf Englisch lesen

Describe one branch of a Switch. Use it to associate a condition with a specific view.

Render the matching playback state

tsx
import { Match, Switch, Text, signal } from 'kuito';

export default function Status() {
  const state = signal<'idle' | 'playing' | 'paused'>('idle');

  return (
    <Switch fallback={<Text>Nothing playing</Text>}>
      <Match when={state.value === 'playing'}>
        <Text>Playing</Text>
      </Match>
      <Match when={state.value === 'paused'}>
        <Text>Paused</Text>
      </Match>
    </Switch>
  );
}

Behavior

Match must be directly inside Switch. Its when condition can track state. A callback child receives the truthy value, as with Show.

Continue

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

Referenz

Signaturen

ts
<T>(props: MatchProps<T>): KuitoElement

Typparameter

NameEinschränkungStandard
T——

Parameter

NameTypErforderlichBeschreibung
propsMatchProps<T>Ja—

Rückgabe

KuitoElement

Props: MatchProps<T>

Props (einschließlich geerbter Props) 3

NameTypErforderlichBeschreibung
whenWhen<T>Ja—
childrenBranchChildren<T>Nein—
keystring | numberNein—
Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.