मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
in English

ऑफकैनवास

किछु वर्ग आरू हमरऽ जावास्क्रिप्ट प्लगइन के साथ नेविगेशन, शॉपिंग कार्ट, आरू बहुत कुछ के लेलऽ अपनऽ प्रोजेक्ट म॑ छिपलऽ साइडबार बनाबै ।

कोना काज करैत अछि

ऑफकैनवास एकटा साइडबार घटक छै जेकरा जावास्क्रिप्ट के माध्यम स॑ टॉगल करलऽ जाब॑ सकै छै ताकि व्यूपोर्ट केरऽ बायां, दायां, या निचला किनारे स॑ प्रकट करलऽ जाय सक॑ । बटन या एंकर क॑ ट्रिगर के रूप म॑ प्रयोग करलऽ जाय छै जे विशिष्ट तत्वऽ स॑ जुड़लऽ होय छै जेकरा आप टॉगल करै छै, आरू dataविशेषता के उपयोग हमरऽ जावास्क्रिप्ट क॑ आह्वान करै लेली करलऽ जाय छै ।

  • ऑफकैनवास मोडल के रूप में कुछ वही जावास्क्रिप्ट कोड साझा करै छै. अवधारणागत रूप स इ सब काफी समान अछि, मुदा इ अलग-अलग प्लगइन अछि ।
  • इसी तरह, ऑफकैनवास के शैली आरू आयाम के लेलऽ कुछ स्रोत 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"आवश्यक अछि।

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 ऑफकैनवास खुजल रहैत बॉडी स्क्रॉल करबाक अनुमति दियौक

विधियाँ

अतुल्यकालिक विधि एवं संक्रमण

सब एपीआई विधि एसिंक्रोनस अछि आ एकटा संक्रमण शुरू करैत अछि . संक्रमण शुरू होइते मुदा समाप्त होए सं पहिने फोन करय वाला के पास वापस आबि जाइत छथिन्ह . एकर अलावा, एकटा संक्रमण घटक पर एकटा विधि कॉल कें अनदेखी कैल जेतय .

अधिक जानकारी के लेल हमर जावास्क्रिप्ट दस्तावेज देखू .

एकटा ऑफकैनवास तत्व के रूप मे अपन सामग्री के सक्रिय करैत अछि. एकटा वैकल्पिक विकल्प स्वीकार करैत अछि 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...
})