介紹selectmenu
:一種革命性的形式控制
本文深入研究了實驗性的selectmenu
形式控制,與傳統相比,其出色的樣式功能<select></select>
元素。我們將探討其開發的原因及其革新Web形式設計的潛力。
Web開發人員經常將造型形式控制的局限性作為主要平台缺陷。 2020年CSS調查狀態在最需要的十大改進中排名出樣式<select></select>
專門被確定為有效風格的最有問題的元素。而當按鈕部分<select></select>
相對易於樣式,自定義下拉菜單中的選項仍然非常具有挑戰性。
因此,許多設計系統和組件庫使用HTML,CSS和JavaScript從頭開始創建自定義選擇元素。但是,實現適當的可訪問性,鍵盤導航和準確的彈出定位是複雜且耗時的,通常會導致無法訪問的精選菜單。
selectmenu
控件旨在通過提供內置的,高度可觀的替代方案來解決這個持久問題。
開放UI計劃是一項涉及開發人員,設計師和瀏覽器實施者的協作努力,正在推動selectmenu
的開發。它的目標是使開發人員能夠完全樣式並擴展內置的UI控件,包括selectmenu
,下拉列表,複選框和無線電按鈕。這涉及為實施和解決可訪問性要求創建規格。
儘管仍處於早期階段,該項目仍在迅速發展,結果令人鼓舞。您可以參加開放UI社區並為其開發做出貢獻。
selectmenu
控件SelectMenu是在Chromium(主要由Microsoft Edge團隊,主要由Microsoft Edge團隊)實施的) selectmenu
,是一種新的內置控制,可提供熟悉的選擇選擇體驗。它具有顯示選定值的按鈕,通過單擊按鈕觸發的彈出窗口以及彈出窗口中的選項列表。
名稱“ SelectMenu”是一個佔位符,主要是因為顯著更改現有<select></select>
元素將引起廣泛的兼容性問題。因此, selectmenu
被設計為獨立控制。
雖然尚未準備就緒,但您可以使用以下方式嘗試selectmenu
:
about:flags
和重新啟動。<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>
這增加了自定義分組和样式。
要進行完整的控制,請使用attachShadow()
替換陰影DOM。這提供了最大的自定義,但需要更高級的技術。
selectmenu
在造型和擴展傳統方面提供了重大改進<select></select>
元素。其內置瀏覽器實現可確保可訪問性和適當的定位。儘管仍在實驗中, selectmenu
具有增強Web形式設計的巨大潛力。參加開放UI計劃,以幫助塑造其未來。
以上是SelectMenu HTML標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章!