স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
in English

অফক্যানভাস

কিছু ক্লাস এবং আমাদের 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"প্রয়োজনীয়।

href সঙ্গে লিঙ্ক
অফক্যানভাস
স্থানধারক হিসাবে কিছু পাঠ্য। বাস্তব জীবনে আপনি আপনার নির্বাচিত উপাদান থাকতে পারে. লাইক, টেক্সট, ইমেজ, লিস্ট ইত্যাদি।
<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...
})