Das SelectMenu HTML -Tag

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 id="Blumen">Blumen</h3>
      <option value="Rose">Rose</option>
      <h3 id="Bäume">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!