Offcanvas
Цөөн хэдэн анги, манай JavaScript залгаасыг ашиглан навигаци хийх, дэлгүүр хэсэх тэрэг болон бусад зүйлд зориулсан далд хажуугийн самбаруудыг бүтээгээрэй.
Хэрхэн ажилладаг
Offcanvas нь JavaScript-ээр сольж, харах цонхны зүүн, баруун эсвэл доод ирмэгээс гарч ирэх боломжтой хажуугийн хэсэг юм. Товчлуур эсвэл зангууг таны сэлгэх тодорхой элементүүдэд хавсаргасан гох болгон ашигладаг бөгөөд data
атрибутууд нь манай JavaScript-г дуудахад ашиглагддаг.
- Offcanvas нь модальтай ижил JavaScript кодыг хуваалцдаг. Үзэл баримтлалын хувьд тэдгээр нь нэлээд төстэй боловч тусдаа залгаасууд юм.
- Үүний нэгэн адил, offcanvas-ийн загвар болон хэмжээсийн зарим эх сурвалжийн Sass хувьсагч нь модаль хувьсагчдаас өвлөгддөг.
- Харуулсан үед offcanvas нь өгөгдмөл backdrop-г агуулж байгаа бөгөөд үүнийг товшиж, гадуурх зургийг нуух боломжтой.
- Модальтай адилаар нэг удаад зөвхөн нэг гадуур зураг харуулах боломжтой.
Анхаараарай! CSS нь хөдөлгөөнт дүрсийг хэрхэн зохицуулдгийг харгалзан тухайн элемент дээр margin
эсвэл ашиглах боломжгүй. Харин оронд нь ангиудыг бие даасан боодлын элемент болгон ашигла.translate
.offcanvas
prefers-reduced-motion
медиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү
.
Жишээ
Offcanvas бүрэлдэхүүн хэсгүүд
Доорх нь өгөгдмөлөөр харуулсан offcanvas жишээ юм (-ээр дамжуулан .show
) .offcanvas
. Offcanvas нь хаах товчлуур бүхий толгой хэсгийг дэмжих, зарим эхэнд нэмэлт үндсэн ангиллыг агуулдаг padding
. Бид танд аль болох хэрэгсэхгүй болгох үйлдлүүдтэй offcanvas толгой хэсгийг оруулах эсвэл хэрэгсэхгүй болгох үйлдлийг тодорхой зааж өгөхийг санал болгож байна.
Offcanvas
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
</div>
Шууд демо
.show
Доорх товчлууруудыг ашиглан ангитай элемент дээрх ангийг сэлгэх боломжтой offcanvas элементийг JavaScript-ээр харуулах, нуухыг ашиглана уу .offcanvas
.
.offcanvas
агуулгыг нуух (өгөгдмөл).offcanvas.show
агуулгыг харуулдаг
Та атрибут бүхий холбоос href
эсвэл атрибут бүхий товчлуурыг ашиглаж болно data-bs-target
. Аль ч тохиолдолд data-bs-toggle="offcanvas"
шаардлагатай.
Offcanvas
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
Байршил
Offcanvas бүрэлдэхүүн хэсгүүдийн өгөгдмөл байршил байхгүй тул та доорх өөрчилсөн ангиудын аль нэгийг нэмэх ёстой;
.offcanvas-start
харагдах цонхны зүүн талд offcanvas байрлуулна (дээр үзүүлсэн).offcanvas-end
offcanvas-ийг харах цонхны баруун талд байрлуулна.offcanvas-top
харах цонхны дээд талд offcanvas байрлуулна.offcanvas-bottom
харагдацын доод талд offcanvas байрлуулна
Доорх дээд, баруун, доод жишээг үзээрэй.
Гадуур даавуун дээд
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Offcanvas зөв
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Доод талын даавуу
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
...
</div>
</div>
Арын дэвсгэр
<body>
Гадуур зураг болон түүний дэвсгэр харагдах үед элементийг гүйлгэх нь идэвхгүй болно. Гүйлгэх, арын дэвсгэрийг сэлгэхийн тулд data-bs-scroll
атрибутыг ашиглана уу .<body>
data-bs-backdrop
Гүйлгэх замаар будсан
Энэ сонголтыг хэрхэн ажиллаж байгааг харахын тулд хуудасны үлдсэн хэсгийг гүйлгэж үзнэ үү.
Арын дэвсгэртэй гадуур зураг
......
Гүйлгэж буй дэвсгэр
Энэ сонголтыг хэрхэн ажиллаж байгааг харахын тулд хуудасны үлдсэн хэсгийг гүйлгэж үзнэ үү.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>.....</p>
</div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
Хүртээмжтэй байдал
Offcanvas самбар нь концепцын хувьд модаль харилцах цонх aria-labelledby="..."
тул --д offcanvas гарчгийг лавлах-ыг нэмэхээ мартуузай .offcanvas
. role="dialog"
Бид үүнийг JavaScript-ээр нэмсэн тул та нэмэх шаардлагагүй гэдгийг анхаарна уу .
Сасс
Хувьсагч
$offcanvas-padding-y: $modal-inner-padding;
$offcanvas-padding-x: $modal-inner-padding;
$offcanvas-horizontal-width: 400px;
$offcanvas-vertical-height: 30vh;
$offcanvas-transition-duration: .3s;
$offcanvas-border-color: $modal-content-border-color;
$offcanvas-border-width: $modal-content-border-width;
$offcanvas-title-line-height: $modal-title-line-height;
$offcanvas-bg-color: $modal-content-bg;
$offcanvas-color: $modal-content-color;
$offcanvas-box-shadow: $modal-content-box-shadow-xs;
Хэрэглээ
Offcanvas залгаас нь хүнд ачааг даах хэд хэдэн анги, шинж чанаруудыг ашигладаг:
.offcanvas
агуулгыг нуудаг.offcanvas.show
агуулгыг харуулж байна.offcanvas-start
зүүн талд байгаа даавууг нуудаг.offcanvas-end
баруун талд байгаа даавууг нуудаг.offcanvas-bottom
Доод талд байгаа даавууг нуудаг
data-bs-dismiss="offcanvas"
JavaScript функцийг идэвхжүүлдэг атрибут бүхий хаах товчийг нэмнэ үү . <button>
Бүх төхөөрөмжид зөв ажиллахын тулд элементийг ашиглахаа мартуузай .
Өгөгдлийн шинж чанаруудаар дамжуулан
Нэг offcanvas элементийн хяналтыг автоматаар оноохын тулд элемент дээр нэмэх data-bs-toggle="offcanvas"
ба a data-bs-target
эсвэл . href
Уг data-bs-target
атрибут нь offcanvas-г хэрэглэх CSS сонгогчийг хүлээн зөвшөөрдөг. offcanvas
Offcanvas элементэд анги нэмэхээ мартуузай. Хэрэв та үүнийг анхдагчаар нээхийг хүсвэл нэмэлт анги нэмнэ үү show
.
JavaScript-ээр дамжуулан
Гараар идэвхжүүлэх:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Сонголтууд
Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-bs-
хавсаргана data-bs-backdrop=""
.
Нэр | Төрөл | Өгөгдмөл | Тодорхойлолт |
---|---|---|---|
backdrop |
логик | true |
Offcanvas нээлттэй байхад биеийн дэвсгэр дээр дэвсгэр түрхээрэй |
keyboard |
логик | true |
Escape товчлуурыг дарах үед гаднах зургийг хаадаг |
scroll |
логик | false |
Offcanvas нээлттэй үед биеийг гүйлгэхийг зөвшөөрнө үү |
Арга зүй
Асинхрон аргууд ба шилжилтүүд
Бүх API аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.
Таны агуулгыг гадуурх элемент болгон идэвхжүүлдэг. Нэмэлт сонголтуудыг хүлээн зөвшөөрдөг object
.
Та бүтээгчээр offcanvas жишээ үүсгэж болно, жишээлбэл:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Арга | Тодорхойлолт |
---|---|
toggle |
Offcanvas элементийг харуулах эсвэл нуух горимд шилжүүлдэг. Offcanvas элементийг харуулах эсвэл нуухаас өмнө (өөрөөр хэлбэл shown.bs.offcanvas эсвэл hidden.bs.offcanvas үйл явдал болохоос өмнө) дуудагч руу буцна. |
show |
Offcanvas элементийг харуулж байна. Offcanvas элементийг харуулахаас өмнө (өөрөөр хэлбэл shown.bs.offcanvas үйл явдал болохоос өмнө) дуудагч руу буцна. |
hide |
Offcanvas элементийг нууна. Offcanvas элементийг нуухаас өмнө (өөрөөр хэлбэл hidden.bs.offcanvas үйл явдал болохоос өмнө) дуудагч руу буцна. |
getInstance |
DOM элементтэй холбоотой offcanvas жишээг авах боломжийг олгодог статик арга |
getOrCreateInstance |
DOM элементтэй холбоотой offcanvas жишээг авах, эсвэл үүнийг эхлүүлээгүй тохиолдолд шинээр үүсгэх боломжийг олгодог статик арга. |
Үйл явдал
Bootstrap-ийн offcanvas анги нь offcanvas функцэд холбогдох хэд хэдэн үйл явдлыг харуулж байна.
Үйл явдлын төрөл | Тодорхойлолт |
---|---|
show.bs.offcanvas |
show Инстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг . |
shown.bs.offcanvas |
Offcanvas элементийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). |
hide.bs.offcanvas |
hide Арга дуудагдсан үед энэ үйл явдал шууд идэвхждэг . |
hidden.bs.offcanvas |
Offcanvas элементийг хэрэглэгчээс нуусан үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})