Popovers
Dokumentácia a príklady pridávania kontextových okien Bootstrap, ako sú tie, ktoré sa nachádzajú v systéme iOS, do akéhokoľvek prvku na vašej lokalite.
Čo by ste mali vedieť pri používaní popover plugin:
- Popovery sa pri určovaní polohy spoliehajú na knižnicu Popper.js tretej strany . Aby kontextové okná fungovali, musíte pred bootstrap.js zahrnúť popper.min.js alebo použiť
bootstrap.bundle.min.js
/bootstrap.bundle.js
ktorý obsahuje Popper.js! - Popovery vyžadujú doplnok tooltip ako závislosť.
- Ak vytvárate náš JavaScript zo zdroja, vyžaduje
util.js
. - Vyskakovacie okná sú aktivované z dôvodov výkonu, takže ich musíte inicializovať sami .
- Nulová dĺžka
title
acontent
hodnoty nikdy nezobrazia kontextové okno. - Špecifikujte
container: 'body'
, aby ste sa vyhli problémom s vykresľovaním v zložitejších komponentoch (ako sú naše vstupné skupiny, skupiny tlačidiel atď.). - Spustenie vyskakovacích okien na skrytých prvkoch nebude fungovať.
- Vyskakovacie okná pre prvky
.disabled
alebodisabled
prvky musia byť spustené na prvku obalu. - Pri spustení z kotiev, ktoré sa zalomia cez viacero riadkov, budú vyskakovacie okná vycentrované medzi celkovou šírkou kotiev. Použite
white-space: nowrap;
na<a>
s, aby ste sa vyhli tomuto správaniu. - Vyskakovacie okná musia byť skryté pred odstránením príslušných prvkov z modelu DOM.
Pokračujte v čítaní, aby ste videli, ako fungujú vyskakovacie okná s niekoľkými príkladmi.
Jedným zo spôsobov, ako inicializovať všetky kontextové okná na stránke, je vybrať ich podľa ich data-toggle
atribútu:
Ak máte nejaké štýly v nadradenom prvku, ktoré zasahujú do kontextového okna, budete chcieť zadať vlastný container
, aby sa namiesto toho v tomto prvku objavil kód HTML kontextového okna.
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
K dispozícii sú štyri možnosti: zarovnané hore, vpravo, dole a vľavo.
Pomocou focus
spúšťača zatvorte kontextové okná pri ďalšom kliknutí používateľa na iný prvok, než je prvok prepínača.
Na zatvorenie pri nasledujúcom kliknutí sa vyžaduje špecifická značka
Pre správne správanie medzi prehliadačmi a platformami musíte použiť <a>
značku, nie značku <button>
, a tiež musíte zahrnúť tabindex
atribút.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
Prvky s disabled
atribútom nie sú interaktívne, čo znamená, že používatelia na ne nemôžu umiestniť kurzor myši alebo na ne kliknúť, aby vyvolali kontextové okno (alebo popis). Ako riešenie budete chcieť spustiť kontextové okno z obalu <div>
alebo <span>
a prepísať pointer-events
prvok na zakázanom prvku.
V prípade vypnutých spúšťačov kontextových okien môžete tiež uprednostniť data-trigger="hover"
, aby sa kontextové okno zobrazovalo vašim používateľom ako okamžitá vizuálna spätná väzba, pretože nemusia očakávať, že kliknú na zakázaný prvok.
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Povoliť vyskakovacie okná prostredníctvom JavaScriptu:
Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-
, ako v data-animation=""
.
názov | Typ | Predvolené | Popis |
---|---|---|---|
animácie | boolovská hodnota | pravda | Na vyskakovacie okno použite prechod zoslabovania CSS |
kontajner | reťazec | prvok | falošný | falošný | Pripojí kontextové okno ku konkrétnemu prvku. Príklad: |
obsahu | reťazec | prvok | funkciu | '' |
Ak je zadaná funkcia, bude volaná s |
meškanie | číslo | objekt | 0 | Oneskorenie zobrazenia a skrytia popoveru (ms) – netýka sa manuálneho typu spúšťania Ak je zadané číslo, oneskorenie sa použije na skrytie/zobrazenie Štruktúra objektu je: |
html | boolovská hodnota | falošný | Vložte HTML do kontextového okna. Ak je hodnota false, text na vloženie obsahu do DOM sa použije metóda jQuery. Ak sa obávate útokov XSS, použite text. |
umiestnenie | reťazec | funkciu | 'správny' | Ako umiestniť popover - auto | hore | dole | vľavo | správny. Keď sa na určenie umiestnenia použije funkcia, volá sa s popover uzlom DOM ako jej prvým argumentom a spúšťacím prvkom DOM uzlom ako jej druhým. Kontext |
selektor | reťazec | falošný | falošný | Ak je poskytnutý selektor, popover objekty budú delegované na špecifikované ciele. V praxi sa to používa na umožnenie pridávania vyskakovacích okien do dynamického obsahu HTML. Pozrite si tento a informatívny príklad . |
šablóna | reťazec | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
Základné HTML, ktoré sa má použiť pri vytváraní kontextového okna. Popover Popover
Prvok vonkajšieho obalu by mal mať |
titul | reťazec | prvok | funkciu | '' | Predvolená hodnota názvu, ak Ak je zadaná funkcia, bude volaná s |
spúšťač | reťazec | 'klikni' | Ako sa spúšťa kontextové okno - kliknite | vznášať sa | zameranie | Manuálny. Môžete prejsť viacerými spúšťačmi; oddeľte ich medzerou. „manuálny“ nemožno kombinovať so žiadnym iným spúšťačom. |
offset | číslo | reťazec | 0 | Posun vyskakovacieho okna vzhľadom na jeho cieľ. Ďalšie informácie nájdete v dokumentoch offsetu Popper.js . |
záložné umiestnenie | reťazec | pole | 'flip' | Povoľte určiť, ktorú pozíciu Popper použije pri núdzovom nastavení. Ďalšie informácie nájdete v dokumentoch o správaní Popper.js |
hranica | reťazec | prvok | 'scrollParent' | Hranica obmedzenia pretečenia vyskakovacieho okna. Prijíma hodnoty 'viewport' , 'window' , 'scrollParent' alebo odkaz HTMLElement (iba JavaScript). Ďalšie informácie nájdete v dokumentoch preventOverflow Popper.js . |
Atribúty údajov pre jednotlivé kontextové okná
Možnosti pre jednotlivé kontextové okná možno alternatívne špecifikovať pomocou atribútov údajov, ako je vysvetlené vyššie.
Asynchrónne metódy a prechody
Všetky metódy API sú asynchrónne a spúšťajú prechod . Vrátia sa k volajúcemu hneď po spustení prechodu, ale skôr, ako sa skončí . Okrem toho bude volanie metódy na prechodovom komponente ignorované .
Inicializuje vyskakovacie okná pre kolekciu prvkov.
Odhalí vyskakovací prvok prvku. Vráti sa k volajúcemu skôr, ako sa skutočne zobrazí kontextové okno (tj predtým, ako shown.bs.popover
dôjde k udalosti). Toto sa považuje za „manuálne“ spustenie vyskakovacieho okna. Kontextové okná, ktorých názov aj obsah majú nulovú dĺžku, sa nikdy nezobrazia.
Skryje popover prvku. Vráti sa k volajúcemu skôr, ako sa kontextové okno skutočne skrylo (tj predtým, ako hidden.bs.popover
nastane udalosť). Toto sa považuje za „manuálne“ spustenie vyskakovacieho okna.
Prepína kontextové okno prvku. Vráti sa k volajúcemu predtým, ako sa kontextové okno skutočne zobrazí alebo skryje (tj predtým, ako nastane udalosť shown.bs.popover
alebo ). hidden.bs.popover
Toto sa považuje za „manuálne“ spustenie vyskakovacieho okna.
Skryje a zničí popover prvku. Vyskakovacie okná, ktoré používajú delegovanie (ktoré sú vytvorené pomocou voľby ) selector
, nemožno jednotlivo zničiť na podradených spúšťacích prvkoch.
Umožňuje zobrazenie kontextového okna prvku. Popovers sú predvolene povolené.
Odstráni možnosť zobrazenia kontextového okna prvku. Kontextové okno sa bude môcť zobraziť iba vtedy, ak bude znova povolené.
Prepína možnosť zobrazenia alebo skrytia kontextového okna prvku.
Aktualizuje pozíciu kontextového okna prvku.
Typ udalosti | Popis |
---|---|
show.bs.popover | Táto udalosť sa spustí okamžite po show zavolaní metódy inštancie. |
zobrazený.bs.popover | Táto udalosť sa spustí, keď sa kontextové okno zobrazí používateľovi (bude čakať na dokončenie prechodov CSS). |
skryť.bs.popover | Táto udalosť sa spustí okamžite po hide zavolaní metódy inštancie. |
skrytý.bs.popover | Táto udalosť sa spustí, keď sa ukončí skrytie kontextového okna pred používateľom (bude čakať na dokončenie prechodov CSS). |
vložený.bs.popover | Táto udalosť sa spustí po show.bs.popover udalosti, keď bola do modelu DOM pridaná šablóna kontextového okna. |