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

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

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

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

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

開放UI計劃

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

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

selectmenu控件

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

為什麼要有新名稱？

名稱“ 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在造型和擴展傳統(tǒng)方面提供了重大改進<select></select>元素。其內置瀏覽器實現可確?？稍L問性和適當的定位。儘管仍在實驗中， selectmenu具有增強Web形式設計的巨大潛力。參加開放UI計劃，以幫助塑造其未來。

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