Үндсэн агуулга руу шилжих Docs навигаци руу алгасах
in English

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
Offcanvas-ийн контент энд байна. Та бараг ямар ч Bootstrap бүрэлдэхүүн хэсэг эсвэл захиалгат элементүүдийг энд байрлуулж болно. 
<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"шаардлагатай.

href-тэй холбох
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-endoffcanvas-ийг харах цонхны баруун талд байрлуулна
  • .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">Backdrop 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-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Хэрэглээ

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-targetoffcanvas-г ашиглах CSS сонгогчийг хүлээн зөвшөөрдөг. offcanvasOffcanvas элементэд анги нэмэхээ мартуузай. Хэрэв та үүнийг анхдагчаар нээхийг хүсвэл нэмэлт анги нэмнэ үү show.

Хаах

Доор үзүүлсэн зураг dataдээрх товчлуур дээрх шинж чанарыг ашиглан ажлаас халах боломжтой .

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

эсвэл доор үзүүлсэн шиг зургийн гадна талын товчлуур дээр:data-bs-target

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Гаднаас гадуурх зургийг хаах хоёр арга хоёулаа дэмжигддэг ч гаднах зурагнаас хасах нь WAI-ARIA горимын харилцах цонхны загвартай таарахгүй гэдгийг санаарай . Үүнийг эрсдэлд оруулаарай.

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 аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.

Дэлгэрэнгүй мэдээллийг манай JavaScript баримтаас үзнэ үү .

Таны агуулгыг гадуурх элемент болгон идэвхжүүлдэг. Нэмэлт сонголтуудыг хүлээн зөвшөөрдөг 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...
})