in English

ऑफकॅनव्हास

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

या पृष्ठावर

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

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

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

सावधान! CSS अॅनिमेशन कसे हाताळते ते दिले, तुम्ही घटक वापरू शकत नाही marginकिंवा वापरू शकत नाही. त्याऐवजी, स्वतंत्र रॅपिंग घटक म्हणून वर्ग वापरा.translate.offcanvas

या घटकाचा अॅनिमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरीवर अवलंबून असतो. आमच्या प्रवेशयोग्यता दस्तऐवजीकरणाचा कमी गती विभाग पहा .

उदाहरणे

ऑफकॅनव्हास घटक

.showखाली एक ऑफकॅनव्हास उदाहरण आहे जे डीफॉल्टनुसार ( वर द्वारे .offcanvas) दर्शविले जाते. ऑफकॅनव्हासमध्ये क्लोज बटणासह शीर्षलेखासाठी समर्थन आणि काही प्रारंभिकांसाठी पर्यायी बॉडी क्लास समाविष्ट आहे padding. आम्ही सुचवितो की तुम्ही ऑफकॅनव्हास हेडर शक्य असेल तेव्हा डिसमिस क्रियांसह समाविष्ट करा किंवा स्पष्टपणे डिसमिस क्रिया प्रदान करा.

ऑफकॅनव्हाससाठी सामग्री येथे आहे. तुम्ही येथे जवळपास कोणताही बूटस्ट्रॅप घटक किंवा सानुकूल घटक ठेवू शकता.

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>

थेट डेमो

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

शरीर स्क्रोलिंग

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

स्थिर पार्श्वभूमी

पार्श्वभूमी स्थिर वर सेट केल्यावर, ऑफकॅनव्हास त्याच्या बाहेर क्लिक केल्यावर बंद होणार नाही.

तुम्ही माझ्या बाहेर क्लिक केल्यास मी बंद होणार नाही.

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 मध्ये जोडले

ऑफकॅनव्हॅसेसचे स्वरूप युटिलिटीसह बदला जेणेकरून ते गडद नॅव्हबार सारख्या भिन्न संदर्भांशी चांगले जुळतील. गडद ऑफकॅनव्हाससह योग्य शैलीसाठी आम्ही येथे आणि .text-bg-darkटू जोडतो. तुमच्या आत ड्रॉपडाउन्स असल्यास, मध्ये देखील जोडण्याचा विचार करा ..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

ऑफकॅनव्हास सामग्री येथे ठेवा.

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-lgखाली ऑफकॅनव्हासमध्ये सामग्री लपवते lg, परंतु ब्रेकपॉइंटच्या वरची सामग्री दर्शवते lg.

प्रतिसाद देणारा ऑफकॅनव्हास टॉगल दर्शविण्यासाठी तुमच्या ब्राउझरचा आकार बदला.

ही सामग्री आहे .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-startव्ह्यूपोर्टच्या डावीकडे ऑफकॅनव्हास ठेवते (वर दाखवले आहे)
.offcanvas-endव्ह्यूपोर्टच्या उजवीकडे ऑफकॅनव्हास ठेवते
.offcanvas-topव्ह्यूपोर्टच्या शीर्षस्थानी ऑफकॅनव्हास ठेवते
.offcanvas-bottomव्ह्यूपोर्टच्या तळाशी ऑफकॅनव्हास ठेवते

खाली वरची, उजवीकडे आणि खालची उदाहरणे वापरून पहा.

...

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>

प्रवेशयोग्यता

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

CSS

चल

v5.2.0 मध्ये जोडले

.offcanvasबूटस्ट्रॅपच्या विकसित होत असलेल्या CSS व्हेरिएबल्सच्या दृष्टिकोनाचा एक भाग म्हणून, ऑफकॅनव्हास आता वर्धित रिअल-टाइम कस्टमायझेशनसाठी स्थानिक 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};

Sass चल

$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लागू करण्यासाठी विशेषता 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>

ऑफकॅनव्हास डिसमिस करण्याचे दोन्ही मार्ग समर्थित असले तरी, लक्षात ठेवा की ऑफकॅनव्हास बाहेरून डिसमिस करणे ARIA ऑथरिंग प्रॅक्टिसेस गाइड डायलॉग (मॉडल) पॅटर्नशी जुळत नाही . हे तुमच्या स्वतःच्या जोखमीवर करा.

JavaScript द्वारे

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

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

पर्याय

data-bs-पर्याय डेटा विशेषता किंवा JavaScript द्वारे पास केले जाऊ शकतात म्हणून, तुम्ही मध्ये पर्याय नाव जोडू शकता data-bs-animation="{value}". डेटा विशेषतांद्वारे पर्याय पास करताना पर्याय नावाचा केस प्रकार “ camelCase ” वरून “ kebab-case ” मध्ये बदलण्याची खात्री करा. उदाहरणार्थ, 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`	ऑफकॅनव्हास उघडे असताना बॉडी स्क्रोलिंगला अनुमती द्या.

पद्धती

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

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

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

तुमची सामग्री ऑफकॅनव्हास घटक म्हणून सक्रिय करते. पर्यायी पर्याय स्वीकारतो object.

तुम्ही कन्स्ट्रक्टरसह ऑफकॅनव्हास उदाहरण तयार करू शकता, उदाहरणार्थ:

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

पद्धत	वर्णन
`getInstance`	स्टॅटिक पद्धत जी तुम्हाला DOM घटकाशी संबंधित ऑफकॅनव्हास उदाहरण मिळवू देते.
`getOrCreateInstance`	स्टॅटिक पद्धत जी तुम्हाला डीओएम घटकाशी संबंधित ऑफकॅनव्हास इन्स्टन्स मिळवू देते किंवा ते सुरू न झाल्यास नवीन तयार करू देते.
`hide`	ऑफकॅनव्हास घटक लपवतो. ऑफकॅनव्हास घटक प्रत्यक्षात लपविण्यापूर्वी कॉलरकडे परत येतो (म्हणजे `hidden.bs.offcanvas`इव्हेंट होण्यापूर्वी).
`show`	ऑफकॅनव्हास घटक दाखवते. ऑफकॅनव्हास घटक प्रत्यक्षात दाखवण्यापूर्वी कॉलरकडे परत येतो (म्हणजे `shown.bs.offcanvas`इव्हेंट होण्यापूर्वी).
`toggle`	ऑफकॅनव्हास घटक दर्शविण्यासाठी किंवा लपवण्यासाठी टॉगल करते. ऑफकॅनव्हास घटक प्रत्यक्षात दर्शविले किंवा लपवले जाण्यापूर्वी (म्हणजे `shown.bs.offcanvas`किंवा `hidden.bs.offcanvas`घटना घडण्यापूर्वी) कॉलरकडे परत येते.

कार्यक्रम

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

कार्यक्रमाचा प्रकार	वर्णन
`hide.bs.offcanvas`	`hide`पद्धत कॉल केल्यावर हा कार्यक्रम ताबडतोब उडाला आहे.
`hidden.bs.offcanvas`	जेव्हा ऑफकॅनव्हास घटक वापरकर्त्यापासून लपविला जातो तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
`hidePrevented.bs.offcanvas`	जेव्हा ऑफकॅनव्हास दाखवला जातो, त्याची पार्श्वभूमी असते `static`आणि ऑफकॅनव्हासच्या बाहेर क्लिक केले जाते तेव्हा हा इव्हेंट फायर केला जातो. जेव्हा एस्केप की दाबली जाते आणि `keyboard`पर्याय सेट केला जातो तेव्हा इव्हेंट देखील फायर केला जातो `false`.
`show.bs.offcanvas`	`show`जेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो .
`shown.bs.offcanvas`	जेव्हा ऑफकॅनव्हास घटक वापरकर्त्यासाठी दृश्यमान केला जातो तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).

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

ऑफकॅनव्हास

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

उदाहरणे

ऑफकॅनव्हास घटक

ऑफकॅनव्हास

थेट डेमो

ऑफकॅनव्हास

शरीर स्क्रोलिंग

बॉडी स्क्रोलिंगसह ऑफकॅनव्हास

शरीर स्क्रोलिंग आणि पार्श्वभूमी

स्क्रोलिंगसह पार्श्वभूमी

स्थिर पार्श्वभूमी

ऑफकॅनव्हास

गडद ऑफ कॅनव्हास

ऑफकॅनव्हास

प्रतिसाद देणारा

प्रतिसाद देणारा ऑफकॅनव्हास

प्लेसमेंट

ऑफकॅनव्हास टॉप

ऑफकॅनव्हास बरोबर

ऑफकॅनव्हास तळाशी

प्रवेशयोग्यता

CSS

चल

Sass चल

वापर

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

टॉगल करा

काढून टाकणे

JavaScript द्वारे

पर्याय

पद्धती

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

कार्यक्रम