Yıkılmak
Birkaç sınıf ve JavaScript eklentilerimizle projenizdeki içeriğin görünürlüğünü değiştirin.
Nasıl çalışır
Daraltma JavaScript eklentisi, içeriği göstermek ve gizlemek için kullanılır. Düğmeler veya çapalar, geçiş yaptığınız belirli öğelerle eşlenen tetikleyiciler olarak kullanılır. Bir öğeyi daraltmak height
, mevcut değerinden 'a animasyon uygulayacaktır 0
. padding
CSS'nin animasyonları nasıl işlediği göz önüne alındığında , bir .collapse
öğe üzerinde kullanamazsınız . Bunun yerine, sınıfı bağımsız bir sarma öğesi olarak kullanın.
prefers-reduced-motion
ortam sorgusuna bağlıdır. Erişilebilirlik belgelerimizin azaltılmış hareket bölümüne bakın
.
Örnek
Sınıf değişiklikleri yoluyla başka bir öğeyi göstermek ve gizlemek için aşağıdaki düğmeleri tıklayın:
.collapse
içeriği gizler.collapsing
geçişler sırasında uygulanır.collapse.show
içeriği gösterir
data-bs-target
Genel olarak, özniteliği olan bir düğme kullanmanızı öneririz . href
Anlamsal bir bakış açısından önerilmese de, öznitelik (ve a ) içeren bir bağlantı da kullanabilirsiniz role="button"
. Her iki durumda data-bs-toggle="collapse"
da gereklidir.
<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>
Birden çok hedef
A <button>
veya , veya özniteliğinde <a>
bir seçiciyle bunlara başvurarak birden çok öğeyi gösterebilir ve gizleyebilir . Birden çok veya bir öğeyi her biri veya özniteliği ile referans alıyorsa gösterip gizleyebilirhref
data-bs-target
<button>
<a>
href
data-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>
Ulaşılabilirlik
aria-expanded
Kontrol öğesine eklediğinizden emin olun . Bu öznitelik, kontrole bağlı daraltılabilir öğenin mevcut durumunu ekran okuyuculara ve benzer yardımcı teknolojilere açıkça iletir. Daraltılabilir öğe varsayılan olarak kapalıysa, kontrol öğesindeki özniteliğin değeri olmalıdır aria-expanded="false"
. show
Sınıfı kullanarak daraltılabilir öğeyi varsayılan olarak açık olacak şekilde ayarladıysanız aria-expanded="true"
, bunun yerine denetimde ayarlayın. Eklenti, daraltılabilir öğenin açılıp kapanmadığına (JavaScript aracılığıyla veya kullanıcının aynı daraltılabilir öğeye bağlı başka bir kontrol öğesini tetiklemesi nedeniyle) bağlı olarak kontrolde bu özniteliği otomatik olarak değiştirir. Kontrol öğesinin HTML öğesi bir düğme değilse (örneğin, an <a>
veya <div>
), öznitelikrole="button"
elemana eklenmelidir.
Kontrol öğeniz tek bir daraltılabilir öğeyi hedefliyorsa - yani data-bs-target
nitelik bir seçiciye işaret ediyorsa - niteliği, daraltılabilir öğenin öğesini içeren kontrol öğesine id
eklemelisiniz . Modern ekran okuyucular ve benzer yardımcı teknolojiler, kullanıcılara doğrudan daraltılabilir öğeye gitmeleri için ek kısayollar sağlamak için bu özelliği kullanır.aria-controls
id
Bootstrap'in mevcut uygulamasının WAI-ARIA Yazma Uygulamaları 1.1 akordeon modelinde açıklanan çeşitli isteğe bağlı klavye etkileşimlerini kapsamadığını unutmayın - bunları özel JavaScript'e kendiniz eklemeniz gerekecektir.
küstah
Değişkenler
$transition-collapse: height .35s ease;
sınıflar
scss/_transitions.scss
Daraltma geçiş sınıfları, bunlar birden çok bileşen (daralma ve akordeon) arasında paylaşıldıkları için bulunabilir .
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
kullanım
Daraltma eklentisi, ağır kaldırmayı halletmek için birkaç sınıf kullanır:
.collapse
içeriği gizler.collapse.show
içeriği gösterir.collapsing
geçiş başladığında eklenir ve bittiğinde kaldırılır
Bu sınıflar adresinde bulunabilir _transitions.scss
.
Veri öznitelikleri aracılığıyla
Bir veya daha fazla daraltılabilir öğenin kontrolünü otomatik olarak atamak için öğeye data-bs-toggle="collapse"
ve a ekleyin . data-bs-target
Nitelik data-bs-target
, daraltmanın uygulanacağı bir CSS seçiciyi kabul eder. collapse
Sınıfı daraltılabilir öğeye eklediğinizden emin olun . Varsayılan olarak açılmasını istiyorsanız, ek sınıfı ekleyin show
.
Daraltılabilir bir alana akordeon benzeri grup yönetimi eklemek için data niteliğini ekleyin data-bs-parent="#selector"
. Bunu çalışırken görmek için demoya bakın.
JavaScript aracılığıyla
Şunlarla manuel olarak etkinleştirin:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Seçenekler
Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-bs-
gibi ekleyin data-bs-parent=""
.
İsim | Tip | Varsayılan | Tanım |
---|---|---|---|
parent |
seçici | jQuery nesnesi | DOM öğesi | false |
Üst öğe sağlanmışsa, bu daraltılabilir öğe gösterildiğinde belirtilen üst öğenin altındaki tüm daraltılabilir öğeler kapatılacaktır. (geleneksel akordeon davranışına benzer - bu, card sınıfa bağlıdır). Nitelik, hedef daraltılabilir alanda ayarlanmalıdır. |
toggle |
boole | true |
Çağrı sırasında daraltılabilir öğeyi değiştirir |
yöntemler
Asenkron yöntemler ve geçişler
Tüm API yöntemleri eşzamansızdır ve bir geçiş başlatır . Geçiş başlar başlamaz ancak bitmeden arayan kişiye geri dönerler . Ek olarak, geçiş yapan bir bileşen üzerindeki bir yöntem çağrısı yoksayılacaktır .
İçeriğinizi daraltılabilir bir öğe olarak etkinleştirir. İsteğe bağlı seçenekleri kabul eder object
.
Oluşturucu ile bir daraltma örneği oluşturabilirsiniz, örneğin:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Yöntem | Tanım |
---|---|
toggle |
Daraltılabilir bir öğeyi gösterilen veya gizli olarak değiştirir. Arayana daraltılabilir öğe fiilen gösterilmeden veya gizlenmeden önce (yani shown.bs.collapse veya hidden.bs.collapse olayı gerçekleşmeden önce) döner. |
show |
Katlanabilir bir öğe gösterir. Katlanabilir öğe fiilen gösterilmeden önce (örneğin, shown.bs.collapse olay meydana gelmeden önce) arayana geri döner. |
hide |
Bir daraltılabilir öğeyi gizler. Arayana, daraltılabilir öğe fiilen gizlenmeden önce döner (örneğin, hidden.bs.collapse olay meydana gelmeden önce). |
dispose |
Bir öğenin çöküşünü yok eder. (DOM öğesinde depolanan verileri kaldırır) |
getInstance |
Bir DOM öğesiyle ilişkili daraltma örneğini elde etmenizi sağlayan statik yöntem, bunu şu şekilde kullanabilirsiniz:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Bir DOM öğesiyle ilişkili bir daraltma örneği döndüren veya başlatılmamış olması durumunda yeni bir tane oluşturan statik yöntem. Bunu şu şekilde kullanabilirsiniz:bootstrap.Collapse.getOrCreateInstance(element) |
Olaylar
Bootstrap'in daraltma sınıfı, daraltma işlevine bağlanmak için birkaç olayı ortaya çıkarır.
Etkinlik tipi | Tanım |
---|---|
show.bs.collapse |
Bu olay, show örnek yöntemi çağrıldığında hemen tetiklenir. |
shown.bs.collapse |
Bu olay, bir daraltma öğesi kullanıcıya görünür hale getirildiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler). |
hide.bs.collapse |
hide Bu olay, yöntem çağrıldığında hemen tetiklenir . |
hidden.bs.collapse |
Bu olay, bir daraltma öğesi kullanıcıdan gizlendiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})