Blade UI kit Bootstrap 0.1

Comme je l’expliquais, ou du moins le tentais, pour écrire des formulaires il y a actuellement différentes possibilités. Celle qui ne tente le plus pour l’avenir est en passant par les components Blade.

Mais Blade UI kit est « agnostique » concernant la mise en forme. Enfin même s’il s’inscrit ouvertement sur la stack TALL (donc Tailwind pour la mise en forme). Mais moi je suis contraint de rester sur Bootstratp. En tout cas pour un moment encore…

Du coup, bonjour le nouveau package Blade UI kit Bootstrap

Ce package étend autant que possible Blade UI kit afin de fournir des components de forumulaire directement « stylisés » pour Bootstrap.

Dans mon précédent article j’écrivais un simple formulaire voici ce que cette première version permet de réaliser de façon plus avancée :

1<div class="mb-3">
2    <x-label for="title" />
3    <x-input name="title" :errors="$errors" />
4    <x-error field="title" :errors="$errors" />
5</div>

Va rendre en HTML :

1<div class="mb-3">
2    <label for="title" class="form-label">
3        Title
4    </label>
5    <input name="title" type="text" id="title" class="form-control"/>
6</div>

Et en cas d’erreur de validation par exemple :

 1<div class="mb-3">
 2    <label for="title" class="form-label">
 3        Title
 4    </label>
 5    <input name="title" type="text" id="title" class="form-control is-invalid"
 6        aria-describedby="validation-title-feedback" />
 7    <div id="validation-title-feedback" class="invalid-feedback">
 8        The title field is mandatory.
 9    </div>
10</div>

Simplement avec une règle de validation et avec ça dans le fichier Blade :

1<div class="mb-3">
2    <x-label for="title" />
3    <x-input name="title" :errors="$errors" />
4    <x-error field="title" :errors="$errors" />
5</div>

Bon… nous sommes en 0.1 et la route est longue mais je suis convaincu que c’est la voie à suivre.