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

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

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

因此，許多設(shè)計(jì)系統(tǒng)和組件庫(kù)使用HTML，CSS和JavaScript從頭開(kāi)始創(chuàng)建自定義選擇元素。但是，實(shí)現(xiàn)適當(dāng)?shù)目稍L問(wèn)性，鍵盤(pán)導(dǎo)航和準(zhǔn)確的彈出定位是複雜且耗時(shí)的，通常會(huì)導(dǎo)致無(wú)法訪問(wèn)的精選菜單。

selectmenu控件旨在通過(guò)提供內(nèi)置的，高度可觀的替代方案來(lái)解決這個(gè)持久問(wèn)題。

開(kāi)放UI計(jì)劃

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

儘管仍處?kù)对缙陔A段，該項(xiàng)目仍在迅速發(fā)展，結(jié)果令人鼓舞。您可以參加開(kāi)放UI社區(qū)並為其開(kāi)發(fā)做出貢獻(xiàn)。

selectmenu控件

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

為什麼要有新名稱(chēng)？

名稱(chēng)“ SelectMenu”是一個(gè)佔(zhàn)位符，主要是因?yàn)轱@著更改現(xiàn)有<select></select>元素將引起廣泛的兼容性問(wèn)題。因此， selectmenu被設(shè)計(jì)為獨(dú)立控制。

入門(mén)

雖然尚未準(zhǔn)備就緒，但您可以使用以下方式嘗試selectmenu ：

1. 使用基於鉻的瀏覽器（Chrome或Edge）的金絲雀版。
2. 啟用“實(shí)驗(yàn)Web Platform”的標(biāo)誌about:flags和重新啟動(dòng)。
3. 代替<select></select>使用selectmenu網(wǎng)頁(yè)中的元素。

儘管默認(rèn)情況下提供了基本功能，但selectmenu的真正功能在於其樣式和可擴(kuò)展性選項(xiàng)。

鼓勵(lì)反饋！

Open UI團(tuán)隊(duì)歡迎反饋。早期測(cè)試有助於改善控制。通過(guò)打開(kāi)的UI GITHUB存儲(chǔ)庫(kù)報(bào)告錯(cuò)誤或限制。

了解selectmenu解剖結(jié)構(gòu)

造型selectmenu需要了解其內(nèi)部結(jié)構(gòu)：

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

默認(rèn)行為

selectmenu模仿<select></select>。最小的標(biāo)記就足夠了：

<selectmenu>
  <option value="Option 1">選項(xiàng)1</option>
  <option value="Option 2">選項(xiàng)2</option>
  <option value="Option 3">選項(xiàng)3</option>
</selectmenu>

預(yù)設(shè)<button></button>，，，，<label></label> ， 和<listbox></listbox>元素是自動(dòng)生成的。

使用::part()造型

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

 .my-select-menu :: part（button）{
  顏色：白色；
  背景色：＃f00;
  填充：5px;
  邊界拉迪烏斯：5px;
}

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

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

自定義標(biāo)記

對(duì)於更大的控制，請(qǐng)使用命名插槽替換默認(rèn)標(biāo)記：

<selectmenu class="my-custom-select">
  <div slot="button">
    <button behavior="button">打開(kāi)</button>
    <span class="label">選擇一個(gè)選項(xiàng)</span>
  </div>
  <option value="Option 1">選項(xiàng)1</option>
  <option value="Option 2">選項(xiàng)2</option>
  <option value="Option 3">選項(xiàng)3</option>
</selectmenu>

slot="button"屬性替換了默認(rèn)按鈕。 behavior="button"分配按鈕行為和可訪問(wèn)性。類(lèi)似的技術(shù)適用於<listbox></listbox>。

擴(kuò)展標(biāo)記

添加新元素以擴(kuò)展功能：

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

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

替換影子DOM（高級(jí)）

要進(jìn)行完整的控制，請(qǐng)使用attachShadow()替換陰影DOM。這提供了最大的自定義，但需要更高級(jí)的技術(shù)。

結(jié)論

selectmenu在造型和擴(kuò)展傳統(tǒng)方面提供了重大改進(jìn)<select></select>元素。其內(nèi)置瀏覽器實(shí)現(xiàn)可確?？稍L問(wèn)性和適當(dāng)?shù)亩ㄎ?。儘管仍在?shí)驗(yàn)中， selectmenu具有增強(qiáng)Web形式設(shè)計(jì)的巨大潛力。參加開(kāi)放UI計(jì)劃，以幫助塑造其未來(lái)。

以上是SelectMenu HTML標(biāo)籤的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！