Colapsar
Alterna a visibilidade do contido no teu proxecto con algunhas clases e os nosos complementos de JavaScript.
Cómo funciona
O complemento de contraer JavaScript úsase para mostrar e ocultar contido. Os botóns ou áncoras utilízanse como disparadores que se asignan a elementos específicos que alternas. Ao contraer un elemento animarase height
desde o seu valor actual ata 0
. Dado como CSS xestiona as animacións, non se pode usar padding
nun .collapse
elemento. En vez diso, use a clase como un elemento de envoltura independente.
prefers-reduced-motion
consulta multimedia. Consulta a
sección de movemento reducido da nosa documentación de accesibilidade .
Exemplo
Fai clic nos botóns seguintes para mostrar e ocultar outro elemento mediante os cambios de clase:
.collapse
oculta o contido.collapsing
aplícase durante as transicións.collapse.show
mostra o contido
En xeral, recomendamos usar un botón co data-bs-target
atributo. Aínda que non se recomenda desde un punto de vista semántico, tamén podes usar unha ligazón co href
atributo (e un role="button"
). En ambos os casos, data-bs-toggle="collapse"
é necesario.
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-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>
Horizontal
O complemento de colapso tamén admite o colapso horizontal. Engade a .collapse-horizontal
clase modificadora para facer a transición no width
lugar de height
e establece a width
no elemento fillo inmediato. Non dubides en escribir o teu propio Sass personalizado, usar estilos en liña ou usar as nosas utilidades de ancho .
min-height
conxunto para evitar repintados excesivos nos nosos documentos, isto non é necesario de forma explícita.
Só width
é necesario o elemento fillo.
<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
Múltiples obxectivos
A <button>
ou <a>
pode mostrar e ocultar varios elementos facendo referencia a eles cun selector no seu atributo href
ou . data-bs-target
Múltiples <button>
ou <a>
poden mostrar e ocultar un elemento se cada un o fai referencia co seu atributo href
oudata-bs-target
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>
Accesibilidade
Asegúrese de engadir aria-expanded
ao elemento de control. Este atributo transmite de forma explícita o estado actual do elemento plegable vinculado ao control aos lectores de pantalla e tecnoloxías auxiliares similares. Se o elemento plegable está pechado por defecto, o atributo do elemento de control debería ter un valor de aria-expanded="false"
. Se configuraches o elemento plegable para que estea aberto de forma predeterminada usando a show
clase, configura aria-expanded="true"
o control. O complemento activará automaticamente este atributo no control segundo se abriu ou non o elemento contraíble (a través de JavaScript ou porque o usuario disparou outro elemento de control tamén ligado ao mesmo elemento contraíble). Se o elemento HTML do elemento de control non é un botón (por exemplo, un <a>
ou <div>
), o atributorole="button"
debe engadirse ao elemento.
Se o teu elemento de control está dirixido a un único elemento contraíble, é dicir, o data-bs-target
atributo apunta a un id
selector, deberías engadir o aria-controls
atributo ao elemento de control, que contén o id
elemento do elemento contraíble. Os lectores de pantalla modernos e tecnoloxías de asistencia similares fan uso deste atributo para ofrecer aos usuarios atallos adicionais para navegar directamente ao propio elemento plegable.
Teña en conta que a implementación actual de Bootstrap non cobre as diversas interaccións opcionais do teclado descritas no patrón de acordeón WAI-ARIA Authoring Practices 1.1 ; terá que incluílas vostede mesmo con JavaScript personalizado.
Sass
Variables
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Clases
Pódense atopar clases de transición scss/_transitions.scss
de contraer xa que se comparten entre varios compoñentes (contraer e acordeón).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
&.collapse-horizontal {
width: 0;
height: auto;
@include transition($transition-collapse-width);
}
}
Uso
O complemento de colapso utiliza algunhas clases para xestionar o traballo pesado:
.collapse
oculta o contido.collapse.show
mostra o contido.collapsing
engádese cando comeza a transición e elimínase cando remata
Estas clases pódense atopar en _transitions.scss
.
A través de atributos de datos
Só ten que engadir data-bs-toggle="collapse"
e data-bs-target
a ao elemento para asignar automaticamente o control dun ou máis elementos plegables. O data-bs-target
atributo acepta un selector CSS ao que aplicar o contraer. Asegúrate de engadir a clase collapse
ao elemento contraíble. Se queres que se abra por defecto, engade a clase adicional show
.
Para engadir unha xestión de grupos de tipo acordeón a unha área plegable, engade o atributo de datos data-bs-parent="#selector"
. Consulta a páxina do acordeón para obter máis información.
Vía JavaScript
Habilitar manualmente con:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Opcións
As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-bs-
, como en data-bs-parent=""
.
Nome | Tipo | Por defecto | Descrición |
---|---|---|---|
parent |
selector | obxecto jQuery | Elemento DOM | false |
Se se fornece o elemento principal, todos os elementos contraíbles baixo o pai especificado pecharanse cando se mostre este elemento contraíble. (semellante ao comportamento tradicional do acordeón - isto depende da card clase). O atributo ten que ser definido na área de destino. |
toggle |
booleano | true |
Alterna o elemento contraíble na invocación |
Métodos
Métodos asíncronos e transicións
Todos os métodos da API son asíncronos e inician unha transición . Volven ao interlocutor en canto se inicia a transición pero antes de que remate . Ademais, ignorarase unha chamada de método nun compoñente en transición .
Consulte a nosa documentación de JavaScript para obter máis información .
Activa o teu contido como elemento plegable. Acepta opcións opcionais object
.
Podes crear unha instancia de colapso co construtor, por exemplo:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Método | Descrición |
---|---|
toggle |
Alterna un elemento plegable para mostrar ou ocultar. Regresa ao interlocutor antes de que se amosase ou escondese o elemento plegable (é dicir, antes de que se produza o evento shown.bs.collapse ou ).hidden.bs.collapse |
show |
Mostra un elemento plegable. Volve ao interlocutor antes de que se amosara realmente o elemento plegable (por exemplo, antes de shown.bs.collapse que se produza o evento). |
hide |
Oculta un elemento plegable. Volve ao interlocutor antes de que o elemento plegable se escondese (por exemplo, antes de hidden.bs.collapse que ocorra o evento). |
dispose |
Destrúe o colapso dun elemento. (Elimina os datos almacenados no elemento DOM) |
getInstance |
Método estático que che permite obter a instancia de colapso asociada a un elemento DOM, podes usalo así:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Método estático que devolve unha instancia de colapso asociada a un elemento DOM ou crea unha nova no caso de que non se inicializou. Podes usalo así:bootstrap.Collapse.getOrCreateInstance(element) |
Eventos
A clase de colapso de Bootstrap expón algúns eventos para conectarse á funcionalidade de colapso.
Tipo de evento | Descrición |
---|---|
show.bs.collapse |
Este evento desenvólvese inmediatamente cando show se chama ao método de instancia. |
shown.bs.collapse |
Este evento desenvólvese cando un elemento de contraer se fixo visible para o usuario (esperará a que se completen as transicións CSS). |
hide.bs.collapse |
Este evento desenvólvese inmediatamente cando hide se chamou ao método. |
hidden.bs.collapse |
Este evento desenvólvese cando se ocultou ao usuario un elemento de contraer (esperará a que se completen as transicións CSS). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})