Beralih overlay kontekstual untuk menampilkan daftar tautan dan lainnya dengan plugin dropdown Bootstrap
Ringkasan
Dropdown dapat dialihkan, hamparan kontekstual untuk menampilkan daftar tautan dan lainnya. Mereka dibuat interaktif dengan plugin JavaScript dropdown Bootstrap yang disertakan. Mereka dialihkan dengan mengklik, bukan dengan melayang;
Dropdown dibangun di perpustakaan pihak ketiga, Popper. js, yang menyediakan pemosisian dinamis dan deteksi viewport. Pastikan untuk memasukkan popper. min. js sebelum JavaScript Bootstrap atau gunakan
Action
Action Another action Something else here Separated link
2 /Action
Action Another action Something else here Separated link
3 yang berisi Popper. js. Popper. js tidak digunakan untuk memposisikan dropdown di navbar meskipun karena pemosisian dinamis tidak diperlukanJika Anda membuat JavaScript kami dari sumber, itu
Aksesibilitas
Standar WAI ARIA mendefinisikan , tetapi ini khusus untuk menu mirip aplikasi yang memicu tindakan atau fungsi. Menu ARIA hanya dapat berisi item menu, item menu kotak centang, item menu tombol radio, grup tombol radio, dan submenu
Dropdown Bootstrap, di sisi lain, dirancang untuk menjadi umum dan berlaku untuk berbagai situasi dan struktur markup. Misalnya, dimungkinkan untuk membuat dropdown yang berisi input tambahan dan kontrol formulir, seperti kolom pencarian atau formulir login. Untuk alasan ini, Bootstrap tidak mengharapkan (atau menambahkan secara otomatis) salah satu atribut
Action
Action Another action Something else here Separated link
6 danAction
Action Another action Something else here Separated link
7 yang diperlukan untuk menu ARIA yang sebenarnya. Penulis harus memasukkan sendiri atribut yang lebih spesifik iniNamun, Bootstrap menambahkan dukungan bawaan untuk sebagian besar interaksi menu keyboard standar, seperti kemampuan untuk bergerak melalui elemen
Action
Action Another action Something else here Separated link
8 individual menggunakan tombol kursor dan menutup menu dengan tombol ESCContoh
Bungkus sakelar tarik-turun (tombol atau tautan Anda) dan menu tarik-turun di dalam
Action
Action Another action Something else here Separated link
9, atau elemen lain yang menyatakanAction Toggle Dropdown
Action Another action Something else here Separated link
0. Dropdown dapat dipicu dariAction Toggle Dropdown
Action Another action Something else here Separated link
_1or elemen agar lebih sesuai dengan potensi kebutuhan AndaTombol tunggal
Setiap
Action Toggle Dropdown
Action Another action Something else here Separated link
_2 dapat diubah menjadi toggle dropdown dengan beberapa perubahan markup. Inilah cara Anda dapat membuat mereka bekerja dengan baikelemen.
Action Toggle Dropdown
Action Another action Something else here Separated link
3
Action Toggle Dropdown
Action Another action Something else here Separated link
_4Dan dengan
Action Toggle Dropdown
Action Another action Something else here Separated link
1elemen Dropdown linkAction Another action Something else here
Bagian terbaiknya adalah Anda juga dapat melakukan ini dengan varian tombol apa pun
Action
Action Another action Something else here Separated link
tombol Pisah
Demikian pula, buat dropdown tombol terpisah dengan markup yang hampir sama dengan dropdown tombol tunggal, tetapi dengan tambahan
Action Toggle Dropdown
Action Another action Something else here Separated link
6 untuk jarak yang tepat di sekitar caret dropdownKami menggunakan kelas tambahan ini untuk mengurangi
Action Toggle Dropdown
Action Another action Something else here Separated link
7 horizontal di kedua sisi tanda sisipan sebesar 25% dan menghapusAction Toggle Dropdown
Action Another action Something else here Separated link
8 yang ditambahkan untuk tarik-turun tombol reguler. Perubahan ekstra tersebut membuat tanda sisipan tetap berada di tengah tombol pisah dan memberikan area hit dengan ukuran yang lebih tepat di sebelah tombol utamaAction Toggle Dropdown
Action Another action Something else here Separated link
_Perekat
Dropdown tombol bekerja dengan tombol dari semua ukuran, termasuk tombol dropdown default dan terpisah
Tombol split besar Toggle Dropdown
Tombol split kecil Toggle Dropdown
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
Arah
Dropup
Picu menu tarik-turun di atas elemen dengan menambahkan
Action Toggle Dropdown
Action Another action Something else here Separated link
9 ke elemen indukPisahkan dropup Toggle Dropdown
Dropup
Split dropup Toggle Dropdown
Dropright
Picu menu tarik-turun di sebelah kanan elemen dengan menambahkan
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
0 ke elemen indukPisahkan dropright Toggle Dropright
Dropright
Split dropright Toggle Dropright
Dropleft
Picu menu tarik-turun di sebelah kiri elemen dengan menambahkan
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
1 ke elemen indukDropleft
Toggle Dropleft
Split dropleft
Secara historis, konten menu tarik-turun harus berupa tautan, tetapi tidak demikian halnya dengan v4. Sekarang Anda dapat secara opsional menggunakan elemen di dropdown Anda, bukan hanya
Action Toggle Dropdown
Action Another action Something else here Separated link
1s.
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
3
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
_4Anda juga dapat membuat item dropdown non-interaktif dengan
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
5. Jangan ragu untuk bergaya lebih jauh dengan CSS khusus atau utilitas teksAction Another action Something else hereAktif
Tambahkan
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
_6 ke item di tarik-turun untuk menatanya sebagai aktif Dropdown linkAction Another action Something else here
0Dengan disabilitas
Tambahkan
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
_7 ke item di dropdown untuk mengaturnya sebagai dinonaktifkan Dropdown linkAction Another action Something else here
1Secara default, menu tarik-turun secara otomatis diposisikan 100% dari atas dan di sepanjang sisi kiri induknya. Tambahkan
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
8 keLarge button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
9 untuk meratakan kanan menu tarik-turunHati-hati. Dropdown diposisikan berkat Popper. js (kecuali jika terdapat di navbar)
Dropdown linkAction Another action Something else here
2Tambahkan tajuk untuk melabeli bagian tindakan di menu tarik-turun mana pun
Dropdown linkAction Another action Something else here
3Jangka pembagi garis
Pisahkan kelompok item menu terkait dengan pembagi
Dropdown linkAction Another action Something else here
4Teks
Tempatkan teks bentuk bebas apa pun di dalam menu tarik-turun dengan teks dan gunakan utilitas spasi. Perhatikan bahwa Anda mungkin memerlukan gaya ukuran tambahan untuk membatasi lebar menu
Dropdown linkAction Another action Something else here
5Formulir
Letakkan formulir di dalam menu dropdown, atau buat menjadi menu dropdown, dan gunakan utilitas margin atau padding untuk memberikan ruang negatif yang Anda perlukan
Dropdown linkAction Another action Something else here
6 Dropdown linkAction Another action Something else here
7Opsi tarik-turun
Gunakan
Dropup
Split dropup Toggle Dropdown
0 atau
Dropup
Split dropup Toggle Dropdown
1 untuk mengubah lokasi dropdown Dropdown link
Action Another action Something else here
8Penggunaan
Melalui atribut data atau JavaScript, plugin tarik-turun mengalihkan konten tersembunyi (menu tarik-turun) dengan mengalihkan kelas
Dropup
Split dropup Toggle Dropdown
2 pada item daftar induk. Atribut
Dropup
Split dropup Toggle Dropdown
_3 diandalkan untuk menutup menu tarik-turun pada tingkat aplikasi, jadi ada baiknya untuk selalu menggunakannya
Pada perangkat yang mendukung sentuhan, membuka dropdown menambahkan penangan kosong (
Dropup
Split dropup Toggle Dropdown
4)
Dropup
Split dropup Toggle Dropdown
5 ke turunan langsung dari elemen. Peretasan yang diakui jelek ini diperlukan untuk mengatasi kekhasan dalam delegasi acara iOS, yang jika tidak akan mencegah ketukan di mana pun di luar dropdown memicu kode yang menutup dropdown. Setelah dropdown ditutup, penangan
Dropup
Split dropup Toggle Dropdown
5 kosong tambahan ini dihapus
Melalui atribut data
Tambahkan
Dropup
Split dropup Toggle Dropdown
_3 ke tautan atau tombol untuk mengalihkan tarik-turun Dropdown link
Action Another action Something else here
_9Melalui JavaScript
Panggil dropdown melalui JavaScript
Action
Action Another action Something else here Separated link
0
Dropup
Split dropup Toggle Dropdown
3 masih diperlukan
Terlepas dari apakah Anda memanggil dropdown Anda melalui JavaScript atau sebagai gantinya menggunakan data-api,
Dropup
Split dropup Toggle Dropdown
3 selalu harus ada di elemen pemicu dropdown
Pilihan
Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke
Dropright
Split dropright Toggle Dropright
0, seperti pada
Dropright
Split dropright Toggle Dropright
1
Dropright
Split dropright Toggle Dropright
_2,
Dropright
Split dropright Toggle Dropright
3,
Dropright
Split dropright Toggle Dropright
4, atau referensi HTMLElement (khusus JavaScript). Untuk informasi lebih lanjut lihat Popper. js. string referensi. element'toggle'Reference elemen dari menu dropdown. Menerima nilai
Dropright
Split dropright Toggle Dropright
_5,
Dropright
Split dropright Toggle Dropright
6, atau referensi HTMLElement. Untuk informasi lebih lanjut lihat Popper. js. displaystring'dynamic'Secara default, kami menggunakan Popper. js untuk penentuan posisi dinamis. Nonaktifkan ini dengan
Dropright
Split dropright Toggle Dropright
_7
Perhatikan ketika
Dropright
Split dropright Toggle Dropright
8 diatur ke nilai apa pun selain
Dropright
Split dropright Toggle Dropright
4, gaya
Dropleft
Toggle Dropleft
Split dropleft 0 diterapkan ke wadah
Action
Action Another action Something else here Separated link
9Metode
MethodDescriptionDropleft
Toggle Dropleft
Split dropleft 2Mengalihkan menu dropdown dari navbar atau navigasi tab tertentu.
Dropleft
Toggle Dropleft
Split dropleft 3Memperbarui posisi dropdown elemen.
Dropleft
Toggle Dropleft
Split dropleft _4Menghancurkan dropdown elemen
Acara
Semua event dropdown dipicu pada elemen induk
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
9 dan memiliki propertiDropleft
Toggle Dropleft
Split dropleft 6, yang nilainya adalah elemen toggling anchor. Peristiwa
Dropleft
Toggle Dropleft
Split dropleft 7 dan
Dropleft
Toggle Dropleft
Split dropleft 8 memiliki properti
Dropleft
Toggle Dropleft
Split dropleft 9 (hanya jika jenis peristiwa asli adalah
0) yang berisi Objek Peristiwa untuk peristiwa klik