Přepínejte viditelnost obsahu ve svém projektu pomocí několika tříd a našich pluginů JavaScript.
Jak to funguje
Plugin JavaScript pro sbalení se používá k zobrazení a skrytí obsahu. Tlačítka nebo kotvy se používají jako spouštěče, které jsou mapovány na konkrétní prvky, které přepínáte. Sbalením prvku dojde k animaci prvku heightz jeho aktuální hodnoty na 0. Vzhledem k tomu, jak CSS zpracovává animace, nemůžete použít paddingna .collapseprvek. Místo toho použijte třídu jako nezávislý prvek obtékání.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Více cílů
A <button>nebo <a>může zobrazit a skrýt více prvků odkazem na ně pomocí selektoru JQuery ve svém atributu hrefnebo . data-targetVíce prvků <button>nebo <a>mohou zobrazit a skrýt prvek, pokud na něj každý odkazuje svým atributem hrefnebo data-targetatributem
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Příklad akordeonu
Pomocí komponenty karty můžete rozšířit výchozí chování sbalení a vytvořit harmoniku. Chcete-li správně dosáhnout akordeonového stylu, nezapomeňte jej použít .accordionjako obal.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad chobotnice. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua dát na něj ptáka chobotnice single-origin coffee nulla expectnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan kromě řezníka vice lomo. Legíny occaecat řemeslné pivo farma-to-table, syrový denim estetický synth nesciunt pravděpodobně jste o nich neslyšeli accusamus labore udržitelné VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Přístupnost
Nezapomeňte přidat aria-expandeddo ovládacího prvku. Tento atribut explicitně vyjadřuje aktuální stav skládacího prvku spojeného s ovládacím prvkem pro čtečky obrazovky a podobné asistenční technologie. Pokud je sbalitelný prvek ve výchozím nastavení uzavřen, měl by mít atribut ovládacího prvku hodnotu aria-expanded="false". Pokud jste sbalitelný prvek nastavili tak, aby byl ve výchozím nastavení otevřený pomocí showtřídy, nastavte aria-expanded="true"místo toho na ovládacím prvku. Plugin automaticky přepne tento atribut na ovládacím prvku na základě toho, zda byl nebo nebyl sbalitelný prvek otevřen nebo zavřen (prostřednictvím JavaScriptu nebo protože uživatel spustil jiný ovládací prvek také spojený se stejným skládacím prvkem). Pokud prvek HTML ovládacího prvku není tlačítko (např. <a>nebo <div>), atributrole="button"by měl být přidán k prvku.
Pokud váš ovládací prvek cílí na jeden skládací prvek – tj. data-targetatribut ukazuje na idselektor – měli byste přidat aria-controlsatribut k ovládacímu prvku, který obsahuje idprvek skládacího prvku. Moderní čtečky obrazovky a podobné asistenční technologie využívají tohoto atributu k tomu, aby uživatelům poskytly další zkratky pro přímou navigaci k samotnému skládacímu prvku.
Všimněte si, že současná implementace Bootstrapu nepokrývá různé interakce s klávesnicí popsané ve vzoru akordeonu WAI-ARIA Authoring Practices 1.1 – budete je muset sami zahrnout do vlastního JavaScriptu.
Používání
Zásuvný modul pro kolaps využívá několik tříd ke zvládnutí těžkého zvedání:
.collapseskryje obsah
.collapse.showukazuje obsah
.collapsingse přidá při zahájení přechodu a odebere se po jeho dokončení
Tyto třídy lze nalézt v _transitions.scss.
Prostřednictvím datových atributů
Stačí přidat data-toggle="collapse"a data-targetk prvku a automaticky přiřadit ovládání jednoho nebo více skládacích prvků. Atribut data-targetpřijímá selektor CSS, na který se má sbalení použít. Nezapomeňte přidat třídu collapsedo skládacího prvku. Pokud chcete, aby se ve výchozím nastavení otevřela, přidejte další třídu show.
Chcete-li do sbalitelné oblasti přidat správu skupiny podobnou akordeonu, přidejte atribut data data-parent="#selector". Podívejte se na ukázku, abyste to viděli v akci.
Prostřednictvím JavaScriptu
Povolit ručně pomocí:
Možnosti
Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-, jako v data-parent="".
název
Typ
Výchozí
Popis
rodič
volič | objekt jQuery | prvek DOM
Nepravdivé
Pokud je zadán nadřazený prvek, všechny skládací prvky pod zadaným nadřazeným prvkem se při zobrazení této sbalitelné položky uzavřou. (podobné tradičnímu chování na akordeonu - to závisí na cardtřídě). Atribut musí být nastaven na cílové skládací oblasti.
přepnout
booleovský
skutečný
Přepíná sbalitelný prvek při vyvolání
Metody
Asynchronní metody a přechody
Všechny metody API jsou asynchronní a zahajují přechod . Vrátí se k volajícímu, jakmile je přechod zahájen, ale před jeho ukončením . Kromě toho bude ignorováno volání metody na přechodové komponentě .
Aktivuje váš obsah jako sbalitelný prvek. Přijímá volitelné možnosti object.
.collapse('toggle')
Přepne sbalitelný prvek na zobrazený nebo skrytý. Vrátí se k volajícímu dříve, než byl skládací prvek skutečně zobrazen nebo skryt (tj. než dojde k události shown.bs.collapsenebo ).hidden.bs.collapse
.collapse('show')
Zobrazuje skládací prvek. Vrátí se k volajícímu dříve, než byl skládací prvek skutečně zobrazen (tj. než dojde k shown.bs.collapseudálosti).
.collapse('hide')
Skrývá skládací prvek. Vrátí se k volajícímu dříve, než byl skládací prvek skutečně skryt (tj. než dojde k hidden.bs.collapseudálosti).
.collapse('dispose')
Zničí kolaps prvku.
Události
Třída sbalení Bootstrapu odhaluje několik událostí pro zapojení do funkce sbalení.
Typ události
Popis
show.bs.kolaps
Tato událost se spustí okamžitě při showvolání metody instance.
zobrazeno.bs.kolaps
Tato událost se spustí, když je prvek sbalení viditelný pro uživatele (bude čekat na dokončení přechodů CSS).
skrýt.bs.kolaps
Tato událost se spustí okamžitě po hidezavolání metody.
skrytý.bs.kolaps
Tato událost se spustí, když byl prvek sbalení skrytý před uživatelem (bude čekat na dokončení přechodů CSS).