Uključite/isključite kontekstualne preklapanja za prikaz popisa poveznica i više s Bootstrap padajućim dodatkom.
Pregled
Padajući izbori su kontekstualni slojevi koji se mogu mijenjati za prikaz popisa veza i više. Interaktivni su s uključenim Bootstrap padajućim JavaScript dodatkom. Prebacuju se klikom, a ne lebdenjem; ovo je namjerna dizajnerska odluka .
Padajući izbori izgrađeni su na biblioteci treće strane, Popper.js , koja pruža dinamičko pozicioniranje i otkrivanje okvira za prikaz. Obavezno uključite popper.min.js prije Bootstrapovog JavaScripta ili koristite bootstrap.bundle.min.js/ bootstrap.bundle.jskoji sadrži Popper.js. Popper.js se ne koristi za pozicioniranje padajućih izbornika u navigacijskim trakama iako dinamičko pozicioniranje nije potrebno.
Standard WAI ARIA definira stvarni role="menu"widget , ali to je specifično za izbornike slične aplikacijama koji pokreću akcije ili funkcije. ARIA izbornici mogu sadržavati samo stavke izbornika, stavke izbornika potvrdnih okvira, stavke izbornika radio gumba, grupe radio gumba i podizbornike.
Bootstrapovi padajući izbornici, s druge strane, dizajnirani su da budu generički i primjenjivi na različite situacije i strukture označavanja. Na primjer, moguće je stvoriti padajuće izbornike koji sadrže dodatne unose i kontrole obrazaca, kao što su polja za pretraživanje ili obrasci za prijavu. Iz tog razloga, Bootstrap ne očekuje (niti automatski dodaje) bilo koji od atributa rolei potrebnih za prave ARIA izbornike. Autori će morati sami uključiti ove specifičnije atribute.aria-
Međutim, Bootstrap dodaje ugrađenu podršku za većinu standardnih interakcija izbornika tipkovnice, kao što je mogućnost kretanja kroz pojedinačne .dropdown-itemelemente pomoću tipki kursora i zatvaranja izbornika pomoću ESCtipke.
Primjeri
Zamotajte prekidač padajućeg izbornika (vaš gumb ili poveznica) i padajući izbornik unutar .dropdownili neki drugi element koji izjavljuje position: relative;. Padajući izbornici mogu se pokrenuti iz <a>ili <button>elemenata kako bi bolje odgovarali vašim potencijalnim potrebama.
Jedno dugme
Bilo koja pojedinačna .btnoznaka može se pretvoriti u padajući izbornik uz neke promjene oznaka. Evo kako ih možete staviti u rad s bilo kojim <button>elementom:
Slično, stvorite podijeljene padajuće izbornike gumba s gotovo istim označavanjem kao padajući izbornici s jednim gumbom, ali uz dodatak .dropdown-toggle-splitza pravilan razmak oko padajućeg izbornika za umetanje.
Koristimo ovu dodatnu klasu za smanjenje horizontale paddings obje strane kareta za 25% i uklanjanje margin-leftdodanog za uobičajene padajuće gumbe. Te dodatne promjene drže karet u središtu gumba za dijeljenje i pružaju pogodno područje prikladnije veličine pokraj glavnog gumba.
Povijesno gledano, sadržaji padajućeg izbornika morali su biti poveznice, ali to više nije slučaj s v4. Sada po želji možete koristiti <button>elemente u svojim padajućim izbornicima umjesto samo <a>s.
Također možete stvoriti neinteraktivne padajuće stavke pomoću .dropdown-item-text. Slobodno dodatno stilizirajte prilagođenim CSS-om ili tekstualnim uslužnim programima.
Prema zadanim postavkama, padajući izbornik automatski se postavlja 100% od vrha i duž lijeve strane nadređenog izbornika. Dodaj .dropdown-menu-rightna a .dropdown-menuza desno poravnanje padajućeg izbornika.
Glavu gore! Padajući izbornici pozicionirani su zahvaljujući Popper.js (osim kada su sadržani u navigacijskoj traci).
Odgovarajuće poravnanje
Ako želite koristiti responzivno poravnanje, onemogućite dinamičko pozicioniranje dodavanjem data-display="static"atributa i upotrijebite responzivne varijacijske klase.
Za poravnanje padajućeg izbornika s danom prijelomnom točkom ili većom, dodajte .dropdown-menu{-sm|-md|-lg|-xl}-right.
Za poravnanje lijevog padajućeg izbornika s danom prijelomnom točkom ili većom, dodajte .dropdown-menu-righti .dropdown-menu{-sm|-md|-lg|-xl}-left.
Imajte na umu da ne morate dodati data-display="static"atribut padajućim gumbima u navigacijskim trakama, jer se Popper.js ne koristi u navigacijskim trakama.
Sadržaj jelovnika
Zaglavlja
Dodajte zaglavlje za označavanje odjeljaka radnji u bilo kojem padajućem izborniku.
Postavite bilo koji tekst slobodnog oblika unutar padajućeg izbornika s tekstom i koristite pomoćne programe za razmake . Imajte na umu da će vam vjerojatno trebati dodatni stilovi veličine kako biste ograničili širinu izbornika.
Neki primjer teksta koji slobodno teče unutar padajućeg izbornika.
A ovo je više primjer teksta.
Obrasci
Stavite obrazac unutar padajućeg izbornika ili ga napravite u padajućem izborniku i upotrijebite pomoćne programe za margine ili ispune da biste mu dali negativni prostor koji vam je potreban.
Putem atributa podataka ili JavaScripta, padajući dodatak uključuje i isključuje skriveni sadržaj (padajući izbornici) mijenjanjem .showklase na nadređenoj stavci popisa. Atribut data-toggle="dropdown"se koristi za zatvaranje padajućih izbornika na razini aplikacije, stoga je dobra ideja uvijek ga koristiti.
Na uređajima s omogućenim dodirom otvaranje padajućeg izbornika dodaje prazne ( $.noop) mouseoverrukovatelje neposrednim potomcima <body>elementa. Ovaj doduše ružan hack neophodan je da se zaobiđe hir u delegiranju događaja u iOS-u , koji bi inače spriječio da dodir bilo gdje izvan padajućeg izbornika pokrene kod koji zatvara padajući izbornik. Nakon što se padajući izbornik zatvori, ovi dodatni prazni mouseoverrukovatelji se uklanjaju.
Preko atributa podataka
Dodajte data-toggle="dropdown"na vezu ili gumb za prebacivanje padajućeg izbornika.
Preko JavaScripta
Pozovite padajuće izbornike putem JavaScripta:
data-toggle="dropdown"još uvijek potrebno
Bez obzira na to pozivate li svoj padajući izbornik putem JavaScripta ili umjesto njega koristite data-api, data-toggle="dropdown"uvijek je potrebno biti prisutan na elementu okidača padajućeg izbornika.
Mogućnosti
Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-, kao u data-offset="".
Ime
Tip
Zadano
Opis
pomaknuti
broj | niz | funkcija
0
Pomak padajućeg izbornika u odnosu na cilj.
Kada se funkcija koristi za određivanje pomaka, poziva se s objektom koji sadrži podatke o pomaku kao prvi argument. Funkcija mora vratiti objekt s istom strukturom. DOM čvor pokretačkog elementa prosljeđuje se kao drugi argument.
Granica ograničenja prelijevanja padajućeg izbornika. Prihvaća vrijednosti 'viewport', 'window', 'scrollParent'ili HTMLElement reference (samo JavaScript). Za više informacija pogledajte Popper.js's preventOverflow dokumente .
Napomena: kada boundaryje postavljeno na bilo koju vrijednost osim 'scrollParent', stil position: staticse primjenjuje na .dropdownspremnik.
Metode
metoda
Opis
$().dropdown('toggle')
Prebacuje padajući izbornik određene navigacijske trake ili navigacije s karticama.
$().dropdown('show')
Prikazuje padajući izbornik određene navigacijske trake ili navigacije s karticama.
$().dropdown('hide')
Skriva padajući izbornik određene navigacijske trake ili navigacije s karticama.
$().dropdown('update')
Ažurira položaj padajućeg izbornika elementa.
$().dropdown('dispose')
Uništava padajući izbornik elementa.
Događaji
Svi padajući događaji pokreću se na .dropdown-menunadređenom elementu i imaju relatedTargetsvojstvo čija je vrijednost preklopni element sidra. hide.bs.dropdowni hidden.bs.dropdowndogađaji imaju clickEventsvojstvo (samo kada je izvorni tip događaja click) koje sadrži objekt događaja za događaj klika.
Događaj
Opis
show.bs.dropdown
Ovaj događaj aktivira se odmah kada se pozove metoda show instance.
shown.bs.dropdown
Ovaj se događaj pokreće kada je padajući izbornik učinjen vidljivim korisniku (pričekat će CSS prijelaze da dovrše).
hide.bs.dropdown
Ovaj se događaj aktivira odmah nakon pozivanja metode hide instance.
hidden.bs.dropdown
Ovaj se događaj pokreće kada se padajući izbornik više ne skriva od korisnika (pričekat će se da CSS prijelazi dovrše).