HTML komponen Dropdown Moden

TL;DR

Saya ingin mencabar diri saya untuk membina komponen lungsur turun tersuai yang berfungsi dengan borang HTML dan kelihatan sama pada semua platform dan penyemak imbas. Saya akhirnya berjaya membuatnya, dan inilah caranya...

Kod

Kod boleh didapati pada Pen Kod ini.

Bagaimana ia dilakukan

• Buat komponen web asli yang memanjangkan Elemen HTML.
• Berikan keupayaan untuk mempunyai berbilang tema (menggunakan warna yang telah ditetapkan dalam CSS).
• Benarkan untuk menetapkan itemnya sama ada menggunakan setAttribute atau dengan menembak acara yang mengandungi item di dalamnya.
• Dengar acara tersuai yang menunjukkan apabila item dipilih.
• Berikan keupayaan untuk menjadi sebahagian daripada sebarang bentuk HTML. Harap maklum bahawa elemen-dalaman-poliisi diperlukan untuk ini berfungsi pada sesetengah penyemak imbas seperti Safari pada masa menulis artikel ini.

UI komponen lungsur turun

Ia terdiri daripada tiga elemen.

1. elemen input baca sahaja yang memaparkan item yang dipilih pada masa ini.
2. div (pada mulanya tersembunyi) yang mengandungi item dalam menu lungsur turun.
3. ikon untuk menunjukkan keadaan lungsur turun (buka atau ditutup). Ambil perhatian bahawa svg yang digunakan disesuaikan daripada ikon Bootstrap.

Logik perniagaan

1. Apabila disambungkan, paparkan komponen dalam tema yang dipilih. Pilih yang lalai jika tiada yang dipilih.
2. Daftarkan lungsur turun dan acara yang dipilih item diluluskan apabila membuat komponen secara deklaratif.
3. Setelah acara lungsur turun, tangkap item dan tambahkannya pada senarai.
4. Berikan keupayaan untuk menetapkan item yang dipilih secara terprogram. Ini amat berguna apabila item yang dipilih pada masa ini telah diketahui oleh pembekal perkhidmatan. Sebagai contoh, senarai lokasi dalam tapak tempahan dan ia sepatutnya memaparkan bandar semasa di mana pengguna berada.

Bagaimana rupanya

Kesimpulan

Kami mencipta komponen dropdown moden yang boleh disesuaikan menggunakan alat yang tersedia untuk penyemak imbas dan ia kelihatan sama di mana-mana sahaja. Sila beritahu saya jika anda mempunyai sebarang tambahan atau soalan.

Selamat membangun!

Atas ialah kandungan terperinci HTML komponen Dropdown Moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!