Derniers ajustements du style de validation

Pour maximiser les fonctionnalités tout en ajoutant des styles manquants, rappelez-vous ce principe clé : Ne présumez pas.

Cela signifie que nous pouvons utiliser des variables CSS pour le remplissage relatif, les marges, les bordures et les couleurs, mais nous ne dicterons pas l'apparence de la case à cocher. Il s'agit d'une décision de style au niveau du projet, et non d'un élément spécifique. (Certains systèmes de conception, comme Material Design, stylisent fortement chaque élément, empêchant la réutilisation des composants individuels.)

Style des cases à cocher

Pour la case à cocher, échangez simplement les positions de la case à cocher et de l'étiquette. Laissez la conception globale du projet gérer l’apparence de la case à cocher. Deux approches existent : une méthode simple et une autre plus complexe. L'approche complexe utilise CSS comme ceci :

<code class="language-css">.cr-field {
  /* Target previous sibling */
  .cr-label:has(~ [type="checkbox"]) {
    /* Crucial: remove transform in all cases */
    transform: none !important;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding-inline-start: 1.8rem;
    position: relative;
    display: inline-block;
    background: none;
    cursor: pointer;
  }

  .cr-input[type="checkbox"] {
    position: absolute;
    inset-inline-start: 0;
  }
}</code>

Une solution plus simple consiste à attribuer explicitement une nouvelle propriété de type au cr-field:

<code class="language-html"><!-- input.partial -->
<div class="cr-field cr-checkbox">
  <!-- ... -->
</div></code>

Ensuite, utilisez ce CSS moins complexe :

<code class="language-css">.cr-field.cr-checkbox {
  .cr-label {
    /* Same as above */
  }
  .cr-input {
    /* Same as above */
  }
  .cr-feedback {
    margin-block-start: 0;
    float: none;
  }
  .cr-required {
    position: static;
  }
}</code>

Ce sélecteur plus simple offre plus de flexibilité pour styliser d'autres éléments tels que les astérisques requis, le texte d'aide et les messages de commentaires. Parfois, une approche moins complexe est préférable.

Résoudre les cas extrêmes

Un scénario impliquait un astérisque obligatoire masqué, positionné à l’extrême droite. Sans altérer le composant bibliothèque ou le CSS partagé, on peut améliorer sa visibilité en stylisant son conteneur :

<code class="language-css">/* Set container width to c-5 and display as block */</code>

Cela impliquait :

1. Définir la largeur du conteneur sur un pourcentage souhaité et modifier son affichage en block (les composants angulaires par défaut sont contents).
2. Ajustement des largeurs des composants intérieurs à 50 % chacun.
3. Mise à jour du message d'erreur "Ajouter une date dans le futur", englobant à la fois les règles de date d'expiration et de valeur requise.

Style de case à cocher personnalisé

Les projets ont souvent des styles de cases à cocher uniques. En utilisant notre CSS existant, stylisons une case à cocher en utilisant un exemple MDN :

<code class="language-css">.gr-something .cr-field.cr-checkbox {
  .cr-input {
    /* Remove default appearance */
    appearance: none;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    transition: all 0.4s;
  }
  /* ...rest of MDN-based styles... */
}</code>

Cela démontre qu'éviter les sélecteurs trop complexes évite les conflits CSS.

Champs masqués et remplis automatiquement

Les entrées cachées simplifient la validation. Si dans un cr-field, la validation est simple. Pour les entrées masquées en dehors de ce contexte, nous introduisons l'attribut type="hidden" et le style en conséquence :

<code class="language-css">.cr-field.cr-hidden {
  .cr-label {
    display: none;
  }
  .cr-input[required] ~ .cr-required {
    display: none;
  }
  .cr-feedback {
    float: none;
    margin-block-start: 0;
    margin-inline-start: 0;
  }
}</code>

Pour les champs remplis automatiquement, nous utilisons type="static" pour éviter le chevauchement des étiquettes d'espace réservé :

<code class="language-css">.cr-field {
  /* Target previous sibling */
  .cr-label:has(~ [type="checkbox"]) {
    /* Crucial: remove transform in all cases */
    transform: none !important;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding-inline-start: 1.8rem;
    position: relative;
    display: inline-block;
    background: none;
    cursor: pointer;
  }

  .cr-input[type="checkbox"] {
    position: absolute;
    inset-inline-start: 0;
  }
}</code>

Conclusion

Nos objectifs étaient : des entrées HTML natives, des règles de validation minimales, un formulaire angulaire flexible, un style basé sur les attributs, une soumission de formulaire libre et un style minimal et remplaçable. Nous pensons avoir atteint ces objectifs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!