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

ऑफकॅनव्हास

काही वर्ग आणि आमच्या JavaScript प्लगइनसह नेव्हिगेशन, शॉपिंग कार्ट आणि अधिकसाठी तुमच्या प्रोजेक्टमध्ये लपलेले साइडबार तयार करा.

हे कसे कार्य करते

ऑफकॅनव्हास हा एक साइडबार घटक आहे जो व्ह्यूपोर्टच्या डावीकडे, उजवीकडे किंवा तळाशी दिसण्यासाठी JavaScript द्वारे टॉगल केला जाऊ शकतो. बटणे किंवा अँकर ट्रिगर म्हणून वापरले जातात जे तुम्ही टॉगल करता त्या विशिष्ट घटकांशी संलग्न केले जातात आणि dataआमच्या JavaScript ला आवाहन करण्यासाठी विशेषता वापरली जातात.

  • ऑफकॅनव्हास काही समान JavaScript कोड मॉडेल्स प्रमाणे शेअर करते. वैचारिकदृष्ट्या, ते बरेच समान आहेत, परंतु ते स्वतंत्र प्लगइन आहेत.
  • त्याचप्रमाणे, ऑफकॅनव्हासच्या शैली आणि परिमाणांसाठी काही स्त्रोत 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>

थेट डेमो

JavaScript द्वारे ऑफकॅनव्हास घटक दर्शवण्यासाठी आणि लपवण्यासाठी खालील बटणे वापरा जे वर्गासह घटकावर वर्ग टॉगल .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">Backdrop 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"कारण आम्ही ते आधीपासून JavaScript द्वारे जोडले आहे.

सस

चल

$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-bottomऑफकॅनव्हास तळाशी लपवते

विशेषतासह डिसमिस बटण जोडा data-bs-dismiss="offcanvas", जे JavaScript कार्यक्षमतेला ट्रिगर करते. <button>सर्व डिव्हाइसेसवर योग्य वर्तनासाठी त्याच्यासह घटक वापरण्याची खात्री करा .

डेटा विशेषतांद्वारे

टॉगल करा

एका ऑफकॅनव्हास घटकाचे नियंत्रण आपोआप नियुक्त करण्‍यासाठी घटक जोडा data-bs-toggle="offcanvas"आणि a data-bs-targetकिंवा त्यात जोडा. hrefऑफकॅनव्हास data-bs-targetलागू करण्यासाठी विशेषता CSS निवडक स्वीकारते. 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>

JavaScript द्वारे

यासह व्यक्तिचलितपणे सक्षम करा:

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

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-bs-प्रमाणे जोडा data-bs-backdrop="".

नाव प्रकार डीफॉल्ट वर्णन
backdrop बुलियन true ऑफकॅनव्हास उघडे असताना शरीरावर बॅकड्रॉप लावा
keyboard बुलियन true एस्केप की दाबल्यावर ऑफकॅनव्हास बंद करते
scroll बुलियन false ऑफकॅनव्हास उघडे असताना बॉडी स्क्रोलिंगला अनुमती द्या

पद्धती

असिंक्रोनस पद्धती आणि संक्रमणे

सर्व API पद्धती असिंक्रोनस आहेत आणि एक संक्रमण सुरू करतात . संक्रमण सुरू होताच परंतु ते संपण्यापूर्वी ते कॉलरकडे परत जातात . याव्यतिरिक्त, संक्रमण घटकावरील पद्धत कॉलकडे दुर्लक्ष केले जाईल .

अधिक माहितीसाठी आमचे JavaScript दस्तऐवजीकरण पहा .

तुमची सामग्री ऑफकॅनव्हास घटक म्हणून सक्रिय करते. पर्यायी पर्याय स्वीकारतो 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 स्टॅटिक पद्धत जी तुम्हाला डीओएम घटकाशी संबंधित ऑफकॅनव्हास उदाहरण मिळवू देते किंवा ते सुरू न झाल्यास नवीन तयार करू देते

कार्यक्रम

बूटस्ट्रॅपचा ऑफकॅनव्हास क्लास ऑफकॅनव्हास कार्यक्षमतेसाठी काही इव्हेंट्स उघड करतो.

कार्यक्रमाचा प्रकार वर्णन
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...
})