मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
Check
in English

ऑफकैनवास

कतिपयैः वर्गैः अस्माकं जावास्क्रिप्ट् प्लगिन् च सह नेविगेशन, शॉपिंग कार्ट्, इत्यादीनां कृते स्वप्रकल्पे गुप्तपार्श्वपट्टिकाः निर्मायताम् ।

इस पृष्ठ पर

कथं कार्यं करोति

Offcanvas इति एकः पार्श्वपट्टिकाघटकः अस्ति यः जावास्क्रिप्ट् मार्गेण टोग्ल् कर्तुं शक्यते यत् दृश्यपोर्ट् इत्यस्य वामतः, दक्षिणतः, उपरितः, अधः वा धारात् दृश्यते । बटन्स् अथवा एङ्कर्स् इत्यस्य उपयोगः ट्रिगर् इत्यस्य रूपेण भवति ये भवता टॉग्ल् कृत्वा विशिष्टेषु तत्त्वेषु संलग्नाः भवन्ति, dataअस्माकं जावास्क्रिप्ट् आह्वयितुं विशेषताः उपयुज्यन्ते ।

  • Offcanvas इत्येतत् मोडाल्स् इव केचन समानाः जावास्क्रिप्ट् कोड् साझां करोति । अवधारणात्मकरूपेण ते सर्वथा समानाः सन्ति, परन्तु ते पृथक् प्लगिन्स् सन्ति ।
  • तथैव offcanvas इत्यस्य शैलीनां आयामानां च कृते केचन स्रोतः Sass चराः मोडलस्य चरात् उत्तराधिकारं प्राप्नुवन्ति ।
  • यदा दर्शितं तदा offcanvas इत्यत्र पूर्वनिर्धारितपृष्ठभूमिः अन्तर्भवति यत् offcanvas गोपनार्थं क्लिक् कर्तुं शक्यते ।
  • मोडल इव एकस्मिन् समये एकमेव ऑफकैनवासं दर्शयितुं शक्यते ।

शिरः उपरि ! CSS एनिमेशनं कथं सम्पादयति इति दृष्ट्वा, भवान् कस्यचित् तत्त्वस्य उपयोगं marginवा translateउपरि वा न शक्नोति । .offcanvasअपि तु स्वतन्त्रं वेष्टनतत्त्वरूपेण वर्गस्य उपयोगं कुर्वन्तु ।

अस्य घटकस्य एनिमेशन-प्रभावः prefers-reduced-motionमीडिया-प्रश्नस्य उपरि निर्भरः भवति । अस्माकं सुलभतादस्तावेजस्य न्यूनीकृतगतिविभागं पश्यन्तु .

उदाहरणानि

ऑफकैनवास घटक

अधः एकं offcanvas उदाहरणं अस्ति यत् पूर्वनिर्धारितरूपेण (via .showon .offcanvas) दर्शितम् अस्ति । Offcanvas इत्यत्र क्लोज् बटन् युक्तस्य हेडरस्य समर्थनं भवति तथा च केषाञ्चन प्रारम्भिकानां कृते वैकल्पिकशरीरवर्गः अस्ति padding| वयं सुचयामः यत् भवान् यदा सम्भवं तदा निष्कासनक्रियाभिः सह offcanvas शीर्षकाणि समाविष्टं करोतु, अथवा स्पष्टं निष्कासनक्रियाम् अयच्छतु ।

ऑफकैनवास
ऑफकैनवासस्य कृते सामग्री अत्र गच्छति। अत्र भवान् प्रायः किमपि Bootstrap घटकं वा कस्टम् एलिमेण्ट् वा स्थापयितुं शक्नोति ।
html 
<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>

लाइव डेमो

जावास्क्रिप्ट् मार्गेण एकं offcanvas एलिमेण्ट् दर्शयितुं गोपयितुं च अधोलिखितानां बटन्स् इत्यस्य उपयोगं कुर्वन्तु यत् .showक्लास् इत्यनेन सह एलिमेण्ट् इत्यस्य उपरि क्लास् टॉग् करोति .offcanvas।

  • .offcanvasसामग्रीं गोपयति (पूर्वनिर्धारितम्) .
  • .offcanvas.showसामग्रीं दर्शयति

hrefभवान् विशेषतायुक्तं लिङ्क्, अथवा विशेषतायुक्तं बटन् उपयोक्तुं शक्नोति data-bs-target। उभयत्र data-bs-toggle="offcanvas"अपेक्षितम् इति ।

href इत्यनेन सह लिङ्क्
ऑफकैनवास
स्थानधारकत्वेन केचन पाठाः। यथार्थजीवने भवता चयनितानि तत्त्वानि प्राप्तुं शक्यन्ते। जैसे, पाठ, बिम्ब, सूची आदि।
html 
<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>

शरीर स्क्रॉल करना

यदा offcanvas <body>तस्य पृष्ठभूमिः च दृश्यते तदा एलिमेण्ट् स्क्रॉल करणम् अक्षमम् अस्ति । स्क्रॉलिंग् data-bs-scrollसक्षमीकरणाय विशेषतायाः उपयोगं कुर्वन्तु ।<body>

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

एतत् विकल्पं क्रियारूपेण द्रष्टुं पृष्ठस्य शेषभागं स्क्रॉलं कर्तुं प्रयतध्वम् ।

html 
<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>दृश्यमानपृष्ठभूमिना सह स्क्रॉलिंग् अपि सक्षमं कर्तुं शक्नुवन्ति ।

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

एतत् विकल्पं क्रियारूपेण द्रष्टुं पृष्ठस्य शेषभागं स्क्रॉलं कर्तुं प्रयतध्वम् ।

html 
<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>

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

यदा backdrop static इति सेट् भवति तदा तस्य बहिः क्लिक् करणसमये offcanvas न बन्दं भविष्यति ।

ऑफकैनवास
यदि भवान् मम बहिः क्लिक् करोति तर्हि अहं न पिधास्यामि।
html 
<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 इत्यस्मिन् योजितम्

उपयोगिताभिः सह offcanvases इत्यस्य स्वरूपं परिवर्तयन्तु येन तेषां भिन्न-भिन्न-सन्दर्भेषु यथा कृष्ण-नव-बार-इत्यादीनां मेलनं भवति । अत्र वयं कृष्णवर्णीयेन offcanvas इत्यनेन सह सम्यक् स्टाइलिंग् कृते and to इत्यत्र .text-bg-darkयोजयामः । यदि भवतः अन्तः ड्रॉपडाउन्स् सन्ति तर्हि , इत्यत्र अपि योजयितुं विचारयन्तु ।.offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

ऑफकैनवास

अत्र offcanvas सामग्रीं स्थापयन्तु।

html 
<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 वर्गाः निर्दिष्टविरामबिन्दुतः अधः च दृश्यपोर्टस्य बहिः सामग्रीं गोपयन्ति । तस्य भङ्गबिन्दुतः उपरि अन्तः सामग्री यथासाधारणं व्यवहारं करिष्यति । यथा, breakpoint .offcanvas-lgइत्यस्य अधः offcanvas इत्यस्मिन् सामग्रीं गोपयति lg, परन्तु breakpoint इत्यस्य उपरि सामग्रीं दर्शयति lg।

प्रतिक्रियाशीलं offcanvas टॉगल दर्शयितुं स्वस्य ब्राउज़रस्य आकारं परिवर्तयन्तु।
प्रतिक्रियाशील ऑफकैनवास

एतत् एकस्य अन्तः सामग्री अस्ति .offcanvas-lg.

html 
<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 घटकानां कृते पूर्वनिर्धारितस्थापनं नास्ति, अतः भवद्भिः अधः परिवर्तकवर्गेषु एकं योजयितुं शक्यते ।

  • .offcanvas-startदृश्यपोर्टस्य वामभागे offcanvas स्थापयति (ऊर्ध्वं दर्शितम्) ।
  • .offcanvas-endदृश्यपोर्टस्य दक्षिणभागे offcanvas स्थापयति
  • .offcanvas-topviewport इत्यस्य उपरि offcanvas स्थापयति
  • .offcanvas-bottomviewport इत्यस्य अधः offcanvas स्थापयति

अधः उपरि, दक्षिणं, अधः च उदाहरणानि प्रयतस्व ।

ऑफकैनवास शीर्ष
...
html 
<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>
ऑफकैनवास सही
...
html 
<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>
ऑफकैनवास नीचे
...
html 
<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>

सुलभता

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

CSS इति

चर

v5.2.0 इत्यस्मिन् योजितम्

Bootstrap इत्यस्य विकसितस्य CSS चरस्य दृष्टिकोणस्य भागत्वेन, offcanvas इदानीं .offcanvasवर्धितस्य वास्तविकसमयस्य अनुकूलनस्य कृते स्थानीय CSS चरस्य उपयोगं करोति । 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सामग्रीं गोपयति
  • .offcanvas.showसामग्रीं दर्शयति
  • .offcanvas-startवामभागे offcanvas गोपयति
  • .offcanvas-endदक्षिणतः offcanvas गोपयति
  • .offcanvas-topउपरि offcanvas गोपयति
  • .offcanvas-bottomअधः offcanvas गोपयति

विशेषतायाः सह dismiss बटन् योजयन्तु data-bs-dismiss="offcanvas", यत् JavaScript कार्यक्षमतां प्रेरयति । <button>सर्वेषु उपकरणेषु सम्यक् व्यवहारार्थं तया सह तत्त्वं अवश्यं उपयुज्यताम् ।

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

टॉगल करें

एकस्य offcanvas तत्त्वस्य नियन्त्रणं स्वयमेव नियुक्तुं तत्त्वे योजयन्तु data-bs-toggle="offcanvas"तथा च a data-bs-targetवा । hrefविशेषता offcanvas data-bs-targetप्रयोक्तुं CSS चयनकर्ता स्वीकुर्वति । offcanvasoffcanvas एलिमेण्ट् मध्ये क्लास् अवश्यं योजयन्तु । यदि भवान् इदं पूर्वनिर्धारितरूपेण उद्घाटितुम् इच्छति तर्हि अतिरिक्तवर्गं योजयन्तु show.

उत्सृज्

अधोलिखितं यथा अधः प्रदर्शितं तथा offcanvas अन्तःdata बटन् इत्यत्र विशेषतायाः सह निष्कासनं प्राप्तुं शक्यते ।

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

अथवा अधोलिखितस्य उपयोगेन offcanvas इत्यस्य बहिः बटनस्य उपरि data-bs-target:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
यद्यपि एकं offcanvas निष्कासयितुं द्वयोः मार्गयोः समर्थनं भवति, तथापि मनसि धारयतु यत् offcanvas इत्यस्य बहिः निष्कासनं ARIA Authoring Practices Guide संवाद (modal) प्रतिमानेन सह न मेलति एतत् स्वस्य जोखिमेन कुरुत।

जावास्क्रिप्ट् मार्गेण

सह मैन्युअल् रूपेण सक्षमं कुर्वन्तु:

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

विकल्पाः

यतः विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते, भवान् विकल्पनाम योजयितुं शक्नोति data-bs-, यथा data-bs-animation="{value}". data attributes मार्गेण विकल्पान् पारयन्ते सति विकल्पनामस्य case type “ camelCase ” तः “ kebab-case ” इति परिवर्तयितुं सुनिश्चितं कुर्वन्तु । यथा - इत्यस्य data-bs-custom-class="beautifier"स्थाने प्रयोगं कुर्वन्तु data-bs-customClass="beautifier"।

Bootstrap 5.2.0 तः, सर्वे घटकाः प्रयोगात्मकं आरक्षितदत्तांशविशेषणं समर्थयन्ति data-bs-configयत् सरलघटकविन्यासं JSON स्ट्रिंग् रूपेण स्थापयितुं शक्नोति । यदा कस्यचित् तत्त्वस्य data-bs-config='{"delay":0, "title":123}'and data-bs-title="456"attributes भवति तदा अन्तिममूल्यं titleभविष्यति 456तथा च पृथक् data attributes इत्यत्र दत्तानि मूल्यानि अधिलिखिष्यन्ति data-bs-config। तदतिरिक्तं, विद्यमानाः दत्तांशविशेषताः JSON मूल्यानि यथा - स्थापनं कर्तुं समर्थाः सन्ति data-bs-delay='{"show":0,"hide":150}'।

नामः प्रकारः मूलभूतम्‌ वर्णनम्‌
backdrop बूलेन वा तारःstatic true offcanvas खुले होने पर शरीर पर पृष्ठभूमि लगाएं। वैकल्पिकरूपेण, staticएकस्य पृष्ठभूमिस्य कृते निर्दिशतु यत् क्लिक् करणसमये offcanvas न बन्दं करोति ।
keyboard बूलियन इति true escape कील दबाने पर offcanvas को बन्द करता है।
scroll बूलियन इति false offcanvas खुले होने पर शरीर स्क्रॉल करने की अनुमति दें।

विधियाँ

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

सर्वे एपिआइ विधिः अतुल्यकालिकः भवति तथा च संक्रमणं आरभते | ते संक्रमणस्य आरम्भमात्रेण परन्तु तस्य समाप्तेः पूर्वं आह्वानकर्तुः समीपं आगच्छन्ति | तदतिरिक्तं, संक्रमणघटकस्य उपरि एकः विधि-आह्वानः अवहेलितः भविष्यति .

अधिकविवरणार्थं अस्माकं जावास्क्रिप्ट् दस्तावेजं पश्यन्तु .

भवतः सामग्रीं offcanvas तत्वरूपेण सक्रियं करोति । एकं वैकल्पिकं विकल्पं स्वीकुर्वति object.

भवान् कन्स्ट्रक्टर् इत्यनेन सह offcanvas इत्यस्य उदाहरणं निर्मातुम् अर्हति, यथा :

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
प्रक्रिया वर्णनम्‌
getInstance स्थिरविधिः या भवन्तं DOM तत्वेन सह सम्बद्धं offcanvas उदाहरणं प्राप्तुं शक्नोति ।
getOrCreateInstance स्थिरविधिः या भवन्तं DOM-तत्त्वेन सह सम्बद्धं offcanvas-दृष्टान्तं प्राप्तुं, अथवा आरम्भं न कृत्वा नूतनं निर्मातुं शक्नोति ।
hide एकं offcanvas तत्त्वं गोपयति। offcanvas तत्वं वास्तवतः गोपनीयं भवितुं पूर्वं (अर्थात् hidden.bs.offcanvasघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।
show एकं offcanvas तत्त्वं दर्शयति । offcanvas तत्वं वास्तवतः दर्शितस्य पूर्वं (अर्थात् shown.bs.offcanvasघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।
toggle एकं offcanvas तत्त्वं दर्शितं वा गुप्तं वा प्रति टॉगलं करोति । offcanvas तत्वं वास्तवतः दर्शितं वा गुप्तं वा भवितुं पूर्वं (अर्थात् shown.bs.offcanvasor hidden.bs.offcanvasघटना घटितुं पूर्वं) आह्वानकर्त्रे प्रत्यागच्छति ।

घटनाः

Bootstrap इत्यस्य offcanvas वर्गः offcanvas कार्यक्षमतायाः हुक् करणाय कतिपयानि घटनानि उजागरयति ।

घटना प्रकार वर्णनम्‌
hide.bs.offcanvas hideविधि आहूते सद्यः एषा घटना प्रज्वलिता भवति ।
hidden.bs.offcanvas इदं घटना तदा प्रज्वलितं भवति यदा उपयोक्त्रेण एकं offcanvas तत्त्वं निगूढं भवति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) ।
hidePrevented.bs.offcanvas इदं घटना तदा प्रज्वलितं भवति यदा offcanvas दर्शितं भवति, तस्य पृष्ठभूमिः अस्ति staticतथा च offcanvas तः बहिः क्लिक् क्रियते । यदा escape कीलम् नुदति keyboardविकल्पः च सेट् भवति तदा अपि घटना प्रज्वलितः भवति false।
show.bs.offcanvas एषा घटना तत्क्षणमेव प्रज्वलति यदा showदृष्टान्तविधिः आह्वयते ।
shown.bs.offcanvas यदा उपयोक्त्रे दृश्यमानं offcanvas तत्त्वं कृतम् अस्ति तदा एषा घटना प्रज्वलिता भवति (CSS संक्रमणानां पूर्णतां प्रतीक्षते) । 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})