آفڪينوس
ڪجھ طبقن ۽ اسان جي JavaScript پلگ ان سان نيويگيشن، شاپنگ ڪارٽون، ۽ وڌيڪ لاءِ پنھنجي پروجيڪٽ ۾ لڪيل سائڊبارز ٺاھيو.
اهو ڪيئن ڪم ڪري ٿو
Offcanvas ھڪڙو سائڊبار جو حصو آھي جنھن کي جاوا اسڪرپٽ ذريعي ٽوگل ڪري سگھجي ٿو ڏسڻ واري پورٽ جي کاٻي، ساڄي، يا ھيٺئين پاسي کان. بٽڻ يا اينڪرز استعمال ڪيا ويندا آھن محرڪ جيڪي مخصوص عناصر سان جڙيل آھن جيڪي توھان ٽوگل ڪندا آھن، ۽ data
خاصيتون استعمال ڪيون وينديون آھن اسان جي JavaScript کي سڏڻ لاءِ.
- Offcanvas شيئر ڪري ٿو ڪجھ ساڳيو جاوا اسڪرپٽ ڪوڊ ماڊلز جي طور تي. تصوراتي طور تي، اهي ڪافي هڪجهڙا آهن، پر اهي الڳ الڳ پلگ ان آهن.
- اهڙيءَ طرح، آفڪينوس جي طرز ۽ طول و عرض لاءِ ڪجهه ماخذ Sass متغير ماڊل جي متغيرن مان ورثي ۾ مليا آهن.
- جڏهن ڏيکاريو ويو، آفڪينوس ۾ هڪ ڊفالٽ پس منظر شامل آهي جنهن کي ڪلڪ ڪري سگهجي ٿو آفڪينوس کي لڪائڻ لاءِ.
- ماڊلز وانگر، هڪ وقت ۾ صرف هڪ آف ڪينوس ڏيکاري سگهجي ٿو.
اٿو! ڏنو ويو ڪيئن CSS اينيميشنز کي سنڀاليندو آهي، توهان استعمال نٿا ڪري سگهو margin
يا translate
ڪنهن .offcanvas
عنصر تي. ان جي بدران، ڪلاس کي آزاد لفافي عنصر طور استعمال ڪريو.
prefers-reduced-motion
ميڊيا جي سوال تي منحصر آھي. اسان جي پهچ واري دستاويزن جو گھٽ موشن سيڪشن ڏسو
.
مثال
آفڪينوس اجزاء
هيٺ هڪ آفڪينوس مثال آهي جيڪو ڊفالٽ طور ڏيکاريل آهي (ذريعي .show
تي .offcanvas
). آفڪينوس ۾ بند بٽڻ سان هيڊر لاءِ سپورٽ ۽ ڪجهه شروعاتي لاءِ اختياري باڊي ڪلاس شامل آهي padding
. اسان جي صلاح آهي ته توهان آفڪينوس هيڊر شامل ڪريو برطرفي جي عملن سان جڏهن به ممڪن هجي، يا هڪ واضح برطرفي واري عمل مهيا ڪريو.
آفڪينوس
<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
.
.offcanvas
مواد لڪائي ٿو (ڊفالٽ).offcanvas.show
مواد ڏيکاري ٿو
توھان استعمال ڪري سگھوٿا ھڪڙي لنڪ سان href
وصف سان، يا ھڪڙي بٽڻ سان data-bs-target
وصف سان. ٻنهي صورتن ۾، data-bs-toggle="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-start
وييو پورٽ جي کاٻي پاسي آف ڪينوس رکي ٿو (مٿي ڏيکاريل).offcanvas-end
وييو پورٽ جي ساڄي پاسي آف ڪينوس رکي ٿو.offcanvas-top
وييو پورٽ جي چوٽي تي آف ڪينوس رکي ٿو.offcanvas-bottom
وييو پورٽ جي تري ۾ آف ڪينوس رکي ٿو
ڪوشش ڪريو مٿين، ساڄي، ۽ ھيٺان مثال ھيٺ.
آف ڪينوس مٿي
<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>
آفڪينوس حق
<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>
پهچ
جيئن ته آفڪينوس پينل تصوراتي طور تي هڪ ماڊل ڊائلاگ آهي، ان ڪري شامل ڪرڻ جو يقين aria-labelledby="..."
رکجو -آفڪينوس ٽائيٽل جي حوالي سان - ڏانهن .offcanvas
. ياد رکو ته توهان کي شامل ڪرڻ جي ضرورت ناهي role="dialog"
ڇو ته اسان پهريان ئي جاوا اسڪرپٽ ذريعي شامل ڪيو آهي.
ساس
متغير
$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.show
مواد ڏيکاري ٿو.offcanvas-start
آفڪينوس کي کاٻي پاسي لڪائيندو آهي.offcanvas-end
آفڪينوس کي ساڄي پاسي لڪائي ٿو.offcanvas-bottom
آفڪينوس کي تري ۾ لڪائي ٿو
وصف سان برطرف بٽڻ شامل ڪريو data-bs-dismiss="offcanvas"
، جيڪو JavaScript ڪارڪردگي کي متحرڪ ڪري ٿو. <button>
سڀني ڊوائيسن تي مناسب رويي لاءِ ان سان عنصر کي استعمال ڪرڻ جي پڪ ڪريو .
ڊيٽا خاصيتن جي ذريعي
شامل ڪريو data-bs-toggle="offcanvas"
۽ a data-bs-target
يا href
عنصر کي خودڪار طور تي ھڪڙي آفڪينوس عنصر جي ڪنٽرول کي تفويض ڪرڻ لاء. انتساب هڪ CSS چونڊيندڙ کي قبول ڪري ٿو آف data-bs-target
ڪنوس کي لاڳو ڪرڻ لاءِ. ڪلاس کي شامل ڪرڻ جي پڪ ڪريو offcanvas
offcanvas عنصر ۾. جيڪڏھن توھان چاھيو ٿا ته ان کي ڊفالٽ کوليو وڃي، اضافي ڪلاس شامل ڪريو show
.
جاوا اسڪرپٽ ذريعي
دستي طور تي فعال ڪريو:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
اختيارن
اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-bs-
، جيئن data-bs-backdrop=""
.
نالو | قسم | ڊفالٽ | وصف |
---|---|---|---|
backdrop |
بولين | true |
جسم تي پس منظر لاڳو ڪريو جڏهن آفڪينوس کليل هجي |
keyboard |
بولين | true |
آف ڪينوس کي بند ڪري ٿو جڏھن Escape ڪي دٻايو ويندو آھي |
scroll |
بولين | false |
باڊي اسڪرولنگ جي اجازت ڏيو جڏهن آفڪينوس کليل هجي |
طريقا
هم وقت سازي طريقا ۽ منتقلي
سڀ API طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن موٽندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .
توهان جي مواد کي آف ڪنوس عنصر طور چالو ڪري ٿو. اختياري اختيارن کي قبول ڪري ٿو object
.
توهان تعمير ڪندڙ سان هڪ آفڪينوس مثال ٺاهي سگهو ٿا، مثال طور:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
طريقو | وصف |
---|---|
toggle |
ڏيکاريل يا لڪائڻ لاءِ آفڪينوس عنصر کي ٽوگل ڪري ٿو. ڪالر ڏانهن واپسي ان کان اڳ جو آفڪينوس عنصر اصل ۾ ڏيکاريو ويو هجي يا لڪيل هجي (يعني ان کان اڳ جو shown.bs.offcanvas يا hidden.bs.offcanvas واقعو ٿئي). |
show |
هڪ آفڪينوس عنصر ڏيکاري ٿو. ڪالر ڏانهن واپسي ان کان اڳ جو offcanvas عنصر اصل ۾ ڏيکاريو ويو آهي (يعني shown.bs.offcanvas واقعي ٿيڻ کان اڳ). |
hide |
هڪ آفڪينوس عنصر لڪائيندو آهي. ڪالر ڏانهن واپس اچي ٿو ان کان اڳ جو offcanvas عنصر اصل ۾ لڪايو ويو هجي (يعني hidden.bs.offcanvas واقعي کان اڳ). |
getInstance |
جامد طريقو جيڪو توهان کي DOM عنصر سان لاڳاپيل آفڪينوس مثال حاصل ڪرڻ جي اجازت ڏئي ٿو |
getOrCreateInstance |
جامد طريقو جيڪو توهان کي اجازت ڏئي ٿو offcanvas مثال حاصل ڪرڻ جي DOM عنصر سان لاڳاپيل، يا هڪ نئون ٺاهيو ان صورت ۾ جڏهن اهو شروع نه ڪيو ويو هو |
واقعا
بوٽ اسٽريپ جو آف ڪينوس ڪلاس ڪجھ واقعن کي بي نقاب ڪري ٿو آفڪينوس ڪارڪردگيءَ ۾ ڳنڍڻ لاءِ.
واقعي جو قسم | وصف |
---|---|
show.bs.offcanvas |
اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن show مثال جو طريقو سڏيو ويندو آهي. |
shown.bs.offcanvas |
هي واقعو ان وقت ڪڍيو ويندو آهي جڏهن هڪ آفڪينوس عنصر استعمال ڪندڙ کي ڏيکاريو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |
hide.bs.offcanvas |
اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hide طريقي کي سڏيو ويو آهي. |
hidden.bs.offcanvas |
هي واقعو فائر ڪيو ويندو آهي جڏهن هڪ آفڪينوس عنصر صارف کان لڪايو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})