首頁 >web前端 >css教學 >SelectMenu HTML標籤

SelectMenu HTML標籤

Jennifer Aniston
Jennifer Aniston原創
2025-03-14 11:18:10445瀏覽

SelectMenu HTML標籤

介紹selectmenu :一種革命性的形式控制

本文深入研究了實驗性的selectmenu形式控制,與傳統相比,其出色的樣式功能<select></select>元素。我們將探討其開發的原因及其革新Web形式設計的潛力。

Web開發人員經常將造型形式控制的局限性作為主要平台缺陷。 2020年CSS調查狀態在最需要的十大改進中排名出樣式<select></select>專門被確定為有效風格的最有問題的元素。而當按鈕部分<select></select>相對易於樣式,自定義下拉菜單中的選項仍然非常具有挑戰性。

因此,許多設計系統和組件庫使用HTML,CSS和JavaScript從頭開始創建自定義選擇元素。但是,實現適當的可訪問性,鍵盤導航和準確的彈出定位是複雜且耗時的,通常會導致無法訪問的精選菜單。

selectmenu控件旨在通過提供內置的,高度可觀的替代方案來解決這個持久問題。

開放UI計劃

開放UI計劃是一項涉及開發人員,設計師和瀏覽器實施者的協作努力,正在推動selectmenu的開發。它的目標是使開發人員能夠完全樣式並擴展內置的UI控件,包括selectmenu ,下拉列表,複選框和無線電按鈕。這涉及為實施和解決可訪問性要求創建規格。

儘管仍處於早期階段,該項目仍在迅速發展,結果令人鼓舞。您可以參加開放UI社區並為其開發做出貢獻。

selectmenu控件

SelectMenu是在Chromium(主要由Microsoft Edge團隊,主要由Microsoft Edge團隊)實施的) selectmenu ,是一種新的內置控制,可提供熟悉的選擇選擇體驗。它具有顯示選定值的按鈕,通過單擊按鈕觸發的彈出窗口以及彈出窗口中的選項列表。

為什麼要有新名稱?

名稱“ SelectMenu”是一個佔位符,主要是因為顯著更改現有<select></select>元素將引起廣泛的兼容性問題。因此, selectmenu被設計為獨立控制。

入門

雖然尚未準備就緒,但您可以使用以下方式嘗試selectmenu

  1. 使用基於鉻的瀏覽器(Chrome或Edge)的金絲雀版。
  2. 啟用“實驗Web Platform”的標誌about:flags和重新啟動。
  3. 代替<select></select>使用selectmenu網頁中的元素。

儘管默認情況下提供了基本功能,但selectmenu的真正功能在於其樣式和可擴展性選項。

鼓勵反饋!

Open UI團隊歡迎反饋。早期測試有助於改善控制。通過打開的UI GITHUB存儲庫報告錯誤或限制。

了解selectmenu解剖結構

造型selectmenu需要了解其內部結構:

  • <selectmenu></selectmenu> :包含按鈕和列錶框的根元素。
  • <button></button> :Triggers ListBox可見性。
  • <label></label> :(可選)顯示選定的值。不一定在<button></button>
  • <listbox></listbox> :包裝<option></option><optgroup></optgroup>元素。
  • <optgroup></optgroup> :組<option></option>具有可選標籤的元素。
  • <option></option> :表示可選的值。

默認行為

selectmenu模仿<select></select>。最小的標記就足夠了:

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

預設<button></button>,,,,<label></label> , 和<listbox></listbox>元素是自動生成的。

使用::part()造型

::part()偽元素允許造型單個組件:

 .my-select-menu :: part(button){
  顏色:白色;
  背景色:#f00;
  填充:5px;
  邊界拉迪烏斯:5px;
}

.my-select-menu :: part(listBox){
  填充:10px;
  保證金頂:5px;
  邊界:1PX固體紅色;
  邊界拉迪烏斯:5px;
}

這會使用按鈕和列錶框。 ::part()可以使用<button></button>,,,,<label></label> , 和<listbox></listbox>

自定義標記

對於更大的控制,請使用命名插槽替換默認標記:

<selectmenu class="my-custom-select">
  <div slot="button">
    <button behavior="button">打開</button>
    <span class="label">選擇一個選項</span>
  </div>
  <option value="Option 1">選項1</option>
  <option value="Option 2">選項2</option>
  <option value="Option 3">選項3</option>
</selectmenu>

slot="button"屬性替換了默認按鈕。 behavior="button"分配按鈕行為和可訪問性。類似的技術適用於<listbox></listbox>

擴展標記

添加新元素以擴展功能:

<selectmenu class="my-custom-select">
  <div slot="listbox">
    <div behavior="listbox" popup="">
      <h3>花朵</h3>
      <option value="Rose">玫瑰</option>
      <h3>樹木</h3>
      <option value="Willow">柳</option>
    </div>
  </div>
</selectmenu>

這增加了自定義分組和样式。

替換影子DOM(高級)

要進行完整的控制,請使用attachShadow()替換陰影DOM。這提供了最大的自定義,但需要更高級的技術。

結論

selectmenu在造型和擴展傳統方面提供了重大改進<select></select>元素。其內置瀏覽器實現可確保可訪問性和適當的定位。儘管仍在實驗中, selectmenu具有增強Web形式設計的巨大潛力。參加開放UI計劃,以幫助塑造其未來。

以上是SelectMenu HTML標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn