Popovers
बूटस्ट्रॅप पॉपओवर जोडण्यासाठी दस्तऐवजीकरण आणि उदाहरणे, जसे की iOS मध्ये आढळतात, तुमच्या साइटवरील कोणत्याही घटकामध्ये.
आढावा
पॉपओव्हर प्लगइन वापरताना जाणून घ्यायच्या गोष्टी:
- पोपॉवर पोजीशनिंगसाठी तृतीय पक्ष लायब्ररी पॉपरवर अवलंबून असतात . तुम्ही bootstrap.js आधी popper.min.js
bootstrap.bundle.min.js
समाविष्ट करणे आवश्यक आहे किंवा popovers कार्य करण्यासाठी /bootstrap.bundle.js
ज्यामध्ये Popper समाविष्ट आहे वापरा! - Popovers ला अवलंबित्व म्हणून टूलटिप प्लगइन आवश्यक आहे.
- जर तुम्ही आमची JavaScript स्त्रोतावरून तयार करत असाल, तर त्यासाठी आवश्यक आहे
util.js
. - Popovers कार्यप्रदर्शन कारणांसाठी निवडले जातात, त्यामुळे तुम्ही ते स्वतःच सुरू केले पाहिजेत .
- शून्य-लांबी
title
आणिcontent
मूल्ये कधीही पॉपओव्हर दर्शवणार नाहीत. container: 'body'
अधिक जटिल घटकांमध्ये (जसे आमचे इनपुट गट, बटण गट इ.) रेंडरिंग समस्या टाळण्यासाठी निर्दिष्ट करा .- लपविलेल्या घटकांवर पॉपओव्हर ट्रिगर करणे कार्य करणार नाही.
.disabled
रॅपर घटकावर किंवाdisabled
घटकांसाठी पॉपओव्हर्स ट्रिगर केले जाणे आवश्यक आहे.- एकाहून अधिक ओळींमध्ये गुंडाळलेल्या अँकरमधून ट्रिगर केल्यावर, पॉपओव्हर्स अँकरच्या एकूण रुंदीमध्ये केंद्रित केले जातील. हे वर्तन टाळण्यासाठी
.text-nowrap
तुमच्या s वर वापरा .<a>
- DOM मधून संबंधित घटक काढून टाकण्यापूर्वी पॉपओव्हर्स लपलेले असणे आवश्यक आहे.
- छाया DOM मधील घटकामुळे पॉपओव्हर्स ट्रिगर केले जाऊ शकतात.
prefers-reduced-motion
मीडिया क्वेरीवर अवलंबून असतो. आमच्या प्रवेशयोग्यता दस्तऐवजीकरणाचा कमी गती विभाग पहा
.
काही उदाहरणांसह popovers कसे कार्य करतात हे पाहण्यासाठी वाचन सुरू ठेवा.
उदाहरण: सर्वत्र popovers सक्षम करा
पृष्ठावरील सर्व पॉपओव्हर्स सुरू करण्याचा एक मार्ग म्हणजे त्यांना त्यांच्या data-toggle
गुणधर्मानुसार निवडणे:
$(function () {
$('[data-toggle="popover"]').popover()
})
उदाहरण: container
पर्याय वापरणे
जेव्हा तुमच्याकडे पॅरेंट एलिमेंटवर काही शैली असतात ज्या पॉपओव्हरमध्ये व्यत्यय आणतात, तेव्हा तुम्ही एक सानुकूल निर्दिष्ट करू इच्छित असाल container
जेणेकरून त्याऐवजी त्या घटकामध्ये पॉपओव्हरचा HTML दिसेल.
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
उदाहरण
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
चार दिशा
चार पर्याय उपलब्ध आहेत: वर, उजवीकडे, तळाशी आणि डावीकडे संरेखित.
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
Popover on left
</button>
पुढील क्लिकवर डिसमिस करा
focus
टॉगल घटकापेक्षा वेगळ्या घटकाच्या वापरकर्त्याच्या पुढील क्लिकवर पॉपओव्हर्स डिसमिस करण्यासाठी ट्रिगर वापरा .
डिसमिस-ऑन-नेक्स्ट-क्लिकसाठी विशिष्ट मार्कअप आवश्यक आहे
योग्य क्रॉस-ब्राउझर आणि क्रॉस-प्लॅटफॉर्म वर्तनासाठी, आपण टॅग वापरणे आवश्यक आहे, टॅग <a>
नाही आणि<button>
आपण एक tabindex
विशेषता देखील समाविष्ट करणे आवश्यक आहे.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
$('.popover-dismiss').popover({
trigger: 'focus'
})
अक्षम घटक
विशेषता असलेले घटक disabled
परस्परसंवादी नसतात, म्हणजे वापरकर्ते पॉपओव्हर (किंवा टूलटिप) ट्रिगर करण्यासाठी त्यांना फिरवू किंवा क्लिक करू शकत नाहीत. वर्कअराउंड म्हणून, तुम्हाला रॅपरवरून पॉपओव्हर ट्रिगर करायचे आहे <div>
किंवा अक्षम केलेल्या घटकावर <span>
अधिलिखित करायचे आहे.pointer-events
अक्षम केलेल्या पॉपओव्हर ट्रिगरसाठी, तुम्ही प्राधान्य देऊ शकता data-trigger="hover"
जेणेकरून पॉपओव्हर तुमच्या वापरकर्त्यांना तत्काळ व्हिज्युअल फीडबॅक म्हणून दिसेल कारण ते कदाचित अक्षम केलेल्या घटकावर क्लिक करण्याची अपेक्षा करत नाहीत.
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
वापर
JavaScript द्वारे popovers सक्षम करा:
$('#example').popover(options)
GPU प्रवेग
GPU प्रवेग आणि सुधारित प्रणाली DPI मुळे Windows 10 डिव्हाइसेसवर पॉपओव्हर्स कधीकधी अस्पष्ट दिसतात. v4 मध्ये यासाठी उपाय म्हणजे तुमच्या popovers वर आवश्यकतेनुसार GPU प्रवेग अक्षम करणे.
सुचवलेले निराकरण:
Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))
कीबोर्ड आणि सहाय्यक तंत्रज्ञान वापरकर्त्यांसाठी पॉपओवर कार्य करणे
कीबोर्ड वापरकर्त्यांना तुमचे पॉपओव्हर्स सक्रिय करण्याची परवानगी देण्यासाठी, तुम्ही त्यांना केवळ HTML घटकांमध्ये जोडले पाहिजे जे परंपरेने कीबोर्ड-फोकस करण्यायोग्य आणि परस्परसंवादी (जसे की लिंक्स किंवा फॉर्म कंट्रोल्स) आहेत. जरी अनियंत्रित HTML घटक (जसे की <span>
s) विशेषता जोडून फोकस करण्यायोग्य बनवले जाऊ शकतात tabindex="0"
, हे कीबोर्ड वापरकर्त्यांसाठी गैर-परस्परसंवादी घटकांवर संभाव्य त्रासदायक आणि गोंधळात टाकणारे टॅब स्टॉप जोडेल आणि बहुतेक सहाय्यक तंत्रज्ञान सध्या या परिस्थितीत पॉपओव्हर सामग्रीची घोषणा करत नाहीत. . hover
याव्यतिरिक्त, तुमच्या पॉपओव्हर्ससाठी ट्रिगर म्हणून पूर्णपणे विसंबून राहू नका , कारण यामुळे कीबोर्ड वापरकर्त्यांसाठी ट्रिगर करणे अशक्य होईल.
तुम्ही पर्यायासह पॉपओव्हरमध्ये समृद्ध, संरचित HTML समाविष्ट करू शकता html
, तरीही आम्ही जोरदार शिफारस करतो की तुम्ही जास्त प्रमाणात सामग्री जोडणे टाळा. aria-describedby
पॉपओव्हर्सची सध्या कार्य करण्याची पद्धत अशी आहे की, एकदा प्रदर्शित झाल्यानंतर, त्यांची सामग्री विशेषतासह ट्रिगर घटकाशी जोडली जाते. परिणामी, पॉपओव्हरची संपूर्ण सामग्री सहाय्यक तंत्रज्ञान वापरकर्त्यांना एक दीर्घ, अखंड प्रवाह म्हणून घोषित केली जाईल.
याव्यतिरिक्त, तुमच्या पॉपओव्हरमध्ये परस्पर नियंत्रणे (जसे की फॉर्म घटक किंवा लिंक्स) समाविष्ट करणे शक्य असताना (हे घटक whiteList
किंवा अनुमत विशेषता आणि टॅगमध्ये जोडून), हे लक्षात ठेवा की सध्या पॉपओव्हर कीबोर्ड फोकस ऑर्डर व्यवस्थापित करत नाही. जेव्हा कीबोर्ड वापरकर्ता पॉपओव्हर उघडतो तेव्हा ट्रिगरिंग घटकावर लक्ष केंद्रित केले जाते आणि पॉपओव्हर सहसा दस्तऐवजाच्या संरचनेतील ट्रिगरचे लगेच अनुसरण करत नाही, पुढे जाणे/दाबणे याची कोणतीही हमी नाही.TABकीबोर्ड वापरकर्त्याला पॉपओव्हरमध्येच हलवेल. थोडक्यात, पॉपओव्हरमध्ये फक्त परस्परसंवादी नियंत्रणे जोडल्याने ही नियंत्रणे कीबोर्ड वापरकर्त्यांसाठी आणि सहाय्यक तंत्रज्ञानाच्या वापरकर्त्यांसाठी अगम्य/निरुपयोगी बनू शकतात किंवा कमीतकमी एक अतार्किक संपूर्ण फोकस ऑर्डर बनवण्याची शक्यता आहे. या प्रकरणांमध्ये, त्याऐवजी मोडल संवाद वापरण्याचा विचार करा.
पर्याय
डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-
प्रमाणे जोडा data-animation=""
.
sanitize
,
sanitizeFn
आणि
whiteList
पर्याय पुरवले जाऊ शकत नाहीत.
नाव | प्रकार | डीफॉल्ट | वर्णन |
---|---|---|---|
अॅनिमेशन | बुलियन | खरे | पॉपओव्हरवर CSS फेड संक्रमण लागू करा |
कंटेनर | स्ट्रिंग | घटक | खोटे | खोटे | एका विशिष्ट घटकाला पॉपओव्हर जोडते. उदाहरण: |
सामग्री | स्ट्रिंग | घटक | कार्य | '' |
एखादे फंक्शन दिले असल्यास, ते |
विलंब | संख्या | वस्तू | 0 | पॉपओव्हर (ms) दर्शविण्यास आणि लपविण्यास विलंब - मॅन्युअल ट्रिगर प्रकारावर लागू होत नाही जर नंबर दिला गेला असेल तर, लपवा/शो दोन्हीसाठी विलंब लागू केला जातो ऑब्जेक्ट रचना आहे: |
html | बुलियन | खोटे | पॉपओव्हरमध्ये HTML घाला. असत्य असल्यास, text DOM मध्ये सामग्री घालण्यासाठी jQuery ची पद्धत वापरली जाईल. तुम्हाला XSS हल्ल्यांबद्दल काळजी वाटत असल्यास मजकूर वापरा. |
प्लेसमेंट | स्ट्रिंग | कार्य | 'बरोबर' | पॉपओव्हर कसे ठेवावे - ऑटो | शीर्ष | तळाशी | डावीकडे | बरोबर जेव्हा एखादे फंक्शन प्लेसमेंट निर्धारित करण्यासाठी वापरले जाते, तेव्हा ते पॉपओव्हर DOM नोडला त्याचा पहिला युक्तिवाद म्हणून आणि ट्रिगरिंग घटक DOM नोडला दुसरा म्हणून म्हणतात. |
निवडकर्ता | स्ट्रिंग | खोटे | खोटे | निवडक प्रदान केले असल्यास, पॉपओव्हर ऑब्जेक्ट्स निर्दिष्ट लक्ष्यांना सुपूर्द केले जातील. प्रॅक्टिसमध्ये, हे डायनॅमिक HTML सामग्री पॉपओवर जोडण्यासाठी सक्षम करण्यासाठी वापरले जाते. हे आणि एक माहितीपूर्ण उदाहरण पहा . |
टेम्पलेट | स्ट्रिंग | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
पॉपओव्हर तयार करताना वापरण्यासाठी बेस HTML. पॉपओव्हर पॉपओव्हर
सर्वात बाहेरील आवरण घटकामध्ये |
शीर्षक | स्ट्रिंग | घटक | कार्य | '' |
एखादे फंक्शन दिले असल्यास, ते |
ट्रिगर | स्ट्रिंग | 'क्लिक करा' | पॉपओव्हर कसे ट्रिगर केले जाते - क्लिक करा | फिरवा | फोकस | मॅन्युअल तुम्ही एकाधिक ट्रिगर्स पास करू शकता; त्यांना एका जागेसह वेगळे करा. manual इतर कोणत्याही ट्रिगरसह एकत्र केले जाऊ शकत नाही. |
ऑफसेट | संख्या | स्ट्रिंग | 0 | त्याच्या लक्ष्याच्या सापेक्ष पॉपओव्हरचा ऑफसेट. अधिक माहितीसाठी पॉपर्स ऑफसेट डॉक्स पहा . |
फॉलबॅक प्लेसमेंट | स्ट्रिंग | रचना | 'फ्लिप' | फॉलबॅकवर पॉपर कोणते स्थान वापरेल हे निर्दिष्ट करण्यास अनुमती द्या. अधिक माहितीसाठी पॉपरचे वर्तन डॉक्स पहा |
कस्टम क्लास | स्ट्रिंग | कार्य | '' | पॉपओव्हर दाखवल्यावर वर्ग जोडा. लक्षात ठेवा की हे वर्ग टेम्प्लेटमध्ये नमूद केलेल्या कोणत्याही वर्गांव्यतिरिक्त जोडले जातील. एकाधिक वर्ग जोडण्यासाठी, त्यांना रिक्त स्थानांसह विभक्त करा: तुम्ही एक फंक्शन देखील पास करू शकता ज्याने अतिरिक्त वर्ग नावे असलेली एकल स्ट्रिंग परत केली पाहिजे. |
सीमा | स्ट्रिंग | घटक | 'स्क्रोल पालक' | पॉपओव्हरची ओव्हरफ्लो मर्यादा सीमा. 'viewport' , 'window' , 'scrollParent' , किंवा HTMLElement संदर्भ (केवळ JavaScript) ची मूल्ये स्वीकारते . अधिक माहितीसाठी Popper's preventOverflow डॉक्स पहा . |
निर्जंतुकीकरण | बुलियन | खरे | स्वच्छता सक्षम किंवा अक्षम करा. सक्रिय केल्यास 'template' , 'content' आणि 'title' पर्याय निर्जंतुक केले जातील. आमच्या JavaScript दस्तऐवजीकरणातील सॅनिटायझर विभाग पहा . |
श्वेतसूची | वस्तू | डीफॉल्ट मूल्य | ऑब्जेक्ट ज्यामध्ये अनुमत विशेषता आणि टॅग आहेत |
sanitizeFn | शून्य | कार्य | निरर्थक | येथे तुम्ही तुमचे स्वतःचे सॅनिटाइज फंक्शन देऊ शकता. तुम्ही सॅनिटायझेशन करण्यासाठी समर्पित लायब्ररी वापरण्यास प्राधान्य दिल्यास हे उपयुक्त ठरू शकते. |
popperConfig | शून्य | वस्तू | निरर्थक | बूटस्ट्रॅपचे डीफॉल्ट पॉपर कॉन्फिगरेशन बदलण्यासाठी, पॉपरचे कॉन्फिगरेशन पहा |
वैयक्तिक पॉपओव्हर्ससाठी डेटा विशेषता
वर सांगितल्याप्रमाणे वैयक्तिक पॉपओव्हरसाठी पर्याय डेटा विशेषतांच्या वापराद्वारे निर्दिष्ट केले जाऊ शकतात.
पद्धती
असिंक्रोनस पद्धती आणि संक्रमणे
सर्व API पद्धती असिंक्रोनस आहेत आणि एक संक्रमण सुरू करतात . संक्रमण सुरू होताच परंतु ते संपण्यापूर्वी ते कॉलरकडे परत जातात . याव्यतिरिक्त, संक्रमण घटकावरील पद्धत कॉलकडे दुर्लक्ष केले जाईल .
$().popover(options)
घटक संकलनासाठी पॉपओव्हर्स आरंभ करते.
.popover('show')
घटकाचे पॉपओव्हर प्रकट करते. पॉपओव्हर प्रत्यक्षात दाखवण्यापूर्वी कॉलरकडे परत येतो (म्हणजे shown.bs.popover
इव्हेंट होण्यापूर्वी). हे पॉपओव्हरचे "मॅन्युअल" ट्रिगरिंग मानले जाते. Popovers ज्यांचे शीर्षक आणि सामग्री दोन्ही शून्य-लांबीचे आहेत ते कधीही प्रदर्शित केले जात नाहीत.
$('#element').popover('show')
.popover('hide')
घटकाचे पॉपओव्हर लपवते. पॉपओव्हर प्रत्यक्षात लपविण्याआधी कॉलरकडे परत येतो (म्हणजे hidden.bs.popover
इव्हेंट होण्यापूर्वी). हे पॉपओव्हरचे "मॅन्युअल" ट्रिगरिंग मानले जाते.
$('#element').popover('hide')
.popover('toggle')
घटकाचे पॉपओव्हर टॉगल करते. पॉपओव्हर प्रत्यक्षात दर्शविले किंवा लपवले जाण्यापूर्वी कॉलरकडे परत येते (म्हणजे shown.bs.popover
किंवा hidden.bs.popover
घटना घडण्यापूर्वी). हे पॉपओव्हरचे "मॅन्युअल" ट्रिगरिंग मानले जाते.
$('#element').popover('toggle')
.popover('dispose')
घटकाचे पॉपओव्हर लपवते आणि नष्ट करते. डेलिगेशन वापरणारे पॉपओवर (जे पर्याय वापरून तयार केले जातात ) selector
वंशज ट्रिगर घटकांवर वैयक्तिकरित्या नष्ट केले जाऊ शकत नाहीत.
$('#element').popover('dispose')
.popover('enable')
घटकाच्या पॉपओव्हरला दाखवण्याची क्षमता देते. Popovers डीफॉल्टनुसार सक्षम आहेत.
$('#element').popover('enable')
.popover('disable')
घटकाच्या पॉपओव्हरची क्षमता काढून टाकते. पॉपओव्हर पुन्हा-सक्षम केले तरच दाखवता येईल.
$('#element').popover('disable')
.popover('toggleEnabled')
घटकाचे पॉपओव्हर दर्शविले किंवा लपविण्याची क्षमता टॉगल करते.
$('#element').popover('toggleEnabled')
.popover('update')
घटकाच्या पॉपओव्हरची स्थिती अपडेट करते.
$('#element').popover('update')
कार्यक्रम
कार्यक्रमाचा प्रकार | वर्णन |
---|---|
show.bs.popover | show जेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो . |
दाखवले.bs.popover | जेव्हा वापरकर्त्यासाठी पॉपओव्हर दृश्यमान केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). |
hide.bs.popover | hide जेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो . |
hidden.bs.popover | जेव्हा पॉपओव्हर वापरकर्त्यापासून लपविले जाणे पूर्ण होते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). |
inserted.bs.popover | show.bs.popover जेव्हा पॉपओव्हर टेम्पलेट DOM मध्ये जोडले गेले तेव्हा हा कार्यक्रम इव्हेंटनंतर काढला जातो . |
$('#myPopover').on('hidden.bs.popover', function () {
// do something...
})