पोपोव्हर्स हें नांव
तुमच्या साइटचेर खंयच्याय घटकाक iOS त मेळपी सारके Bootstrap popovers जोडपा खातीर दस्तावेजीकरण आनी उदाहरणां.
पॉपओवर प्लगइन वापरतना कळपाच्यो गजाली:
- Popovers स्थिती खातीर 3 व्या पक्षाच्या लायब्ररी Popper.js चेर आदारीत आसात . तुमी bootstrap.js पयलीं popper.min.js समाविष्ट करपाक जाय वा popovers काम करपाक
bootstrap.bundle.min.js
/ वापरपाक जाय जातूंत Popper.jsbootstrap.bundle.js
आसा! - Popovers एक अवलंबन म्हणून टूलटिप प्लगइनाची गरज आसा.
- तुमी आमची जावास्क्रिप्ट स्त्रोतांतल्यान तयार करतात जाल्यार, ताका जाय
util.js
. - Popovers कार्यक्षमताय कारणांक लागून ऑप्ट-इन आसात, देखून तुमी स्वता तांकां आरंभ करपाक जाय .
- शून्य-लांबाय
title
आनीcontent
मोलां केन्नाच पोपोव्हर दाखोवचीं नात. container: 'body'
चड गुंतागुंतीच्या घटकांत (जशे आमचे इनपुट गट, बटण गट, आदी) रेंडरिंग समस्या टाळपाक निर्देशीत करात .- लिपिल्ल्या घटकांचेर पोपोव्हर ट्रिगर करप काम करचें ना.
.disabled
वा घटकांखातीर पोपोव्हरdisabled
रॅपर घटकाचेर ट्रिगर करपाक जाय.- एका परस चड ओळीं वयल्यान गुठलायल्ल्या नांगरांतल्यान ट्रिगर करतना, पोपोव्हर नांगरांच्या एकंदर रुंदाये मदीं केंद्रीत आसतले. ही वागणूक टाळपाक
white-space: nowrap;
तुमच्या s चेर वापरात .<a>
- डीओएमांतल्यान तांचे संबंदीत घटक काडून उडोवचे पयलीं पोपोव्हर लिपोवंक जाय.
कांय उदाहरणां सयत पोपोव्हर कशे काम करतात तें पळोवपाक वाचत रावचें.
पानाचेर सगळे पॉपओव्हर आरंभ करपाचो एक मार्ग म्हणल्यार तांच्या data-toggle
गुणधर्मा प्रमाणें निवडप:
जेन्ना तुमचे कडेन पालक घटकाचेर कांय शैली आसतात जीं पॉपओवरांत हस्तक्षेप करतात, तेन्ना तुमकां सानुकूल निर्देशीत करपाची इत्सा जातली container
जेणे करून ताचे बदला पोपोव्हराचो HTML त्या घटका भितर दिसतलो.
<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>
चार पर्याय उपलब्ध आसात: वयर, उजवें, सकयल, आनी डावें संरेखित.
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>
गुणधर्म आशिल्ले घटक 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>
जावास्क्रिप्ट वरवीं पॉपओव्हर सक्षम करात:
पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-
, जशें data-animation=""
.
नांव | प्रकार | डिफॉल्ट | वर्णन |
---|---|---|---|
एनिमेशन करप | बूलियन हें नांव | खरें | पॉपओवराक CSS फेड संक्रमण लागू करात |
आयदनांत घालतात | तार | तत्व | फट | फट | एका विशिश्ट घटकाक पोपोव्हर जोडटा. देखीक: |
सामुग्री | तार | तत्व | कार्य | '' हें . |
फंक्शन दिल्लें आसल्यार, तें |
कळाव | संख्या | ऑब्जॅक्ट | ० आनी ० | पॉपओवर दाखोवपाक आनी लिपोवपाक कळाव (ms) - हाताळणी ट्रिगर प्रकाराक लागू जायना क्रमांक पुरवण केल्यार, लिपोवप/दाखोवप ह्या दोनूय गजालींक विलंब लागू जाता वस्तूची रचणूक अशी आसा: १. |
एचटीएमएल हें नांव | बूलियन हें नांव | फट | पॉपओवरांत एचटीएमएल घालात. 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` हेर खंयच्याय ट्रिगराक जोडूंक मेळना. |
ऑफसेट करप | संख्या | माळ | ० आनी ० | ताच्या लक्ष्याच्या सापेक्ष पोपोव्हराचें ऑफसेट. चड म्हायती खातीर Popper.js च्या ऑफसेट डॉक्स पळयात . |
fallbackप्लेसमेंट करप | तार | सरणी | 'टिचकी' | फॉलबॅकाचेर पॉपर खंयची स्थिती वापरतलो तें स्पश्ट करपाक परवानगी दिवची. चड म्हायती खातीर Popper.js च्या वर्तन दस्तावेज पळयात |
शिमेचेर आसता | तार | घटक | 'स्क्रॉलपॅरेंट'. | पोपोवराची ओव्हरफ्लो बंधन मर्यादा. 'viewport' , 'window' , 'scrollParent' , वा HTMLElement संदर्भ (फकत जावास्क्रिप्ट) ची मोलां स्वीकारता . चड म्हायती खातीर Popper.js च्या preventOverflow docs पळयात . |
वैयक्तीक पोपोव्हरां खातीर डेटा गुणधर्म
वैयक्तीक पॉपओव्हरां खातीर पर्याय पर्यायीपणान डेटा गुणधर्मांच्या वापरा वरवीं निर्देशीत करूंक शकतात, जशें वयर स्पश्ट केलां.
अतुल्यकालिक पद्दती आनी संक्रमण
सगळ्यो एपीआय पद्दती अतुल्यकालिक आसतात आनी संक्रमण सुरू करतात . संक्रमण सुरू जातकच पूण सोंपचे पयलीं ते फोन करप्या कडेन परततात . ते भायर, संक्रमण घटकाचेर एक पद्दत कॉल दुर्लक्षीत जातलें .
घटक संग्रहाखातीर पोपोव्हर्स आरंभ करता.
एका घटकाचो पोपोव्हर उक्तो करता. पॉपओवर प्रत्यक्षांत दाखोवचे पयलीं (म्हळ्यार shown.bs.popover
घडणूक घडचे पयलीं) कॉलराक परतता. हाका पोपोव्हराचें “हस्तिका” ट्रिगरिंग मानतात. ज्या पोपोव्हरांचें शीर्षक आनी आशय दोनूय शून्य लांबायेचे आसतात, ते केन्नाच दाखोवंक नात.
एका घटकाचो पोपोव्हर लिपयता. पॉपओव्हर प्रत्यक्षांत लिपोवचे पयलीं (म्हळ्यार hidden.bs.popover
घडणूक घडचे पयलीं) कॉलराक परतता. हाका पोपोव्हराचें “हस्तिका” ट्रिगरिंग मानतात.
एका घटकाचो पॉपओवर टॉगल करता. पॉपओवर प्रत्यक्षांत दाखोवचे पयलीं वा लिपोवचे पयलीं (म्हळ्यार shown.bs.popover
वा hidden.bs.popover
घडणूक घडचे पयलीं) कॉलराक परतता. हाका पोपोव्हराचें “हस्तिका” ट्रिगरिंग मानतात.
एका घटकाचो पोपोव्हर लिपयता आनी नश्ट करता. प्रतिनिधीत्व वापरपी पोपोव्हर (जे पर्याय वापरून तयार केल्लेselector
आसात ) वंशज ट्रिगर घटकांचेर वैयक्तीकपणान नश्ट करूंक शकना.
एका घटकाच्या पोपोव्हराक दाखोवपाची तांक दिता. Popovers पूर्वनिर्धारीतपणान सक्षम केल्ले आसात.
एका घटकाचो पोपोव्हर दाखोवपाची तांक काडून उडयता. पोपोव्हर फकत परतून सक्षम केल्यारूच दाखोवंक मेळटलो.
घटकाचो पॉपओवर दाखोवपाची वा लिपोवपाची क्षमता टॉगल करता.
घटकाच्या पॉपओवराची सुवात अद्ययावत करता.
इव्हेंट प्रकार | वर्णन |
---|---|
शो.बीएस.पोपओव्हर | show दृष्टांत पद्दत कॉल करतना ही घडणूक रोखडीच फायर जाता . |
दाखयलें.bs.popover | वापरप्याक पॉपओव्हर दिसपाक लायल्यार ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले). |
hide.bs.popover हें नांव | hide दृष्टांत पद्दत कॉल केल्या उपरांत ही घडणूक रोखडीच फायर जाता . |
लिपलां.बीएस.गरीबी | वापरप्या कडल्यान पोपोव्हर लिपोवप सोंपतकच ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले). |
घालून.bs.popover | show.bs.popover जेन्ना पॉपओव्हर साचा DOM कडेन जोडला तेन्ना घडणुके उपरांत ही इव्हेंट फायर करतात. |