অফক্যানভাস
কিছু ক্লাস এবং আমাদের JavaScript প্লাগইন দিয়ে নেভিগেশন, শপিং কার্ট এবং আরও অনেক কিছুর জন্য আপনার প্রোজেক্টে লুকানো সাইডবার তৈরি করুন।
কিভাবে এটা কাজ করে
অফক্যানভাস হল একটি সাইডবার উপাদান যা ভিউপোর্টের বাম, ডান বা নীচের প্রান্ত থেকে প্রদর্শিত হতে JavaScript এর মাধ্যমে টগল করা যেতে পারে। বোতাম বা নোঙ্গরগুলি ট্রিগার হিসাবে ব্যবহৃত হয় যা আপনি টগল করেন এমন নির্দিষ্ট উপাদানগুলির সাথে সংযুক্ত থাকে এবং data
আমাদের জাভাস্ক্রিপ্ট চালু করতে বৈশিষ্ট্যগুলি ব্যবহার করা হয়।
- অফক্যানভাস একই জাভাস্ক্রিপ্ট কোডের কিছু মোডাল হিসাবে শেয়ার করে। ধারণাগতভাবে, তারা বেশ একই রকম, কিন্তু তারা আলাদা প্লাগইন।
- একইভাবে, অফক্যানভাসের শৈলী এবং মাত্রার জন্য কিছু উৎস Sass ভেরিয়েবলগুলি মডেলের ভেরিয়েবল থেকে উত্তরাধিকারসূত্রে প্রাপ্ত।
- দেখানো হলে, অফক্যানভাসে একটি ডিফল্ট ব্যাকড্রপ অন্তর্ভুক্ত থাকে যা অফক্যানভাস লুকানোর জন্য ক্লিক করা যেতে পারে।
- মডেলের মতো, একবারে শুধুমাত্র একটি অফক্যানভাস দেখানো যেতে পারে।
মাথা আপ! সিএসএস অ্যানিমেশনগুলি কীভাবে পরিচালনা করে তা প্রদত্ত, আপনি কোনও উপাদান ব্যবহার করতে 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"
, যা জাভাস্ক্রিপ্ট কার্যকারিতা ট্রিগার করে। <button>
সমস্ত ডিভাইস জুড়ে সঠিক আচরণের জন্য এটির সাথে উপাদানটি ব্যবহার করতে ভুলবেন না ।
ডেটা অ্যাট্রিবিউটের মাধ্যমে
একটি অফক্যানভাস উপাদানের নিয়ন্ত্রণ স্বয়ংক্রিয়ভাবে বরাদ্দ করতে উপাদানটিতে data-bs-toggle="offcanvas"
এবং a data-bs-target
বা যোগ করুন । href
অফক্যানভাস data-bs-target
প্রয়োগ করার জন্য বৈশিষ্ট্যটি একটি CSS নির্বাচককে গ্রহণ করে। 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 |
একটি অফক্যানভাস উপাদান ব্যবহারকারীর কাছে দৃশ্যমান হলে এই ইভেন্টটি চালু করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
hide.bs.offcanvas |
এই ইভেন্ট অবিলম্বে বহিস্কার করা হয় যখন hide পদ্ধতি বলা হয়েছে. |
hidden.bs.offcanvas |
এই ইভেন্টটি বরখাস্ত করা হয় যখন একটি অফক্যানভাস উপাদান ব্যবহারকারীর কাছ থেকে লুকানো থাকে (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)। |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})