Нурах
Цөөн хэдэн анги болон манай JavaScript залгаасуудын тусламжтайгаар төслийнхөө контентын харагдах байдлыг асаана уу.
Хэрхэн ажилладаг
Буулгах JavaScript залгаасыг контентыг харуулах, нуухад ашигладаг. Товчлуур эсвэл зангуу нь таны сэлгэх тодорхой элементүүдтэй зурагдсан гох болгон ашигладаг. Элементийг хумивал тухайн элементийг height
одоогийн утгаас нь анивчуулна 0
. CSS нь хөдөлгөөнт дүрсийг хэрхэн зохицуулдгийг харгалзан элемент padding
дээр ашиглах боломжгүй. .collapse
Харин оронд нь ангиудыг бие даасан боодлын элемент болгон ашигла.
prefers-reduced-motion
медиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү
.
Жишээ
Ангийн өөрчлөлтөөр өөр элементийг харуулах, нуухын тулд доорх товчлууруудыг дарна уу:
.collapse
агуулгыг нуудаг.collapsing
шилжилтийн үед хэрэглэнэ.collapse.show
агуулгыг харуулдаг
Ерөнхийдөө бид data-bs-target
шинж чанар бүхий товчлуурыг ашиглахыг зөвлөж байна. Хэдийгээр семантик талаас нь авч үзэхийг зөвлөдөггүй ч гэсэн href
атрибуттай (болон a role="button"
) холбоосыг ашиглаж болно. Аль ч тохиолдолд data-bs-toggle="collapse"
шаардлагатай.
<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>
Хэвтээ
Нурах залгаас нь хэвтээ уналтыг мөн дэмждэг. Оронд нь .collapse-horizontal
шилжихийн тулд өөрчлөгч ангийг нэмээд шууд хүүхэд элемент дээр a тохируулна уу . Өөрийн захиалгат Sass бичих, шугамын хэв маягийг ашиглах, эсвэл өргөн хэрэглээний хэрэгслүүдийг ашиглах боломжтой .width
height
width
min-height
манай баримт бичигт хэт их дахин будахаас сэргийлэх багц байгаа хэдий ч энэ нь тодорхой шаардлагагүй гэдгийг анхаарна уу.
Зөвхөн width
хүүхэд дээрх элемент шаардлагатай.
<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>
Олон зорилт
A <button>
эсвэл олон элементийг өөрийн эсвэл атрибут <a>
дахь сонгогчоор лавлаж харуулах, нуух боломжтой . Элемент тус бүр өөрийн эсвэл атрибутаар нь иш татсан тохиолдолд олон буюу харуулах, нуух боломжтойhref
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>
Хүртээмжтэй байдал
aria-expanded
Хяналтын элемент дээр нэмэхээ мартуузай . Энэ шинж чанар нь удирдлагатай холбогдсон эвхэгддэг элементийн одоогийн төлөвийг дэлгэц уншигчид болон үүнтэй төстэй туслах технологид шууд дамжуулдаг. Хэрэв эвхэгддэг элемент нь анхдагчаар хаагдсан бол хяналтын элемент дээрх атрибут нь -ийн утгатай байх ёстой aria-expanded="false"
. Хэрэв та эвхэгддэг элементийг show
анги ашиглан анхдагчаар нээлттэй байхаар тохируулсан aria-expanded="true"
бол оронд нь удирдлага дээр тохируулна уу. Уг залгаас нь эвхэгддэг элемент нээгдсэн эсвэл хаагдсан эсэхээс (JavaScript-ээр дамжуулан, эсвэл хэрэглэгч ижил эвхэгддэг элементтэй холбогдсон өөр хяналтын элементийг идэвхжүүлсэн) үндэслэн удирдлага дээрх энэ атрибутыг автоматаар сэлгэх болно. Хэрэв хяналтын элементийн HTML элемент нь товчлуур биш бол (жишээ нь, <a>
эсвэл <div>
), атрибутrole="button"
элементэд нэмэх ёстой.
Хэрэв таны хяналтын элемент нэг эвхэгддэг элементийг онилж байгаа бол, өөрөөр хэлбэл data-bs-target
шинж чанар нь id
сонгогч руу чиглэж байгаа бол та эвхэгддэг элементийг aria-controls
агуулсан атрибутыг хяналтын элементэд нэмэх хэрэгтэй id
. Орчин үеийн дэлгэц уншигчид болон үүнтэй төстэй туслах технологиуд нь хэрэглэгчдэд эвхэгддэг элемент рүү шууд шилжих нэмэлт товчлолоор хангахын тулд энэ шинж чанарыг ашигладаг.
Bootstrap-ийн одоогийн хэрэгжүүлэлт нь WAI-ARIA Authoring Practices 1.1 баян хуурын загварт тайлбарласан янз бүрийн нэмэлт гарын харилцан үйлчлэлийг хамрахгүй гэдгийг анхаарна уу - та эдгээрийг өөрөө захиалгат JavaScript-д оруулах хэрэгтэй болно.
Сасс
Хувьсагч
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Ангиуд
scss/_transitions.scss
Нуралтын шилжилтийн ангиудыг олон бүрэлдэхүүн хэсгүүдэд (нуралт ба баян хуур) хуваалцдаг тул олж болно .
.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);
}
}
Хэрэглээ
Нурах залгаас нь хүнд ачааг даах хэд хэдэн ангиллыг ашигладаг:
.collapse
агуулгыг нуудаг.collapse.show
агуулгыг харуулж байна.collapsing
Шилжилт эхлэхэд нэмэгдэж, дуусах үед хасагдана
Эдгээр ангиудыг эндээс олж болно _transitions.scss
.
Өгөгдлийн шинж чанаруудаар дамжуулан
Нэг буюу хэд хэдэн эвхэгддэг элементийн хяналтыг автоматаар хуваарилахын тулд элементэд " data-bs-toggle="collapse"
a" -г нэмэхэд л хангалттай . data-bs-target
Уг data-bs-target
атрибут нь задлах үйлдэл хийх CSS сонгогчийг хүлээн зөвшөөрдөг. collapse
Эвхэгддэг элементэд ангийг нэмэхээ мартуузай . Хэрэв та үүнийг анхдагчаар нээхийг хүсвэл нэмэлт анги нэмнэ үү show
.
Эвхэгддэг хэсэгт баян хуур шиг бүлгийн удирдлагыг нэмэхийн тулд дата атрибутыг нэмнэ үү data-bs-parent="#selector"
. Дэлгэрэнгүй мэдээллийг баян хуурын хуудаснаас авна уу .
JavaScript-ээр дамжуулан
Гараар идэвхжүүлэх:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Сонголтууд
Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-bs-
хавсаргана data-bs-parent=""
.
Нэр | Төрөл | Өгөгдмөл | Тодорхойлолт |
---|---|---|---|
parent |
сонгогч | jQuery объект | DOM элемент | false |
Хэрэв эцэг эх өгөгдсөн бол энэ эвхэгддэг зүйлийг харуулах үед заасан эцэг эхийн доорх бүх эвхэгддэг элементүүд хаагдах болно. (уламжлалт баян хуурын зан үйлтэй төстэй - энэ нь card ангиас хамаарна). Энэ шинж чанарыг зорилтот эвхэгддэг талбарт тохируулах ёстой. |
toggle |
логик | true |
Дуудлага хийх үед эвхэгддэг элементийг асаана |
Арга зүй
Асинхрон аргууд ба шилжилтүүд
Бүх API аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.
Таны агуулгыг эвхэгддэг элемент болгон идэвхжүүлнэ. Нэмэлт сонголтуудыг хүлээн зөвшөөрдөг object
.
Та бүтээгчээр задлах жишээ үүсгэж болно, жишээлбэл:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Арга | Тодорхойлолт |
---|---|
toggle |
Эвхэгддэг элементийг харуулах эсвэл нуух горимд шилжүүлнэ. Эвхэгддэг элементийг харуулах эсвэл нуухаас өмнө (өөрөөр хэлбэл shown.bs.collapse эсвэл hidden.bs.collapse үйл явдал болохоос өмнө) дуудагч руу буцна. |
show |
Эвхэгддэг элементийг харуулж байна. Эвхэгддэг элементийг бодитоор харуулахаас өмнө (жишээ нь shown.bs.collapse үйл явдал болохоос өмнө) дуудагч руу буцна. |
hide |
Эвхэгддэг элементийг нууна. Эвхэгддэг элементийг нуухаас өмнө (жишээ нь hidden.bs.collapse үйл явдал болохоос өмнө) дуудагч руу буцна. |
dispose |
Элементийн уналтыг устгадаг. (DOM элемент дээр хадгалагдсан өгөгдлийг устгана) |
getInstance |
DOM элементтэй холбоотой уналтын жишээг авах боломжийг олгодог статик арга, та үүнийг дараах байдлаар ашиглаж болно:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
DOM элементтэй холбоотой задралын жишээг буцаадаг статик арга эсвэл үүнийг эхлүүлээгүй тохиолдолд шинээр үүсгэх. Та үүнийг дараах байдлаар ашиглаж болно.bootstrap.Collapse.getOrCreateInstance(element) |
Үйл явдал
Bootstrap-ийн уналтын анги нь уналтын функцэд холбогдох хэд хэдэн үйл явдлыг илчилдэг.
Үйл явдлын төрөл | Тодорхойлолт |
---|---|
show.bs.collapse |
show Инстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг . |
shown.bs.collapse |
Уналтын элементийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). |
hide.bs.collapse |
hide Арга дуудагдсан үед энэ үйл явдал шууд идэвхждэг . |
hidden.bs.collapse |
Уналтын элементийг хэрэглэгчээс нуусан үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})