Aller au contenu

Vue · Assistant

Assistant multi-étapes

Disponible

Patron de tous les flux guidés (onboarding, configuration, création) : Stepper de progression + Form/FormGroup de l'étape courante + ButtonGroup (Précédent / Suivant) + récapitulatif StructuredList. Un seul NodeSpec → rendu identique en Svelte, React et Vue.

Rendu multi-framework

Utilisez les onglets pour basculer entre Svelte, React, Vue et Angular. Le rendu et le code copié reflètent le framework sélectionné.

Assistant multi-étapes : création de projet (données mock)

  1. Organisation Terminé
  2. 2 Projet En cours
  3. 3 Équipe
  4. 4 Confirmation

Étape 2 · Détails du projet

Informations du projet

Ces informations identifient le projet.

Options
Voir le code (Svelte) 
<div class="wz-shell">
  <Stepper
    current={1}
    label="Création du projet"
    steps={[{"label":"Organisation","description":"Terminé"},{"label":"Projet","description":"En cours"},{"label":"Équipe"},{"label":"Confirmation"}]}
  />
  <div class="wz-body">
    <div class="wz-step">
      <h3 class="wz-step-title">Étape 2 · Détails du projet</h3>
      <Form status="idle">
        <FormGroup
          legend="Informations du projet"
          helperText="Ces informations identifient le projet."
        >
          <Input label="Nom du projet" value="Forge" placeholder="Sent Forge" />
          <Select
            label="Région d'hébergement"
            value="ca-qc"
            options={[{"value":"ca-qc","label":"Canada : Québec"},{"value":"ca-on","label":"Canada : Ontario"},{"value":"eu-fr","label":"Europe : France"}]}
          />
          <Select
            label="Visibilité"
            value="private"
            options={[{"value":"private","label":"Privé"},{"value":"internal","label":"Interne"},{"value":"public","label":"Public"}]}
          />
        </FormGroup>
        <FormGroup legend="Options">
          <Checkbox label="Activer les déploiements automatiques" checked />
          <Checkbox label="Notifier l'équipe par e-mail" />
        </FormGroup>
      </Form>
    </div>
    <aside class="wz-recap">
      <h3 class="wz-step-title">Récapitulatif</h3>
      <StructuredList
        bordered
        items={[{"key":"Organisation","term":"Organisation","value":"Sent Tech"},{"key":"Région","term":"Région","value":"Canada : Québec"},{"key":"Plan","term":"Plan","value":"Pro"}]}
      />
    </aside>
  </div>
  <ButtonGroup label="Navigation de l'assistant" class="wz-nav">
    <Button variant="secondary">Précédent</Button>
    <Button variant="primary">Suivant</Button>
  </ButtonGroup>
</div>

Composants DS utilisés