ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش
in English

Offcanvas

يول باشلاش ، مال سېتىۋېلىش ھارۋىسى ۋە باشقا بىر قانچە سىنىپ ۋە JavaScript قىستۇرمىمىز ئۈچۈن تېخىمۇ كۆپ يوشۇرۇن بالداق ياساڭ.

قانداق ئىشلەيدۇ

Offcanvas يان كۆزنەك زاپچاسلىرى بولۇپ ، JavaScript ئارقىلىق ئالماشتۇرغىلى بولىدۇ ، كۆرۈنۈشنىڭ سول ، ئوڭ ياكى ئاستى تەرىپىدىن كۆرۈنىدۇ. كۇنۇپكىلار ياكى لەڭگەرلەر سىز ئالماشتۇرىدىغان ئالاھىدە ئېلېمېنتلارغا باغلانغان قوزغاتقۇچ سۈپىتىدە dataئىشلىتىلىدۇ ، خاسلىقىمىز JavaScript نى ئىشلىتىشكە ئىشلىتىلىدۇ.

  • Offcanvas مودېلغا ئوخشاش بىر قىسىم JavaScript كودىنى ھەمبەھىرلەيدۇ. ئۇقۇمغا ئاساسەن ، ئۇلار بىر-بىرىگە ئوخشىشىپ كېتىدۇ ، ئەمما ئۇلار ئايرىم قىستۇرما.
  • ئوخشاشلا ، offcanvas نىڭ ئۇسلۇبى ۋە ئۆلچىمىدىكى بەزى مەنبە Sass ئۆزگەرگۈچى مىقدارلار مودېلنىڭ ئۆزگەرگۈچى مىقدارلىرىغا ۋارىسلىق قىلىدۇ.
  • كۆرسىتىلسە ، offcanvas سۈكۈتتىكى ئارقا كۆرۈنۈشنى ئۆز ئىچىگە ئالىدۇ.
  • مودېللارغا ئوخشاش ، بىرلا ۋاقىتتا پەقەت بىرلا offcanvas نى كۆرسەتكىلى بولىدۇ.

Heads up! marginCSS نىڭ كارتوننى قانداق بىر تەرەپ قىلىدىغانلىقىنى نەزەردە تۇتقاندا ، سىز 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>

Live demo

تۆۋەندىكى كۇنۇپكىلارنى ئىشلىتىپ JavaScript ئارقىلىق offcanvas ئېلېمېنتىنى كۆرسىتىدۇ ۋە .showيوشۇرىدۇ .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-endكۆرۈنۈش ئېغىزىنىڭ ئوڭ تەرىپىگە offcanvas قويىدۇ
  • .offcanvas-topoffcanvas نى كۆرۈش ئېغىزىنىڭ ئۈستىگە قويىدۇ
  • .offcanvas-bottomoffcanvas نى كۆرۈش ئېغىزىنىڭ ئاستىغا قويىدۇ

تۆۋەندىكى ئۈستى ، ئوڭ ۋە ئاستىدىكى مىساللارنى سىناپ بېقىڭ.

Offcanvas top
...
<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 right
...
<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>
Offcanvas bottom
...
<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تەگلىكنى ئالماشتۇرۇڭ.

دومىلاش بىلەن رەڭدار

بۇ تاللاشنى ھەرىكەتتە كۆرۈش ئۈچۈن باشقا بەتلەرنى سىيرىپ سىناپ بېقىڭ.

ئارقا كۆرۈنۈشتىكى Offcanvas

.....

ئارقىغا ياندۇرۇش

بۇ تاللاشنى ھەرىكەتتە كۆرۈش ئۈچۈن باشقا بەتلەرنى سىيرىپ سىناپ بېقىڭ.

<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 ئارقىلىق قوشقان بولغاچقا قوشۇشىڭىزنىڭ ھاجىتى يوق .

Sass

ئۆزگەرگۈچى مىقدار

$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 نى يوشۇرىدۇ
  • .offcanvas-endئوڭ تەرەپتىكى offcanvas نى يوشۇرىدۇ
  • .offcanvas-bottomئاستىدىكى offcanvas نى يوشۇرىدۇ

خاسلىقى بىلەن ئىشتىن بوشىتىش كۇنۇپكىسىنى قوشۇڭ data-bs-dismiss="offcanvas"، بۇ JavaScript ئىقتىدارىنى قوزغىتىدۇ. <button>بارلىق ئۈسكۈنىلەردە مۇۋاپىق ھەرىكەت ئۈچۈن ئېلېمېنتنى ئىشلىتىشكە كاپالەتلىك قىلىڭ .

سانلىق مەلۇمات خاسلىقى ئارقىلىق

قوشۇش data-bs-toggle="offcanvas"ۋە data-bs-targetياكى hrefئېلېمېنتقا ئاپتوماتىك ھالدا بىر offcanvas ئېلېمېنتىنى كونترول قىلىشنى تەقسىملەش. بۇ data-bs-targetخاسلىق CSS تاللىغۇچنى قوبۇل قىلىپ ، offcanvas نى قوللىنىدۇ. 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 boolean true Offcanvas ئوچۇق ۋاقىتتا بەدەنگە ئارقا كۆرۈنۈش ئىشلىتىڭ
keyboard boolean true قېچىش كۇنۇپكىسى بېسىلغاندا offcanvas نى تاقايدۇ
scroll boolean false Offcanvas ئوچۇق ۋاقىتتا بەدەننىڭ ئايلىنىشىغا يول قويۇڭ

Methods

ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى

بارلىق API ئۇسۇللىرى ماس قەدەمسىز بولۇپ ، ئۆتكۈنچى باسقۇچنى باشلايدۇ . ئۇلار بۇرۇلۇش باشلانغان ھامان ، ئۇ ئاخىرلاشماي تۇرۇپلا تېلېفون قىلغۇچىغا قايتىپ كېلىدۇ . بۇنىڭدىن باشقا ، ئۆتكۈنچى زاپچاسنى چاقىرىش ئۇسۇلىغا سەل قارىلىدۇ .

تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى كۆرۈڭ .

مەزمۇنلىرىڭىزنى offcanvas ئېلېمېنتى سۈپىتىدە ئاكتىپلايدۇ. ئىختىيارى تاللاشلارنى قوبۇل قىلىدۇ 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 مىسالىغا ئېرىشەلەيسىز ياكى دەسلەپكى قەدەمدە يېڭى قۇرالايسىز.

Events

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...
})