ऑफकैनवास

कुछ कक्षाओं और हमारे जावास्क्रिप्ट प्लगइन के साथ नेविगेशन, शॉपिंग कार्ट और बहुत कुछ के लिए अपने प्रोजेक्ट में छिपे हुए साइडबार बनाएं।

इस पृष्ठ पर

यह काम किस प्रकार करता है

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

ऑफकैनवास कुछ समान जावास्क्रिप्ट कोड को मोडल के रूप में साझा करता है। वैचारिक रूप से, वे काफी समान हैं, लेकिन वे अलग प्लगइन्स हैं।
इसी तरह, ऑफकैनवास की शैलियों और आयामों के लिए कुछ स्रोत सैस चर मोडल के चर से विरासत में मिले हैं।
दिखाए जाने पर, ऑफ़कैनवास में एक डिफ़ॉल्ट बैकड्रॉप शामिल होता है जिसे ऑफ़कैनवास को छिपाने के लिए क्लिक किया जा सकता है।
मोडल के समान, एक समय में केवल एक ऑफकैनवास दिखाया जा सकता है।

सचेत! यह देखते हुए कि CSS एनिमेशन को कैसे संभालता है, आप marginया translateकिसी .offcanvasतत्व का उपयोग नहीं कर सकते। इसके बजाय, कक्षा को एक स्वतंत्र रैपिंग तत्व के रूप में उपयोग करें।

इस घटक का एनीमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरी पर निर्भर है। हमारे एक्सेसिबिलिटी डॉक्यूमेंटेशन का रिड्यूस्ड मोशन सेक्शन देखें ।

उदाहरण

ऑफकैनवास घटक

नीचे एक ऑफकैनवास उदाहरण दिया गया है जो डिफ़ॉल्ट रूप से ( .showon के माध्यम से .offcanvas) दिखाया गया है। ऑफकैनवास में क्लोज बटन वाले हेडर के लिए सपोर्ट और कुछ शुरुआती के लिए वैकल्पिक बॉडी क्लास शामिल है padding। हमारा सुझाव है कि आप जब भी संभव हो खारिज करने की कार्रवाइयों के साथ ऑफकैनवास हेडर शामिल करें, या एक स्पष्ट खारिज करने की कार्रवाई प्रदान करें।

ऑफकैनवास के लिए सामग्री यहां जाती है। आप यहां लगभग किसी भी बूटस्ट्रैप घटक या कस्टम तत्वों को रख सकते हैं।

एचटीएमएल

<div class="offcanvas offcanvas-start show" 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" 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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

बॉडी स्क्रॉलिंग

<body>जब कैनवास और उसकी पृष्ठभूमि दिखाई देती है , तो तत्व को स्क्रॉल करना अक्षम हो जाता है। स्क्रॉलिंग data-bs-scrollसक्षम करने के लिए विशेषता का उपयोग करें ।<body>

इस विकल्प को क्रिया में देखने के लिए शेष पृष्ठ को स्क्रॉल करने का प्रयास करें।

एचटीएमएल

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

बॉडी स्क्रॉलिंग और बैकड्रॉप

<body>आप दृश्यमान पृष्ठभूमि के साथ स्क्रॉलिंग को भी सक्षम कर सकते हैं ।

एचटीएमएल

<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" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
    <button type="button" class="btn-close" 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>

स्थिर पृष्ठभूमि

जब बैकड्रॉप को स्थिर पर सेट किया जाता है, तो इसके बाहर क्लिक करने पर ऑफकैनवास बंद नहीं होगा।

यदि आप मेरे बाहर क्लिक करते हैं तो मैं बंद नहीं करूंगा।

एचटीएमएल

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

डार्क ऑफकैनवास

v5.2.0 . में जोड़ा गया

उपयोगिताओं के साथ ऑफकैनवासों के स्वरूप को बदलें ताकि उन्हें विभिन्न संदर्भों जैसे डार्क नेवबार से बेहतर ढंग से मिलान किया जा सके। यहां हम डार्क ऑफकैनवास के साथ उचित स्टाइलिंग के लिए और .text-bg-darkमें .offcanvasजोड़ते हैं। यदि आपके भीतर ड्रॉपडाउन हैं, तो इसमें जोड़ने पर भी विचार करें ।.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

यहां ऑफकैनवास सामग्री रखें।

एचटीएमएल

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

उत्तरदायी

v5.2.0 . में जोड़ा गया

उत्तरदायी ऑफकैनवास कक्षाएं व्यूपोर्ट के बाहर सामग्री को एक निर्दिष्ट ब्रेकपॉइंट और नीचे से छिपाती हैं। उस विराम बिंदु के ऊपर, अंदर की सामग्री हमेशा की तरह व्यवहार करेगी। उदाहरण के लिए, ब्रेकपॉइंट .offcanvas-lgके नीचे एक ऑफकैनवास में सामग्री छुपाता है lg, लेकिन सामग्री को ब्रेकपॉइंट के ऊपर दिखाता है lg।

उत्तरदायी ऑफकैनवास टॉगल दिखाने के लिए अपने ब्राउज़र का आकार बदलें।

यह एक के भीतर सामग्री है .offcanvas-lg।

एचटीएमएल

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

प्रत्येक ब्रेकपॉइंट के लिए उत्तरदायी ऑफकैनवास कक्षाएं उपलब्ध हैं।

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

प्लेसमेंट

ऑफकैनवास घटकों के लिए कोई डिफ़ॉल्ट प्लेसमेंट नहीं है, इसलिए आपको नीचे एक संशोधक वर्ग जोड़ना होगा।

.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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" 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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" 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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

सरल उपयोग

चूंकि ऑफकैनवास पैनल अवधारणात्मक रूप से एक मोडल डायलॉग है, aria-labelledby="..."इसलिए ऑफकैनवास शीर्षक—को जोड़ना सुनिश्चित करें .offcanvas। ध्यान दें कि आपको जोड़ने की आवश्यकता नहीं है role="dialog"क्योंकि हम इसे पहले ही जावास्क्रिप्ट के माध्यम से जोड़ चुके हैं।

सीएसएस

चर

v5.2.0 . में जोड़ा गया

बूटस्ट्रैप के विकसित हो रहे सीएसएस चर दृष्टिकोण के हिस्से के रूप में, ऑफकैनवास अब .offcanvasवास्तविक समय के अनुकूलन को बढ़ाने के लिए स्थानीय सीएसएस चर का उपयोग करता है। CSS वेरिएबल्स के मान Sass के माध्यम से सेट किए जाते हैं, इसलिए Sass अनुकूलन अभी भी समर्थित है।

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

सास चर

$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-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

प्रयोग

भारी भारोत्तोलन को संभालने के लिए ऑफकैनवास प्लगइन कुछ वर्गों और विशेषताओं का उपयोग करता है:

.offcanvasसामग्री छुपाता है
.offcanvas.showसामग्री दिखाता है
.offcanvas-startऑफकैनवास को बाईं ओर छुपाता है
.offcanvas-endऑफ़कैनवास को दाईं ओर छुपाता है
.offcanvas-topऑफकैनवास को शीर्ष पर छुपाता है
.offcanvas-bottomकैनवास को तल पर छुपाता है

विशेषता के साथ खारिज करें बटन जोड़ें data-bs-dismiss="offcanvas", जो JavaScript कार्यक्षमता को ट्रिगर करता है। <button>सभी उपकरणों पर उचित व्यवहार के लिए इसके साथ तत्व का उपयोग करना सुनिश्चित करें ।

डेटा विशेषताओं के माध्यम से

टॉगल

एक ऑफकैनवास तत्व के नियंत्रण को स्वचालित रूप से असाइन करने के लिए तत्व में जोड़ें data-bs-toggle="offcanvas"और a data-bs-targetया जोड़ें। ऑफकैनवास को लागू करने के लिए विशेषता एक सीएसएस चयनकर्ता को स्वीकार करती है href। कक्षा को ऑफकैनवास तत्व में data-bs-targetजोड़ना सुनिश्चित करें । offcanvasयदि आप इसे डिफ़ॉल्ट रूप से खोलना चाहते हैं, तो अतिरिक्त वर्ग जोड़ें show।

नकार देना

नीचे दिखाए गए अनुसार ऑफकैनवास के भीतरdata एक बटन पर विशेषता के साथ बर्खास्तगी हासिल की जा सकती है :

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

या नीचे दिखाए गए अनुसार ऑफकैनवास के बाहर एक बटन पर data-bs-target:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>

जबकि एक ऑफकैनवास को खारिज करने के दोनों तरीके समर्थित हैं, ध्यान रखें कि ऑफकैनवास के बाहर से खारिज करना ARIA ऑथरिंग प्रैक्टिस गाइड डायलॉग (मोडल) पैटर्न से मेल नहीं खाता है । ये काम आप अपनी जोखिम पर करें।

जावास्क्रिप्ट के माध्यम से

इसके साथ मैन्युअल रूप से सक्षम करें:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

विकल्प

चूंकि विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं, आप विकल्प नाम को में जोड़ सकते हैं data-bs-, जैसा कि में है data-bs-animation="{value}"। डेटा विशेषताओं के माध्यम से विकल्पों को पास करते समय केस प्रकार के विकल्प नाम को " CamelCase " से " कबाब-केस " में बदलना सुनिश्चित करें । उदाहरण के लिए, data-bs-custom-class="beautifier"के बजाय उपयोग करें data-bs-customClass="beautifier"।

बूटस्ट्रैप 5.2.0 के अनुसार, सभी घटक एक प्रयोगात्मक आरक्षित डेटा विशेषता data-bs-configका समर्थन करते हैं जो JSON स्ट्रिंग के रूप में सरल घटक कॉन्फ़िगरेशन को रख सकता है। जब किसी तत्व में data-bs-config='{"delay":0, "title":123}'और data-bs-title="456"विशेषताएँ होती हैं, तो अंतिम titleमान होगा 456और अलग डेटा विशेषताएँ पर दिए गए मानों को ओवरराइड कर देंगी data-bs-config। इसके अलावा, मौजूदा डेटा विशेषताएँ JSON मान जैसे data-bs-delay='{"show":0,"hide":150}'.

नाम	टाइप	चूक	विवरण
`backdrop`	बूलियन या स्ट्रिंग`static`	`true`	ऑफकैनवास खुला होने पर शरीर पर पृष्ठभूमि लागू करें। वैकल्पिक रूप से, `static`उस पृष्ठभूमि के लिए निर्दिष्ट करें जो क्लिक करने पर ऑफकैनवास को बंद नहीं करता है।
`keyboard`	बूलियन	`true`	एस्केप कुंजी दबाए जाने पर ऑफकैनवास बंद कर देता है।
`scroll`	बूलियन	`false`	ऑफकैनवास खुला होने पर बॉडी स्क्रॉलिंग की अनुमति दें।

तरीकों

अतुल्यकालिक तरीके और संक्रमण

सभी एपीआई विधियाँ अतुल्यकालिक हैं और एक संक्रमण शुरू करती हैं । ट्रांज़िशन शुरू होते ही वे कॉलर के पास वापस आ जाते हैं लेकिन उसके समाप्त होने से पहले । इसके अलावा, एक संक्रमण घटक पर एक विधि कॉल को नजरअंदाज कर दिया जाएगा ।

अधिक जानकारी के लिए हमारे जावास्क्रिप्ट दस्तावेज़ देखें ।

आपकी सामग्री को एक ऑफकैनवास तत्व के रूप में सक्रिय करता है। एक वैकल्पिक विकल्प स्वीकार करता है object।

आप कंस्ट्रक्टर के साथ एक ऑफकैनवास इंस्टेंस बना सकते हैं, उदाहरण के लिए:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

तरीका	विवरण
`getInstance`	स्टेटिक विधि जो आपको एक डोम तत्व से जुड़े ऑफकैनवास इंस्टेंस को प्राप्त करने की अनुमति देती है।
`getOrCreateInstance`	स्टेटिक विधि जो आपको DOM तत्व से जुड़े ऑफकैनवास इंस्टेंस को प्राप्त करने की अनुमति देती है, या यदि इसे प्रारंभ नहीं किया गया था तो एक नया बनाएं।
`hide`	एक ऑफकैनवास तत्व छुपाता है। ऑफकैनवास तत्व वास्तव में छुपा हुआ है (यानी `hidden.bs.offcanvas`घटना होने से पहले) कॉलर पर वापस आ जाता है।
`show`	एक ऑफकैनवास तत्व दिखाता है। ऑफकैनवास तत्व वास्तव में दिखाए जाने से पहले कॉलर को लौटाता है (यानी `shown.bs.offcanvas`घटना होने से पहले)।
`toggle`	ऑफकैनवास तत्व को दिखाने या छिपाने के लिए टॉगल करता है। ऑफकैनवास तत्व को वास्तव में दिखाया या छिपाया गया है (यानी `shown.bs.offcanvas`या `hidden.bs.offcanvas`घटना होने से पहले) कॉलर पर वापस आ जाता है।

आयोजन

बूटस्ट्रैप का ऑफकैनवास वर्ग ऑफकैनवास कार्यक्षमता में शामिल होने के लिए कुछ घटनाओं को उजागर करता है।

घटना प्रकार	विवरण
`hide.bs.offcanvas`	इस घटना को तुरंत निकाल दिया जाता है जब `hide`विधि को बुलाया जाता है।
`hidden.bs.offcanvas`	यह घटना तब सक्रिय होती है जब उपयोगकर्ता से एक ऑफकैनवास तत्व छुपाया जाता है (सीएसएस संक्रमण पूरा होने की प्रतीक्षा करेगा)।
`hidePrevented.bs.offcanvas`	यह घटना तब सक्रिय होती है जब ऑफकैनवास दिखाया जाता है, इसकी पृष्ठभूमि होती है `static`और ऑफकैनवास के बाहर एक क्लिक किया जाता है। जब एस्केप कुंजी को दबाया जाता है और `keyboard`विकल्प को पर सेट किया जाता है , तो ईवेंट भी सक्रिय हो जाता है `false`।
`show.bs.offcanvas`	`show`इंस्टेंस विधि को कॉल करने पर यह घटना तुरंत सक्रिय हो जाती है।
`shown.bs.offcanvas`	यह घटना तब सक्रिय होती है जब एक ऑफकैनवास तत्व उपयोगकर्ता को दिखाई देता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)।

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

ऑफकैनवास

यह काम किस प्रकार करता है

उदाहरण

ऑफकैनवास घटक

ऑफकैनवास

लाइव डेमो

ऑफकैनवास

बॉडी स्क्रॉलिंग

बॉडी स्क्रॉलिंग के साथ ऑफकैनवास

बॉडी स्क्रॉलिंग और बैकड्रॉप

स्क्रॉलिंग के साथ पृष्ठभूमि

स्थिर पृष्ठभूमि

ऑफकैनवास

डार्क ऑफकैनवास

ऑफकैनवास

उत्तरदायी

उत्तरदायी ऑफकैनवास

प्लेसमेंट

ऑफकैनवास टॉप

ऑफकैनवास राइट

ऑफकैनवास नीचे

सरल उपयोग

सीएसएस

चर

सास चर

प्रयोग

डेटा विशेषताओं के माध्यम से

टॉगल

नकार देना

जावास्क्रिप्ट के माध्यम से

विकल्प

तरीकों

अतुल्यकालिक तरीके और संक्रमण

आयोजन