kuito.
Commencer

Match

composant
La traduction de cette page manque ou n'est plus à jour : elle s'affiche en anglais. Lire en anglais

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.

Référence

Signatures

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

Paramètres de type

NomContraintePar défaut
T——

Paramètres

NomTypeRequisDescription
propsMatchProps<T>Oui—

Retourne

KuitoElement

Props: MatchProps<T>

Props (props héritées incluses) 3

NomTypeRequisDescription
whenWhen<T>Oui—
childrenBranchChildren<T>Non—
keystring | numberNon—
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.