Offcanvas
يول باشلاش ، مال سېتىۋېلىش ھارۋىسى ۋە باشقا بىر قانچە سىنىپ ۋە JavaScript قىستۇرمىمىز ئۈچۈن تېخىمۇ كۆپ يوشۇرۇن بالداق ياساڭ.
قانداق ئىشلەيدۇ
Offcanvas يان كۆزنەك زاپچاسلىرى بولۇپ ، JavaScript ئارقىلىق ئالماشتۇرغىلى بولىدۇ ، كۆرۈنۈشنىڭ سول ، ئوڭ ياكى ئاستى تەرىپىدىن كۆرۈنىدۇ. كۇنۇپكىلار ياكى لەڭگەرلەر سىز ئالماشتۇرىدىغان ئالاھىدە ئېلېمېنتلارغا باغلانغان قوزغاتقۇچ سۈپىتىدە data
ئىشلىتىلىدۇ ، خاسلىقىمىز JavaScript نى ئىشلىتىشكە ئىشلىتىلىدۇ.
- Offcanvas مودېلغا ئوخشاش بىر قىسىم JavaScript كودىنى ھەمبەھىرلەيدۇ. ئۇقۇمغا ئاساسەن ، ئۇلار بىر-بىرىگە ئوخشىشىپ كېتىدۇ ، ئەمما ئۇلار ئايرىم قىستۇرما.
- ئوخشاشلا ، offcanvas نىڭ ئۇسلۇبى ۋە ئۆلچىمىدىكى بەزى مەنبە Sass ئۆزگەرگۈچى مىقدارلار مودېلنىڭ ئۆزگەرگۈچى مىقدارلىرىغا ۋارىسلىق قىلىدۇ.
- كۆرسىتىلسە ، offcanvas سۈكۈتتىكى ئارقا كۆرۈنۈشنى ئۆز ئىچىگە ئالىدۇ.
- مودېللارغا ئوخشاش ، بىرلا ۋاقىتتا پەقەت بىرلا offcanvas نى كۆرسەتكىلى بولىدۇ.
Heads up! margin
CSS نىڭ كارتوننى قانداق بىر تەرەپ قىلىدىغانلىقىنى نەزەردە تۇتقاندا ، سىز 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>
Live demo
تۆۋەندىكى كۇنۇپكىلارنى ئىشلىتىپ JavaScript ئارقىلىق offcanvas ئېلېمېنتىنى كۆرسىتىدۇ ۋە .show
يوشۇرىدۇ .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 نى كۆرۈش ئېغىزىنىڭ ئاستىغا قويىدۇ
تۆۋەندىكى ئۈستى ، ئوڭ ۋە ئاستىدىكى مىساللارنى سىناپ بېقىڭ.
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...
})