Kolaps
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 height
z jeho aktuální hodnoty na 0
. Vzhledem k tomu, jak CSS zpracovává animace, nemůžete použít padding
na .collapse
prvek. Místo toho použijte třídu jako nezávislý prvek obtékání.
prefers-reduced-motion
dotazu na média. Podívejte se na
část s omezeným pohybem v naší dokumentaci přístupnosti .
Příklad
Kliknutím na tlačítka níže zobrazíte a skryjete další prvek prostřednictvím změn třídy:
.collapse
skrývá obsah.collapsing
se aplikuje při přechodech.collapse.show
zobrazuje obsah
Obecně doporučujeme použít tlačítko s data-target
atributem. I když se to ze sémantického hlediska nedoporučuje, můžete také použít odkaz s href
atributem (a role="button"
). V obou případech data-toggle="collapse"
je požadováno.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
Horizontální
Zásuvný modul pro sbalení také podporuje horizontální sbalení. Přidejte .width
třídu modifikátoru pro přechod na width
místo height
a nastavte a width
na bezprostřední podřízený prvek. Neváhejte napsat svůj vlastní Sass, použijte inline styly nebo použijte naše nástroje pro šířku .
min-height
sadu, která zabraňuje nadměrnému překreslování v našich dokumentech, není to výslovně vyžadováno.
Vyžaduje se pouze width
on podřízený prvek.
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
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 href
nebo . data-target
Více prvků <button>
nebo <a>
mohou zobrazit a skrýt prvek, pokud na něj každý odkazuje svým atributem href
nebo data-target
atributem
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
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 .accordion
jako obal.
.show
třídě.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>
Přístupnost
Nezapomeňte přidat aria-expanded
do 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í show
tří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-target
atribut ukazuje na id
selektor – měli byste přidat aria-controls
atribut k ovládacímu prvku, který obsahuje id
prvek 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 ARIA Authoring Practices Guide – 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í:
.collapse
skryje obsah.collapse.show
ukazuje obsah.collapsing
se 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-target
k prvku a automaticky přiřadit ovládání jednoho nebo více skládacích prvků. Atribut data-target
přijímá selektor CSS, na který se má sbalení použít. Nezapomeňte přidat třídu collapse
do 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í:
$('.collapse').collapse()
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 card tří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ě .
Další informace naleznete v naší dokumentaci k JavaScriptu .
.collapse(options)
Aktivuje váš obsah jako sbalitelný prvek. Přijímá volitelné možnosti object
.
$('#myCollapsible').collapse({
toggle: false
})
.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.collapse
nebo ).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.collapse
udá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.collapse
udá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 show volá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 hide zavolá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). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})