Einführung von selectmenu : Eine revolution?re Formsteuerung

Dieser Artikel taucht in die experimentelle selectmenu -Formkontrolle ein und unterstreicht seine überlegenen Styling -Funktionen im Vergleich zu traditioneller<select></select> Elemente. Wir werden die Gründe für die Entwicklung und ihr Potenzial zur Revolutionierung des Webformdesigns untersuchen.

Webentwickler zitieren h?ufig die Grenzen der Styling -Formsteuerung als Hauptplattformmangel. Die 2020 State of CSS-Umfrage bewertete Form des Formulars unter den zehn am meisten ben?tigten Verbesserungen mit<select></select> speziell als das problematischste Element identifiziert, das wir effektiv stylen k?nnen. W?hrend der Knopfabschnitt von a<select></select> Es ist relativ einfach zu stylen. Das Anpassen der Optionen innerhalb des Dropdowns bleibt unglaublich herausfordernd.

Infolgedessen erstellen viele Designsysteme und Komponentenbibliotheken benutzerdefinierte ausgew?hlte Elemente von Grund auf mithilfe von HTML, CSS und JavaScript. Die ordnungsgem??e Zug?nglichkeit, die Tastaturnavigation und die genaue Popup-Positionierung sind jedoch komplex und zeitaufw?ndig, was h?ufig zu unzug?nglichen Auswahlmenüs führt.

Die selectmenu Steuerung zielt darauf ab, dieses anhaltende Problem zu l?sen, indem eine integrierte, hochstilbare Alternative bereitgestellt wird.

Die offene UI -Initiative

Die Open UI -Initiative, eine gemeinsame Anstrengung, an der Entwickler, Designer und Browser -Implementierer beteiligt sind, treibt die Entwicklung von selectmenu vor. Sein Ziel ist es, den Entwicklern die vollst?ndigen Style und Erweiterung der integrierten UI-Steuerelemente zu erm?glichen, einschlie?lich selectmenu , Dropdowns, Kontrollk?stchen und Optionsfeldern. Dies beinhaltet das Erstellen von Spezifikationen für die Implementierung und die Befriedigung von Barrierefreiheitsanforderungen.

Das Projekt ist zwar noch in den frühen Stadien, und die Ergebnisse sind vielversprechend. Sie k?nnen an der Open UI -Community teilnehmen und zur Entwicklung beitragen.

Die selectmenu -Steuerung

Implementiert in Chrom (haupts?chlich vom Microsoft Edge-Team, in Zusammenarbeit mit Google Chrome) ist selectmenu eine neue integrierte Steuerung, die eine vertraute Auswahl von Optionen bietet. Es verfügt über eine Schaltfl?che mit dem ausgew?hlten Wert, einem Popup, das durch Klicken auf die Schaltfl?che und eine Liste der Optionen im Popup ausgel?st wird.

Warum ein neuer Name?

Der Name "SelectMenu" ist ein Platzhalter, vor allem, weil das Bestehende erheblich ver?ndert wird<select></select> Element würde weit verbreitete Kompatibilit?tsprobleme verursachen. Daher ist selectmenu als unabh?ngige Kontrolle konzipiert.

Erste Schritte

Obwohl Sie noch nicht produktionsbereit sind, k?nnen Sie wie folgt mit selectmenu experimentieren:

1. Verwenden Sie eine Kanarische Version eines Browsers auf Chrombasis (Chrom oder Kante).
2. Aktivieren Sie das Flag "Experimental Web Platform Features" in about:flags und Neustart.
3. Ersetzen<select></select> Elemente auf Ihrer Webseite mit selectmenu .

W?hrend die grundlegende Funktionalit?t standardm??ig bereitgestellt wird, liegt die wahre Kraft von selectmenu in seinen Styling- und Erweiterbarkeitsoptionen.

Feedback ermutigt!

Das Open UI -Team begrü?t Feedback. Frühe Tests verbessern die Kontrolle. Melden Sie Fehler oder Einschr?nkungen über das Open UI Github -Repository.

Verst?ndnis selectmenu Anatomie

Das Styling selectmenu erfordert das Verst?ndnis der internen Struktur:

• <selectmenu></selectmenu> : Das Root -Element, das die Schaltfl?che und die Listbox enth?lt.
• <button></button> : Triggers Listbox -Sichtbarkeit.
• <label></label> : (Optional) Zeigt den ausgew?hlten Wert an. Nicht unbedingt innerhalb der<button></button> .
• <listbox></listbox> : Wraps<option></option> Und<optgroup></optgroup> Elemente.
• <optgroup></optgroup> : Gruppen<option></option> Elemente mit einem optionalen Etikett.
• <option></option> : Repr?sentiert w?hlbare Werte.

Standardverhalten

selectmenu ahmt das Verhalten von nach<select></select> . Minimales Markup reicht aus:

<selectmenu>
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
</selectmenu>

Standard<button></button> Anwesend<label></label> , Und<listbox></listbox> Elemente werden automatisch generiert.

Styling mit ::part()

Das ::part() Pseudo-Element erm?glicht das Styling einzelner Komponenten:

 .My-Select-Menu :: Teil (Button) {
  Farbe: wei?;
  Hintergrundfarbe: #f00;
  Polsterung: 5px;
  Border-Radius: 5px;
}

.My-Select-Menu :: Teil (Listbox) {
  Polsterung: 10px;
  Rand: 5px;
  Grenze: 1px solide Rot;
  Border-Radius: 5px;
}

Dadurch wird die Schaltfl?che und die Listbox gestaltet. ::part() funktioniert mit<button></button> Anwesend<label></label> , Und<listbox></listbox> .

Custom Markup

Für eine gr??ere Steuerung ersetzen Sie das Standardmarkup durch benannte Slots:

<selectmenu class="my-custom-select">
  <div slot="button">
    <button behavior="button">Offen</button>
    <span class="label">W?hlen Sie eine Option</span>
  </div>
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
</selectmenu>

Das Attribut für slot="button" ersetzt die Standard -Taste. behavior="button" weist das Tastenverhalten und die Zug?nglichkeit zu. ?hnliche Techniken gelten für die<listbox></listbox> .

Markup erweitern

Fügen Sie neue Elemente hinzu, um die Funktionalit?t zu erweitern:

<selectmenu class="my-custom-select">
  <div slot="listbox">
    <div behavior="listbox" popup="">
      <h3>Blumen</h3>
      <option value="Rose">Rose</option>
      <h3>B?ume</h3>
      <option value="Willow">Weide</option>
    </div>
  </div>
</selectmenu>

Dies fügt benutzerdefinierte Gruppierung und Styling hinzu.

Schattendom ersetzen (Fortgeschrittene)

Um die vollst?ndige Steuerung zu erhalten, ersetzen Sie das Shadow -DOM durch attachShadow() . Dies bietet eine maximale Anpassung, erfordert jedoch fortgeschrittenere Techniken.

Abschluss

selectmenu bietet signifikante Verbesserungen im Styling und der Verl?ngerung der traditionellen Ausweitung<select></select> Elemente. Die integrierte Browser-Implementierung gew?hrleistet die Zug?nglichkeit und die ordnungsgem??e Positionierung. selectmenu hat zwar noch experimentell und verfügt über ein immenses Potenzial für die Verbesserung des Webformdesigns. Nehmen Sie an der Open UI -Initiative teil, um ihre Zukunft zu gestalten.

Das obige ist der detaillierte Inhalt vonDas SelectMenu HTML -Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!