ऑफकॅनव्हास
काही वर्ग आणि आमच्या 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"
आवश्यक आहे.
ऑफकॅनव्हास
<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 पद्धती असिंक्रोनस आहेत आणि एक संक्रमण सुरू करतात . संक्रमण सुरू होताच परंतु ते संपण्यापूर्वी ते कॉलरकडे परत जातात . याव्यतिरिक्त, संक्रमण घटकावरील पद्धत कॉलकडे दुर्लक्ष केले जाईल .
तुमची सामग्री ऑफकॅनव्हास घटक म्हणून सक्रिय करते. पर्यायी पर्याय स्वीकारतो 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...
})