mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Champ de texte

Les champs de texte sont généralement utilisés dans les formulaires. Ceux de mdui prennent en charge la comptabilisation des caractères, la validation de formulaires et d’autres fonctionnalités.

Peut être utilisé avec le système de layout en grille pour organiser les formulaires.

Utilisation

À la fin du chargement de la page, l’initialisation se fait automatiquement. Pour les champs de texte générés dynamiquement, veuillez appeler mdui.mutation() pour les initialiser.

Couleurs

Utiliser la couleur accentuée.

Lecture associée

Spécifications Material Design : composant - champ de texte

Style

Champ de texte sur une seule ligne

Voici un exemple de champ de texte très simple :

Exemple

<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" placeholder="User Name"/>
</div>

Étiquette fixe

Exemple

<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text"/>
</div>

Étiquette flottante

Exemple

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" />
</div>

État désactivé

Ajoutez l’attribut disabled à l’élément .mdui-textfield-input pour désactiver le champ de texte.

Exemple

<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" disabled placeholder="User Name"/>
</div>

<!-- Étiquette fixe -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text" disabled />
</div>

<!-- Étiquette flottante -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" disabled />
</div>

Champ de texte multiligne

Remplacez la balise input du champ de texte sur une seule ligne par une balise textarea pour obtenir un champ de texte multiligne. Le champ de texte multiligne ajuste automatiquement sa hauteur en fonction du contenu.

Exemple

<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" placeholder="Description"></textarea>
</div>

<!-- Étiquette fixe -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">Subject</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Étiquette flottante -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- État désactivé -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Disabled</label>
  <textarea class="mdui-textfield-input" disabled></textarea>
</div>

Ajoutez l’attribut rows à la balise textarea pour fixer la hauteur du champ de texte.

Exemple

<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" rows="4" placeholder="Message"></textarea>
</div>

Avec texte d’aide

Ajoutez un élément <div class="mdui-textfield-helper"></div> à la fin de <div class="mdui-textfield"></div> pour ajouter un texte d’aide.

Exemple

<div class="mdui-textfield">
  <input type="email" class="mdui-textfield-input" placeholder="Email" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

Avec icône

Exemple

<div class="mdui-textfield">
  <i class="mdui-icon material-icons">email</i>
  <input class="mdui-textfield-input" type="email" placeholder="Email"/>
</div>

<!-- Étiquette fixe -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">account_circle</i>
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

<!-- Étiquette flottante, champ de texte multiligne -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <i class="mdui-icon material-icons">textsms</i>
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- État désactivé -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">lock</i>
  <input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div>

Champ de texte dépliable

Exemple

<div class="mdui-textfield mdui-textfield-expandable">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

<div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

Fonctionnalités

Validation du formulaire

mdui utilise la validation de formulaires HTML5. Ajoutez un élément <div class="mdui-textfield-error"></div> à la fin de <div class="mdui-textfield"></div> pour ajouter un message d’erreur.

Si vous incluez à la fois un message d’erreur et un texte d’aide, placez le texte d’aide après l’élément de message d’erreur.

Exemple

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" required />
  <div class="mdui-textfield-error">Le nom d’utilisateur ne peut pas être vide</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" required />
  <div class="mdui-textfield-error">Format d’e-mail incorrect</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Password</label>
  <input
    class="mdui-textfield-input"
    type="text"
    pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$$"
    required
  />
  <div class="mdui-textfield-error">Le mot de passe doit contenir au moins 6 caractères et inclure des lettres majuscules et minuscules</div>
  <div class="mdui-textfield-helper">Veuillez saisir un mot de passe d’au moins 6 caractères comprenant des lettres majuscules et minuscules</div>
</div>

En plus de la validation HTML5, vous pouvez également utiliser JavaScript pour la validation.

Ajoutez la classe .mdui-textfield-invalid au champ de texte lorsque la validation échoue, puis retirez-la lorsque la validation réussit.

Exemple

<div class="mdui-textfield mdui-textfield-invalid">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-error">Le nom d’utilisateur existe déjà</div>
</div>

Statistiques de caractères

Ajoutez l’attribut maxlength="" à l’élément input pour limiter le nombre de caractères saisis ; mdui affichera automatiquement un compteur en temps réel dans le coin inférieur droit du champ de texte.

Exemple

<div class="mdui-textfield">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" maxlength="20" />
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" maxlength="60" />
  <div class="mdui-textfield-error">Format d’e-mail incorrect</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input" maxlength="140"></textarea>
</div>

Champs de texte générés dynamiquement

Si votre champ de texte est généré dynamiquement, vous devez appeler mdui.mutation() pour l’initialiser.

Si vous modifiez dynamiquement le contenu d’un champ de texte, vous devez appeler la méthode mdui.updateTextFields() pour le réinitialiser. Cette méthode peut accepter un sélecteur CSS contenant la classe .mdui-textfield, un élément DOM ou un tableau d’éléments DOM comme argument pour réinitialiser uniquement les champs spécifiés. Si aucun argument n’est fourni, tous les champs de texte de la page seront réinitialisés.

Classes CSS

Nom de classe	Description
`.mdui-textfield`	Définir un champ de texte.
`.mdui-textfield-floating-label`	Définir un champ de texte avec une étiquette flottante.
`.mdui-textfield-label`	Définir l’étiquette du champ de texte.
`.mdui-textfield-input`	Définir la zone de saisie du champ de texte.
`.mdui-textfield-error`	Définir le message d’erreur de validation du formulaire.
`.mdui-textfield-helper`	Définir le texte d’aide du champ de texte.

Panneau pliable

Commandes