অফকেনভাছ
নেভিগেচন, শ্বপিং কাৰ্ট, আৰু অধিক কেইটামান শ্ৰেণী আৰু আমাৰ জাভাস্ক্রিপ্ট প্লাগইনৰ সৈতে আপোনাৰ প্ৰকল্পত লুকাই থকা চাইডবাৰসমূহ নিৰ্মাণ কৰক।
কেনেকৈ কাম কৰে
অফকেনভাছ এটা চাইডবাৰ উপাদান যি দৰ্শনপৰ্টৰ বাওঁ, সোঁ, বা তলৰ প্ৰান্তৰ পৰা দেখা দিবলৈ জাভাস্ক্রিপ্টৰ যোগেদি টগল কৰিব পাৰি। বুটাম বা এংকৰসমূহক ট্ৰিগাৰ হিচাপে ব্যৱহাৰ কৰা হয় যি আপুনি টগল কৰা নিৰ্দিষ্ট উপাদানসমূহৰ সৈতে সংযুক্ত কৰা হয়, আৰু data
বৈশিষ্ট্যসমূহ আমাৰ জাভাস্ক্রিপ্ট আমন্ত্ৰণ কৰিবলে ব্যৱহাৰ কৰা হয়।
- অফকেনভাছে মডাল হিচাপে একে জাভাস্ক্রিপ্ট ক'ডৰ কিছুমান অংশীদাৰী কৰে। ধাৰণাগতভাৱে ইহঁত যথেষ্ট মিল আছে, কিন্তু ইহঁত পৃথক প্লাগইন।
- একেদৰে, offcanvas ৰ শৈলী আৰু মাত্ৰাসমূহৰ বাবে কিছুমান উৎস Sass চলক মডালৰ চলকসমূহৰ পৰা উত্তৰাধিকাৰী সূত্ৰে পোৱা যায়।
- যেতিয়া দেখুৱা হয়, অফকেনভাছে এটা অবিকল্পিত পটভূমি অন্তৰ্ভুক্ত কৰে যি অফকেনভাছ লুকুৱাবলৈ ক্লিক কৰিব পাৰি।
- মডালৰ দৰেই এটা সময়ত মাত্ৰ এটা অফকেনভাছহে দেখুৱাব পাৰি।
মুৰ ডাঙি! CSS এ এনিমেচনসমূহ কেনেকৈ নিয়ন্ত্ৰণ কৰে তাক দিলে, আপুনি এটা উপাদান ব্যৱহাৰ margin
বা তাৰ ওপৰত ব্যৱহাৰ কৰিব নোৱাৰে। ইয়াৰ পৰিৱৰ্তে, শ্ৰেণীটোক এটা স্বতন্ত্ৰ ৰেপিং উপাদান হিচাপে ব্যৱহাৰ কৰক।translate
.offcanvas
prefers-reduced-motion
মাধ্যম প্ৰশ্নৰ ওপৰত নিৰ্ভৰশীল। আমাৰ অভিগম্যতা নথিপত্ৰৰ হ্ৰাস কৰা গতি অংশ চাওক
।
উদাহৰণ
অফকেনভাছ উপাদানসমূহ
তলত এটা অফকেনভাছ উদাহৰণ দিয়া হৈছে যি অবিকল্পিতভাৱে দেখুওৱা হৈছে ( .show
on ৰ যোগেদি .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"
, যি জাভাস্ক্রিপ্ট কাৰ্য্যকৰীতা ট্ৰিগাৰ কৰে। <button>
সকলো ডিভাইচত সঠিক আচৰণৰ বাবে উপাদানটো ইয়াৰ সৈতে ব্যৱহাৰ কৰাটো নিশ্চিত কৰক ।
ডাটা এট্ৰিবিউটৰ জৰিয়তে
এটা অফকেনভাছ উপাদানৰ নিয়ন্ত্ৰণ স্বয়ংক্ৰিয়ভাৱে নিযুক্ত কৰিবলে উপাদানটোত data-bs-toggle="offcanvas"
আৰু এটা data-bs-target
বা যোগ কৰক । বৈশিষ্ট্যই অফকেনভাছ প্ৰয়োগ কৰিবলে এটা CSS নিৰ্বাচক গ্ৰহণ কৰে href
। অফকেনভাছ উপাদানত data-bs-target
শ্ৰেণীটো নিশ্চিতভাৱে যোগ কৰক । 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 |
এস্কেপ কি' টিপিলে অফকেনভাছ বন্ধ কৰে |
scroll |
বুলিয়ান | false |
অফকেনভাছ খোলা থকাৰ সময়ত বডি স্ক্ৰলিং কৰাৰ অনুমতি দিয়ক |
পদ্ধতিসমূহ
এচিংক্ৰ’নাছ পদ্ধতি আৰু পৰিৱৰ্তন
সকলো API পদ্ধতি এচিনক্ৰ'নাছ আৰু এটা পৰিৱৰ্তন আৰম্ভ কৰে । ট্ৰেঞ্জিচন আৰম্ভ হোৱাৰ লগে লগে কিন্তু শেষ হোৱাৰ আগতেই তেওঁলোকে কল কৰাজনৰ ওচৰলৈ উভতি যায় ৷ ইয়াৰ উপৰিও, এটা পৰিৱৰ্তনশীল উপাদানত এটা পদ্ধতি কল আওকাণ কৰা হ'ব ।
আপোনাৰ বিষয়বস্তু এটা অফকেনভাছ উপাদান হিচাপে সক্ৰিয় কৰে। এটা বৈকল্পিক বিকল্পসমূহ গ্ৰহণ কৰে object
।
আপুনি নিৰ্মাতাৰ সৈতে এটা অফকেনভাছ উদাহৰণ সৃষ্টি কৰিব পাৰে, উদাহৰণস্বৰূপ:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
প্রণালী | বিৱৰণ |
---|---|
toggle |
এটা অফকেনভাছ উপাদান দেখুওৱা বা লুকুৱাবলৈ টগল কৰে। অফকেনভাছ উপাদান প্ৰকৃততে দেখুৱা বা লুকুৱাই ৰখাৰ আগতে (অৰ্থাৎ shown.bs.offcanvas বা hidden.bs.offcanvas ইভেন্ট ঘটাৰ আগতে) কলাৰলৈ উভতি যায়। |
show |
এটা অফকেনভাছ উপাদান দেখুৱায়। অফকেনভাছ উপাদানটো প্ৰকৃততে দেখুওৱাৰ আগতে (অৰ্থাৎ shown.bs.offcanvas ইভেন্টটো ঘটাৰ আগতে) কলাৰলৈ উভতি যায়। |
hide |
এটা অফকেনভাছ উপাদান লুকুৱাই ৰাখে। অফকেনভাছ উপাদানটো প্ৰকৃততে লুকুৱাই ৰখাৰ আগতে (অৰ্থাৎ hidden.bs.offcanvas ইভেন্টটো ঘটাৰ আগতে) কলাৰলৈ ঘূৰি যায়। |
getInstance |
স্থিতিশীল পদ্ধতি যি আপোনাক এটা DOM উপাদানৰ সৈতে জড়িত অফকেনভাছ উদাহৰণ পাবলৈ অনুমতি দিয়ে |
getOrCreateInstance |
স্থিতিশীল পদ্ধতি যি আপোনাক এটা DOM উপাদানৰ সৈতে জড়িত অফকেনভাছ উদাহৰণ পাবলৈ অনুমতি দিয়ে, বা এটা নতুন সৃষ্টি কৰক যদি ইয়াক আৰম্ভ কৰা হোৱা নাছিল |
ইভেন্টসমূহ
বুটষ্ট্ৰেপৰ অফকেনভাছ শ্ৰেণীয়ে অফকেনভাছ কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে কেইটামান ইভেন্ট উন্মোচন কৰে।
ইভেন্টৰ ধৰণ | বিৱৰণ |
---|---|
show.bs.offcanvas |
এই ইভেন্ট তৎক্ষণাত ফায়াৰ হয় যেতিয়া show ইনষ্টেন্স পদ্ধতি কল কৰা হয়। |
shown.bs.offcanvas |
এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া এটা অফকেনভাছ উপাদান ব্যৱহাৰকাৰীৰ বাবে দৃশ্যমান কৰা হয় (CSS পৰিবৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)। |
hide.bs.offcanvas |
এই ইভেন্টটো তৎক্ষণাত ফায়াৰ কৰা হয় যেতিয়া hide পদ্ধতিটো কল কৰা হয়। |
hidden.bs.offcanvas |
এই ইভেন্টটো জুই কৰা হয় যেতিয়া এটা অফকেনভাছ উপাদান ব্যৱহাৰকাৰীৰ পৰা লুকুৱাই ৰখা হয় (CSS পৰিবৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)। |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})