Memperkenalkan selectmenu : Kawalan Borang Revolusioner

Artikel ini menyelam ke dalam kawalan bentuk selectmenu eksperimen, menonjolkan keupayaan gaya unggulnya berbanding dengan tradisional<select></select> unsur -unsur. Kami akan meneroka sebab -sebab di sebalik perkembangannya dan potensi untuk merevolusikan reka bentuk borang web.

Pemaju web sering memetik batasan kawalan bentuk gaya sebagai kekurangan platform utama. State of CSS Survey Ranking State 2020 State di antara sepuluh teratas yang paling diperlukan, dengan<select></select> Khususnya dikenal pasti sebagai elemen yang paling bermasalah untuk gaya dengan berkesan. Sementara bahagian butang a<select></select> agak mudah untuk gaya, menyesuaikan pilihan dalam lungsur jatuh masih sangat mencabar.

Oleh itu, banyak sistem reka bentuk dan perpustakaan komponen membuat elemen pilih tersuai dari awal, menggunakan HTML, CSS, dan JavaScript. Walau bagaimanapun, mencapai kebolehcapaian yang betul, navigasi papan kekunci, dan kedudukan popup yang tepat adalah kompleks dan memakan masa, sering mengakibatkan menu pilih yang tidak boleh diakses.

Kawalan selectmenu bertujuan untuk menyelesaikan masalah yang berterusan ini dengan menyediakan alternatif terbina dalam dan sangat bergaya.

Inisiatif UI Terbuka

Inisiatif UI Terbuka, usaha kerjasama yang melibatkan pemaju, pereka, dan pelaksana pelayar, memacu pembangunan selectmenu . Matlamatnya adalah untuk membolehkan pemaju untuk gaya sepenuhnya dan memperluaskan kawalan UI terbina dalam, termasuk selectmenu , dropdowns, kotak semak, dan butang radio. Ini melibatkan mewujudkan spesifikasi untuk pelaksanaan dan menangani keperluan aksesibiliti.

Walaupun masih dalam peringkat awal, projek itu berkembang pesat, dan hasilnya menjanjikan. Anda boleh mengambil bahagian dalam komuniti UI terbuka dan menyumbang kepada pembangunannya.

Kawalan selectmenu

Dilaksanakan dalam Chromium (terutamanya oleh pasukan Microsoft Edge, dengan kerjasama Google Chrome), selectmenu adalah kawalan terbina dalam yang menawarkan pengalaman pemilihan pilihan yang biasa. Ia mempunyai butang yang memaparkan nilai yang dipilih, pop timbul yang dicetuskan dengan mengklik butang, dan senarai pilihan dalam popup.

Mengapa nama baru?

Nama "SelectMenu" adalah pemegang tempat, terutamanya kerana mengubah dengan ketara yang sedia ada<select></select> Unsur akan menyebabkan masalah keserasian yang meluas. Oleh itu, selectmenu direka sebagai kawalan bebas.

Bermula

Walaupun belum siap pengeluaran, anda boleh bereksperimen dengan selectmenu seperti berikut:

1. Gunakan versi Canary pelayar berasaskan kromium (Chrome atau Edge).
2. Dayakan "Ciri -ciri Platform Web Eksperimen" Bendera dalam about:flags dan mulakan semula.
3. Menggantikan<select></select> Unsur -unsur di laman web anda dengan selectmenu .

Walaupun fungsi asas disediakan secara lalai, kuasa sebenar selectmenu terletak pada pilihan gaya dan lanjutannya.

Maklum balas digalakkan!

Pasukan UI Terbuka mengalu -alukan maklum balas. Ujian awal membantu meningkatkan kawalan. Laporkan bug atau batasan melalui repositori GitHub UI terbuka.

Memahami Anatomi selectmenu

Styling selectmenu memerlukan pemahaman struktur dalamannya:

• <selectmenu></selectmenu> : Unsur akar yang mengandungi butang dan kotak senarai.
• <button></button> : Mencetuskan penglihatan kotak senarai.
• <label></label> : (Pilihan) Memaparkan nilai yang dipilih. Tidak semestinya dalam<button></button> .
• <listbox></listbox> : Bungkus<option></option> dan<optgroup></optgroup> unsur -unsur.
• <optgroup></optgroup> : Kumpulan<option></option> elemen dengan label pilihan.
• <option></option> : Mewakili nilai yang boleh dipilih.

Tingkah laku lalai

selectmenu meniru tingkah laku<select></select> . Markup minimum cukup:

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

Lalai<button></button> ,<label></label> , dan<listbox></listbox> unsur -unsur dihasilkan secara automatik.

Gaya dengan ::part()

The ::part() pseudo-element membolehkan gaya komponen individu:

 .my-pilih-menu :: bahagian (butang) {
  Warna: Putih;
  latar belakang warna: #f00;
  Padding: 5px;
  Radius sempadan: 5px;
}

.my-pilih-menu :: bahagian (listbox) {
  Padding: 10px;
  margin-top: 5px;
  Sempadan: 1px merah pepejal;
  Radius sempadan: 5px;
}

Ini gaya butang dan kotak senarai. ::part() berfungsi dengan<button></button> ,<label></label> , dan<listbox></listbox> .

Markup tersuai

Untuk kawalan yang lebih besar, ganti markup lalai menggunakan slot bernama:

<selectmenu class="my-custom-select">
  <div slot="button">
    <button behavior="button">Buka</button>
    <span class="label">Pilih pilihan</span>
  </div>
  <option value="Option 1">Pilihan 1</option>
  <option value="Option 2">Pilihan 2</option>
  <option value="Option 3">Pilihan 3</option>
</selectmenu>

Atribut slot="button" menggantikan butang lalai. behavior="button" memberikan tingkah laku butang dan kebolehcapaian. Teknik serupa digunakan untuk<listbox></listbox> .

Memperluas markup

Tambahkan elemen baru untuk melanjutkan fungsi:

<selectmenu class="my-custom-select">
  <div slot="listbox">
    <div behavior="listbox" popup="">
      <h3>Bunga</h3>
      <option value="Rose">Mawar</option>
      <h3>Pokok</h3>
      <option value="Willow">Willow</option>
    </div>
  </div>
</selectmenu>

Ini menambah pengelompokan dan gaya tersuai.

Menggantikan Shadow Dom (Lanjutan)

Untuk kawalan lengkap, gantikan DOM Shadow menggunakan attachShadow() . Ini menyediakan penyesuaian maksimum tetapi memerlukan teknik yang lebih maju.

Kesimpulan

selectmenu menawarkan penambahbaikan yang ketara dalam gaya dan memanjangkan tradisional<select></select> unsur -unsur. Pelaksanaan pelayar terbina dalamnya memastikan kebolehcapaian dan kedudukan yang betul. Walaupun masih eksperimen, selectmenu memegang potensi besar untuk meningkatkan reka bentuk borang web. Mengambil bahagian dalam inisiatif UI terbuka untuk membantu membentuk masa depannya.

Atas ialah kandungan terperinci Tag html selectMenu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!