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

ऑफकैनवास

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

इस पृष्ठ पर

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

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

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

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

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

उदाहरणानि

ऑफकैनवास घटक

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

ऑफकैनवास
ऑफकैनवासस्य कृते सामग्री अत्र गच्छति। अत्र भवान् प्रायः किमपि 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>

लाइव डेमो

जावास्क्रिप्ट् मार्गेण एकं offcanvas एलिमेण्ट् दर्शयितुं गोपयितुं च अधोलिखितानां बटन्स् इत्यस्य उपयोगं कुर्वन्तु यत् .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 घटकानां कृते पूर्वनिर्धारितस्थापनं नास्ति, अतः भवन्तः अधः परिवर्तकवर्गेषु एकं योजयितुं शक्नुवन्ति;

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

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

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

पृष्ठभूमिः

यदा offcanvas <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>

सुलभता

यतः offcanvas फलकं अवधारणात्मकरूपेण एकः मोडल संवादः अस्ति, अतः अवश्यमेव योजयन्तु aria-labelledby="..."—offcanvas शीर्षकस्य सन्दर्भं दत्त्वा— .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सामग्रीं गोपयति
  • .offcanvas.showसामग्रीं दर्शयति
  • .offcanvas-startवामभागे offcanvas गोपयति
  • .offcanvas-endदक्षिणतः 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.

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

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

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-bs-योजयन्तु data-bs-backdrop=""।

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

विधियाँ

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

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

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

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

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

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

घटनाः

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

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