মূল বিষয়বস্তুলৈ এৰি যাওক নথিপত্ৰ নেভিগেচনলৈ এৰি যাওক
in English

অফকেনভাছ

নেভিগেচন, শ্বপিং কাৰ্ট, আৰু অধিক কেইটামান শ্ৰেণী আৰু আমাৰ জাভাস্ক্রিপ্ট প্লাগইনৰ সৈতে আপোনাৰ প্ৰকল্পত লুকাই থকা চাইডবাৰসমূহ নিৰ্মাণ কৰক।

কেনেকৈ কাম কৰে

অফকেনভাছ এটা চাইডবাৰ উপাদান যি দৰ্শনপৰ্টৰ বাওঁ, সোঁ, বা তলৰ প্ৰান্তৰ পৰা দেখা দিবলৈ জাভাস্ক্রিপ্টৰ যোগেদি টগল কৰিব পাৰি। বুটাম বা এংকৰসমূহক ট্ৰিগাৰ হিচাপে ব্যৱহাৰ কৰা হয় যি আপুনি টগল কৰা নিৰ্দিষ্ট উপাদানসমূহৰ সৈতে সংযুক্ত কৰা হয়, আৰু dataবৈশিষ্ট্যসমূহ আমাৰ জাভাস্ক্রিপ্ট আমন্ত্ৰণ কৰিবলে ব্যৱহাৰ কৰা হয়।

  • অফকেনভাছে মডাল হিচাপে একে জাভাস্ক্রিপ্ট ক'ডৰ কিছুমান অংশীদাৰী কৰে। ধাৰণাগতভাৱে ইহঁত যথেষ্ট মিল আছে, কিন্তু ইহঁত পৃথক প্লাগইন।
  • একেদৰে, offcanvas ৰ শৈলী আৰু মাত্ৰাসমূহৰ বাবে কিছুমান উৎস Sass চলক মডালৰ চলকসমূহৰ পৰা উত্তৰাধিকাৰী সূত্ৰে পোৱা যায়।
  • যেতিয়া দেখুৱা হয়, অফকেনভাছে এটা অবিকল্পিত পটভূমি অন্তৰ্ভুক্ত কৰে যি অফকেনভাছ লুকুৱাবলৈ ক্লিক কৰিব পাৰি।
  • মডালৰ দৰেই এটা সময়ত মাত্ৰ এটা অফকেনভাছহে দেখুৱাব পাৰি।

মুৰ ডাঙি! CSS এ এনিমেচনসমূহ কেনেকৈ নিয়ন্ত্ৰণ কৰে তাক দিলে, আপুনি এটা উপাদান ব্যৱহাৰ marginবা তাৰ ওপৰত ব্যৱহাৰ কৰিব নোৱাৰে। ইয়াৰ পৰিৱৰ্তে, শ্ৰেণীটোক এটা স্বতন্ত্ৰ ৰেপিং উপাদান হিচাপে ব্যৱহাৰ কৰক।translate.offcanvas

এই উপাদানৰ এনিমেচন প্ৰভাৱ prefers-reduced-motionমাধ্যম প্ৰশ্নৰ ওপৰত নিৰ্ভৰশীল। আমাৰ অভিগম্যতা নথিপত্ৰৰ হ্ৰাস কৰা গতি অংশ চাওক ।

উদাহৰণ

অফকেনভাছ উপাদানসমূহ

তলত এটা অফকেনভাছ উদাহৰণ দিয়া হৈছে যি অবিকল্পিতভাৱে দেখুওৱা হৈছে ( .showon ৰ যোগেদি .offcanvas) । অফকেনভাছে এটা বন্ধ বুটামৰ সৈতে এটা হেডাৰৰ বাবে সমৰ্থন আৰু কিছুমান প্ৰাৰম্ভিক বাবে এটা বৈকল্পিক শৰীৰ শ্ৰেণী অন্তৰ্ভুক্ত কৰে padding। আমি পৰামৰ্শ দিওঁ যে আপুনি সম্ভৱ হ'লে বাতিল কাৰ্য্যসমূহৰ সৈতে অফকেনভাছ হেডাৰসমূহ অন্তৰ্ভুক্ত কৰক, বা এটা স্পষ্ট খাৰিজ কাৰ্য্য প্ৰদান কৰক।

অফকেনভাছ
অফকেনভাছৰ বাবে বিষয়বস্তু ইয়াত যায়। আপুনি ইয়াত প্ৰায় যিকোনো Bootstrap উপাদান বা স্বনিৰ্বাচিত উপাদানসমূহ স্থাপন কৰিব পাৰে ।
<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"আৰু এটা 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...
})