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

html

<div class="offcanvas offcanvas-start show" 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" 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 بىلەن ئۇلىنىش

بەزى تېكىستلەر ئورۇن ئىگىسى. رېئال تۇرمۇشتا سىز تاللىغان ئېلېمېنتلارغا ئىگە بولالايسىز. مەسىلەن ، تېكىست ، رەسىم ، تىزىملىك قاتارلىقلار.

html

<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

Body rollling

<body>يان تېلېفون ۋە ئۇنىڭ ئارقا كۆرۈنۈشى كۆرۈنگەندە ئېلېمېنتنى دومىلاش چەكلىنىدۇ . data-bs-scrollخاسلىقنى ئىشلىتىپ دومىلىتىشنى قوزغىتىڭ <body>.

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

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

بەدەننى يۆگەش ۋە ئارقا كۆرۈنۈش

<body>كۆرۈنگەن ئارقا كۆرۈنۈش بىلەن سىيرىلىشنى قوزغىتالايسىز .

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

html

<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" 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" 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 تاقىلىپ قالمايدۇ.

ئەگەر مېنىڭ سىرتىمنى چەكسىڭىز تاقىمايمەن.

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Dark offcanvas

V5.2.0 گە قوشۇلدى

توك يولى بىلەن سىرتقى كۆرۈنۈشنىڭ كۆرۈنۈشىنى ئۆزگەرتىپ ، ئۇلارنى قاراڭغۇ دېڭىزغا ئوخشاش ئوخشىمىغان مەزمۇنلارغا تېخىمۇ ياخشى ماسلاشتۇرۇڭ. بۇ يەردە بىز قاراڭغۇ ۋە يانتۇ شەكىللىك مۇۋاپىق ئۇسلۇب ئۈچۈن قوشىمىز .text-bg-dark. ئەگەر ئىچىڭىزدە تۆۋەنلەش بولسا ، قوشۇشنىمۇ ئويلاڭ ..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Offcanvas مەزمۇنىنى بۇ يەرگە قويۇڭ.

html

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Responsive

V5.2.0 گە قوشۇلدى

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

توركۆرگۈڭىزنىڭ چوڭ-كىچىكلىكىنى ئۆزگەرتىپ ، ئىنكاس قايتۇرىدىغان offcanvas نى كۆرسىتىدۇ.

بۇ مەزمۇن ئىچىدىكى مەزمۇن .offcanvas-lg.

html

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

ھەر بىر بۆسۈش ئېغىزىدا ئىنكاسچان offcanvas دەرسلىرى بار.

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

ئورۇنلاشتۇرۇش

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

.offcanvas-startكۆرۈنۈش ئېغىزىنىڭ سول تەرىپىگە offcanvas قويىدۇ (يۇقىرىدا كۆرسىتىلدى)
.offcanvas-endكۆرۈنۈش ئېغىزىنىڭ ئوڭ تەرىپىگە offcanvas قويىدۇ
.offcanvas-topoffcanvas نى كۆرۈش ئېغىزىنىڭ ئۈستىگە قويىدۇ
.offcanvas-bottomoffcanvas نى كۆرۈش ئېغىزىنىڭ ئاستىغا قويىدۇ

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

...

html

<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html

<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html

<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

قولايلىق

Offcanvas تاختىسى ئۇقۇم جەھەتتىن مودېل دىئالوگ بولغاچقا ، چوقۇم aria-labelledby="..."offcanvas نامىنى كۆرسىتىدۇ .offcanvas. role="dialog"شۇنىڭغا دىققەت قىلىڭكى ، ئۇنى JavaScript ئارقىلىق قوشقان بولغاچقا قوشۇشىڭىزنىڭ ھاجىتى يوق .

CSS

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

V5.2.0 گە قوشۇلدى

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

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

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-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

ئىشلىتىش

Offcanvas قىستۇرمىسى بىر نەچچە سىنىپ ۋە خاسلىقتىن پايدىلىنىپ ئېغىر كۆتۈرۈشنى بىر تەرەپ قىلىدۇ:

.offcanvasمەزمۇننى يوشۇرىدۇ
.offcanvas.showمەزمۇننى كۆرسىتىدۇ
.offcanvas-startسول تەرەپتىكى offcanvas نى يوشۇرىدۇ
.offcanvas-endئوڭ تەرەپتىكى offcanvas نى يوشۇرىدۇ
.offcanvas-topئۈستىدىكى offcanvas نى يوشۇرىدۇ
.offcanvas-bottomئاستىدىكى offcanvas نى يوشۇرىدۇ

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

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

Toggle

قوشۇش data-bs-toggle="offcanvas"ۋە data-bs-targetياكى hrefئېلېمېنتقا ئاپتوماتىك ھالدا بىر offcanvas ئېلېمېنتىنى كونترول قىلىشنى تەقسىملەش. بۇ data-bs-targetخاسلىق CSS تاللىغۇچنى قوبۇل قىلىپ ، offcanvas نى قوللىنىدۇ. offcanvasدەرسنى offcanvas ئېلېمېنتىغا قوشۇشقا كاپالەتلىك قىلىڭ . ئەگەر سۈكۈتتىكى ھالەتتە ئېچىشنى ئويلىسىڭىز ، قوشۇمچە دەرسنى قوشۇڭ show.

خىزمەتتىن ھەيدەش

تۆۋەندە كۆرسىتىلگەندەك offcanvas ئىچىدىكى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>

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

JavaScript ئارقىلىق

قولدا قوزغىتىڭ:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدىغان بولغاچقا ، تاللاش نامىغا data-bs-ئوخشاش قوشۇمچە ئىسىم قوشالايسىز data-bs-animation="{value}". تاللانما نامىنىڭ دېلو تۈرىنى سانلىق مەلۇمات خاسلىقى ئارقىلىق يوللىغاندا «تۆگە قېپى » دىن « kebab -case » غا ئۆزگەرتىشنى جەزملەشتۈرۈڭ. مەسىلەن ، data-bs-custom-class="beautifier"ئۇنىڭ ئورنىغا ئىشلىتىڭ data-bs-customClass="beautifier".

Bootstrap 5.2.0 گە قەدەر ، بارلىق زاپچاسلار JSON تىزمىسى سۈپىتىدە ئاددىي زاپچاس سەپلىمىسىنى ساقلىيالايدىغان تەجرىبە ساقلانغان سانلىق مەلۇمات خاسلىقىنى قوللايدۇ. data-bs-configئېلېمېنتنىڭ خاسلىقى data-bs-config='{"delay":0, "title":123}'ۋە data-bs-title="456"خاسلىقى بولغاندا ، ئاخىرقى titleقىممىتى بولىدۇ 456ۋە ئايرىم سانلىق مەلۇمات خاسلىقى بېرىلگەن قىممەتنى بېسىپ data-bs-configچۈشىدۇ. بۇنىڭدىن باشقا ، مەۋجۇت سانلىق مەلۇمات خاسلىقى JSON قىممىتىنى ساقلىيالايدۇ data-bs-delay='{"show":0,"hide":150}'.

ئىسمى	تىپ	سۈكۈتتىكى	چۈشەندۈرۈش
`backdrop`	boolean or string`static`	`true`	Offcanvas ئوچۇق ۋاقىتتا بەدەنگە ئارقا كۆرۈنۈش ئىشلىتىڭ. ئۇنىڭدىن باشقا ، `static`چەككەندە ئارقا كۆرۈنۈشنى تاقىمايدىغان ئارقا كۆرۈنۈشنى بەلگىلەڭ.
`keyboard`	boolean	`true`	قېچىش كۇنۇپكىسى بېسىلغاندا offcanvas نى تاقايدۇ.
`scroll`	boolean	`false`	Offcanvas ئوچۇق ۋاقىتتا بەدەننىڭ ئايلىنىشىغا يول قويۇڭ.

Methods

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

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

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

مەزمۇنلىرىڭىزنى offcanvas ئېلېمېنتى سۈپىتىدە ئاكتىپلايدۇ. ئىختىيارى تاللاشلارنى قوبۇل قىلىدۇ object.

قۇرۇلۇش قىلغۇچى بىلەن offcanvas مىسالى قۇرالايسىز ، مەسىلەن:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

ئۇسۇل	چۈشەندۈرۈش
`getInstance`	تۇراقلىق ئۇسۇل ئارقىلىق DOM ئېلېمېنتى بىلەن مۇناسىۋەتلىك offcanvas مىسالىغا ئېرىشەلەيسىز.
`getOrCreateInstance`	تۇراقلىق ئۇسۇل ، سىز DOM ئېلېمېنتى بىلەن باغلانغان offcanvas مىسالىغا ئېرىشەلەيسىز ياكى باشلانمىغان ئەھۋال ئاستىدا يېڭىسىنى قۇرالايسىز.
`hide`	Offcanvas ئېلېمېنتىنى يوشۇرىدۇ. Offcanvas ئېلېمېنتى ئەمەلىيەتتە يوشۇرۇلۇشتىن بۇرۇن (يەنى `hidden.bs.offcanvas`ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ.
`show`	Offcanvas ئېلېمېنتىنى كۆرسىتىدۇ. Offcanvas ئېلېمېنتى ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى `shown.bs.offcanvas`ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ.
`toggle`	كۆرسىتىلگەن ياكى يوشۇرۇلغان offcanvas ئېلېمېنتىنى توغرىلايدۇ. Offcanvas ئېلېمېنتى ئەمەلىيەتتە كۆرسىتىش ياكى يوشۇرۇشتىن`shown.bs.offcanvas` بۇرۇن (يەنى `hidden.bs.offcanvas`ۋەقە يۈز بېرىشتىن ئىلگىرى) دەۋەتچىگە قايتىدۇ.

Events

Bootstrap نىڭ offcanvas سىنىپى offcanvas ئىقتىدارىغا باغلانغان بىر قانچە پائالىيەتلەرنى ئاشكارىلىدى.

پائالىيەت تىپى	چۈشەندۈرۈش
`hide.bs.offcanvas`	بۇ `hide`ئۇسۇل ئۇسۇل چاقىرىلغاندا دەرھال ئېتىۋېتىلىدۇ.
`hidden.bs.offcanvas`	بۇ ھادىسە ئىشلەتكۈچىدىن offcanvas ئېلېمېنتى يوشۇرۇلغاندا چىقىرىۋېتىلىدۇ (CSS ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).
`hidePrevented.bs.offcanvas`	بۇ ھادىسە offcanvas كۆرسىتىلسە ، ئۇنىڭ ئارقا كۆرۈنۈشى `static`ۋە سىرتىدىن بىر چېكىش ئېلىپ بېرىلىدۇ. قېچىش كۇنۇپكىسى بېسىلغاندا ۋە `keyboard`تاللاش تەڭشەلگەندە پائالىيەتمۇ ئېتىلىدۇ `false`.
`show.bs.offcanvas`	`show`مىسال ئۇسۇلى چاقىرىلغاندا بۇ ھادىسە دەرھال ئېتىلىدۇ .
`shown.bs.offcanvas`	بۇ ھادىسە offcanvas ئېلېمېنتى ئىشلەتكۈچىگە كۆرۈنگەندە ئېتىلىدۇ (CSS ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

Offcanvas

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

مىساللار

Offcanvas زاپچاسلىرى

Offcanvas

Live demo

Offcanvas

Body rollling

بەدەننى دومىلىتىدىغان Offcanvas

بەدەننى يۆگەش ۋە ئارقا كۆرۈنۈش

ئارقا كۆرۈنۈش

تۇراقلىق ئارقا كۆرۈنۈش

Offcanvas

Dark offcanvas

Offcanvas

Responsive

Responsive offcanvas

ئورۇنلاشتۇرۇش

Offcanvas top

Offcanvas right

Offcanvas bottom

قولايلىق

CSS

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

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

ئىشلىتىش

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

Toggle

خىزمەتتىن ھەيدەش

JavaScript ئارقىلىق

تاللانما

Methods

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

Events