Popovers

आढावा

पॉपओव्हर प्लगइन वापरताना जाणून घ्यायच्या गोष्टी:

• पोपॉवर पोजीशनिंगसाठी तृतीय पक्ष लायब्ररी पॉपरवर अवलंबून असतात . तुम्ही bootstrap.js आधी popper.min.jsbootstrap.bundle.min.js समाविष्ट करणे आवश्यक आहे किंवा popovers कार्य करण्यासाठी / bootstrap.bundle.jsज्यामध्ये Popper समाविष्ट आहे वापरा!
• Popovers ला अवलंबित्व म्हणून टूलटिप प्लगइन आवश्यक आहे.
• Popovers कार्यप्रदर्शन कारणांसाठी निवडले जातात, त्यामुळे तुम्ही ते स्वतःच सुरू केले पाहिजेत .
• शून्य-लांबी titleआणि contentमूल्ये कधीही पॉपओव्हर दर्शवणार नाहीत.
• container: 'body'अधिक जटिल घटकांमध्ये (जसे आमचे इनपुट गट, बटण गट इ.) रेंडरिंग समस्या टाळण्यासाठी निर्दिष्ट करा .
• लपविलेल्या घटकांवर पॉपओव्हर ट्रिगर करणे कार्य करणार नाही.
• .disabledरॅपर घटकावर किंवा disabledघटकांसाठी पॉपओव्हर्स ट्रिगर केले जाणे आवश्यक आहे.
• एकाहून अधिक ओळींमध्ये गुंडाळलेल्या अँकरमधून ट्रिगर केल्यावर, पॉपओव्हर्स अँकरच्या एकूण रुंदीमध्ये केंद्रित केले जातील. हे वर्तन टाळण्यासाठी .text-nowrapतुमच्या s वर वापरा .<a>
• DOM मधून संबंधित घटक काढून टाकण्यापूर्वी पॉपओव्हर्स लपलेले असणे आवश्यक आहे.
• छाया DOM मधील घटकामुळे पॉपओव्हर्स ट्रिगर केले जाऊ शकतात.

काही उदाहरणांसह popovers कसे कार्य करतात हे पाहण्यासाठी वाचन सुरू ठेवा.

उदाहरण: सर्वत्र popovers सक्षम करा

पृष्ठावरील सर्व पॉपओव्हर्स सुरू करण्याचा एक मार्ग म्हणजे त्यांना त्यांच्या data-bs-toggleगुणधर्मानुसार निवडणे:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

उदाहरण: containerपर्याय वापरणे

जेव्हा तुमच्याकडे पॅरेंट एलिमेंटवर काही शैली असतात ज्या पॉपओव्हरमध्ये व्यत्यय आणतात, तेव्हा तुम्ही एक सानुकूल निर्दिष्ट करू इच्छित असाल containerजेणेकरून त्याऐवजी त्या घटकामध्ये पॉपओव्हरचा HTML दिसेल.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

उदाहरण

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-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-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

पुढील क्लिकवर डिसमिस करा

focusटॉगल घटकापेक्षा वेगळ्या घटकाच्या वापरकर्त्याच्या पुढील क्लिकवर पॉपओव्हर्स डिसमिस करण्यासाठी ट्रिगर वापरा .

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

अक्षम घटक

विशेषता असलेले घटक disabledपरस्परसंवादी नसतात, म्हणजे वापरकर्ते पॉपओव्हर (किंवा टूलटिप) ट्रिगर करण्यासाठी त्यांना फिरवू किंवा क्लिक करू शकत नाहीत. वर्कअराउंड म्हणून, तुम्हाला रॅपरवरून पॉपओव्हर ट्रिगर करायचा आहे <div>किंवा <span>, वापरून आदर्शपणे कीबोर्ड-फोकस करण्यायोग्य बनवायचा आहे tabindex="0".

अक्षम केलेल्या पॉपओव्हर ट्रिगरसाठी, तुम्ही प्राधान्य देऊ शकता data-bs-trigger="hover focus"जेणेकरून पॉपओव्हर तुमच्या वापरकर्त्यांना तत्काळ व्हिज्युअल फीडबॅक म्हणून दिसेल कारण ते कदाचित अक्षम केलेल्या घटकावर क्लिक करण्याची अपेक्षा करत नाहीत.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

सस

चल

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

वापर

JavaScript द्वारे popovers सक्षम करा:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-bs-प्रमाणे जोडा data-bs-animation="". डेटा विशेषतांद्वारे पर्याय पास करताना पर्याय नावाचा केस प्रकार CamelCase वरून कबाब-केसमध्ये बदलण्याची खात्री करा. उदाहरणार्थ, वापरण्याऐवजी data-bs-customClass="beautifier", वापरा data-bs-custom-class="beautifier".

सह फंक्शन वापरणेpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

पद्धती

दाखवा

घटकाचे पॉपओव्हर प्रकट करते. पॉपओव्हर प्रत्यक्षात दाखवण्यापूर्वी कॉलरकडे परत येतो (म्हणजे shown.bs.popoverइव्हेंट होण्यापूर्वी). हे पॉपओव्हरचे "मॅन्युअल" ट्रिगरिंग मानले जाते. Popovers ज्यांचे शीर्षक आणि सामग्री दोन्ही शून्य-लांबीचे आहेत ते कधीही प्रदर्शित केले जात नाहीत.

myPopover.show()

लपवा

घटकाचे पॉपओव्हर लपवते. पॉपओव्हर प्रत्यक्षात लपविण्याआधी कॉलरकडे परत येतो (म्हणजे hidden.bs.popoverइव्हेंट होण्यापूर्वी). हे पॉपओव्हरचे "मॅन्युअल" ट्रिगरिंग मानले जाते.

myPopover.hide()

टॉगल

घटकाचे पॉपओव्हर टॉगल करते. पॉपओव्हर प्रत्यक्षात दर्शविले किंवा लपवले जाण्यापूर्वी कॉलरकडे परत येते (म्हणजे shown.bs.popoverकिंवा hidden.bs.popoverघटना घडण्यापूर्वी). हे पॉपओव्हरचे "मॅन्युअल" ट्रिगरिंग मानले जाते.

myPopover.toggle()

विल्हेवाट लावणे

घटकाचा पॉपओव्हर लपवतो आणि नष्ट करतो (DOM घटकावरील संग्रहित डेटा काढून टाकतो). डेलिगेशन वापरणारे पॉपओवर (जे पर्याय वापरून तयार केले जातात ) selectorवंशज ट्रिगर घटकांवर वैयक्तिकरित्या नष्ट केले जाऊ शकत नाहीत.

myPopover.dispose()

सक्षम करा

घटकाच्या पॉपओव्हरला दाखवण्याची क्षमता देते. Popovers डीफॉल्टनुसार सक्षम आहेत.

myPopover.enable()

अक्षम करा

घटकाच्या पॉपओव्हरची क्षमता काढून टाकते. पॉपओव्हर पुन्हा-सक्षम केले तरच दाखवता येईल.

myPopover.disable()

टॉगल सक्षम

घटकाचे पॉपओव्हर दर्शविले किंवा लपविण्याची क्षमता टॉगल करते.

myPopover.toggleEnabled()

अद्यतन

घटकाच्या पॉपओव्हरची स्थिती अपडेट करते.

myPopover.update()

getInstance

स्टॅटिक पद्धत जी तुम्हाला DOM घटकाशी संबंधित पॉपओव्हर उदाहरण मिळविण्यास अनुमती देते

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

स्टॅटिक पद्धत जी तुम्हाला डीओएम घटकाशी संबंधित पॉपओव्हर उदाहरण मिळवू देते किंवा ते सुरू न झाल्यास नवीन तयार करू देते

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

कार्यक्रम

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})