Letzte Änderungen am Validierungsstil

Um die Funktionalität zu maximieren und gleichzeitig fehlende Stile hinzuzufügen, beachten Sie dieses Grundprinzip: Gehen Sie nicht davon aus.

Das bedeutet, dass wir CSS-Variablen für relative Abstände, Ränder, Rahmen und Farben verwenden können, aber das Aussehen des Kontrollkästchens nicht vorschreiben. Dabei handelt es sich um eine Stilentscheidung auf Projektebene, nicht um eine elementspezifische Entscheidung. (Einige Designsysteme, wie Material Design, gestalten jedes Element stark und behindern so die Wiederverwendung einzelner Komponenten.)

Kontrollkästchen-Styling

Für das Kontrollkästchen tauschen Sie einfach die Positionen des Kontrollkästchens und der Beschriftung aus. Überlassen Sie das Gesamtdesign des Projekts die Gestaltung des Kontrollkästchens. Es gibt zwei Ansätze: eine einfache Methode und eine komplexere. Der komplexe Ansatz verwendet CSS wie folgt:

<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>

Eine einfachere Lösung besteht darin, dem cr-field:

explizit eine neue Typeigenschaft zuzuweisen

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

Dann verwenden Sie dieses weniger komplexe CSS:

<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>

Dieser einfachere Selektor bietet mehr Flexibilität beim Gestalten anderer Elemente wie erforderliche Sternchen, Hilfetext und Feedback-Nachrichten. Manchmal ist ein weniger komplizierter Ansatz besser.

Adressierung von Grenzfällen

Ein Szenario beinhaltete ein verdecktes erforderliches Sternchen, das ganz rechts positioniert war. Ohne die Bibliothekskomponente oder das gemeinsam genutzte CSS zu ändern, können wir ihre Sichtbarkeit verbessern, indem wir ihren Container formatieren:

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

Dazu gehörte Folgendes:

1. Festlegen der Breite des Containers auf einen gewünschten Prozentsatz und Ändern seiner Anzeige auf block (Winkelkomponenten sind standardmäßig auf contents eingestellt).
2. Anpassung der inneren Komponentenbreiten auf jeweils 50 %.
3. Aktualisierung der Fehlermeldung in „Fügen Sie ein Datum in der Zukunft hinzu“, das sowohl abgelaufene Datums- als auch erforderliche Wertregeln umfasst.

Benutzerdefiniertes Kontrollkästchen-Styling

Projekte haben oft einzigartige Kontrollkästchenstile. Lassen Sie uns mithilfe unseres vorhandenen CSS ein Kontrollkästchen anhand eines MDN-Beispiels formatieren:

<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>

Dies zeigt, dass die Vermeidung übermäßig komplexer Selektoren CSS-Konflikte verhindert.

Versteckte und automatisch ausgefüllte Felder

Versteckte Eingaben vereinfachen die Validierung. Wenn innerhalb eines cr-field, ist die Validierung unkompliziert. Für versteckte Eingaben außerhalb dieses Kontexts führen wir das Attribut type="hidden" und den entsprechenden Stil ein:

<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>

Für automatisch ausgefüllte Felder verwenden wir type="static", um eine Überlappung von Platzhalterbeschriftungen zu verhindern:

<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>

Fazit

Unsere Ziele waren: native HTML-Eingaben, minimale Validierungsregeln, ein flexibles Angular-Formular, attributbasierter Stil, lose Formularübermittlung und minimaler, ersetzbarer Stil. Wir glauben, dass wir diese Ziele erreicht haben.

Das obige ist der detaillierte Inhalt vonLetzte Änderungen am Validierungsstil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!