Popovers

अवलोकन

पपओभर प्लगइन प्रयोग गर्दा जान्नुपर्ने कुराहरू:

• पोपोभरहरू स्थितिको लागि तेस्रो पक्ष पुस्तकालय पोपरमा भर पर्छन् । तपाईंले पहिले popper.min.jsbootstrap.js समावेश गर्नुपर्छ , वा bootstrap.bundle.min.jsPopper समावेश भएको प्रयोग गर्नुहोस्।
• Popovers लाई निर्भरताको रूपमा popover प्लगइन चाहिन्छ।
• Popovers कार्यसम्पादन कारणहरूको लागि अप्ट-इन हुन्छन्, त्यसैले तपाईंले तिनीहरूलाई आफैं सुरु गर्नुपर्छ ।
• शून्य-लम्बाइ titleर contentमानहरूले कहिल्यै पपओभर देखाउँदैनन्।
• container: 'body'थप जटिल कम्पोनेन्टहरू (जस्तै हाम्रो इनपुट समूहहरू, बटन समूहहरू, आदि) मा रेन्डरिङ समस्याहरूबाट बच्न निर्दिष्ट गर्नुहोस्।
• लुकेका तत्वहरूमा पपओभर ट्रिगर गर्ने कार्यले काम गर्दैन।
• .disabledवा तत्वहरूका लागि पपओभरहरू र्यापर disabledतत्वमा ट्रिगर हुनुपर्छ।
• एङ्करहरूबाट ट्रिगर गर्दा धेरै रेखाहरूमा लपेटिन्छ, पपोभरहरू एङ्करहरूको समग्र चौडाइको बीचमा केन्द्रित हुनेछन्। यो व्यवहारबाट बच्न .text-nowrapआफ्नो s मा प्रयोग गर्नुहोस्।<a>
• DOM बाट सम्बन्धित तत्वहरू हटाउनु अघि पोपोभरहरू लुकाउनु पर्छ।
• Popovers ट्रिगर गर्न सकिन्छ छाया DOM भित्र एक तत्व को लागी धन्यवाद।

popovers केहि उदाहरणहरु संग काम कसरी हेर्न को लागी पढ्न जारी राख्नुहोस्।

उदाहरणहरू

popovers सक्षम गर्नुहोस्

माथि उल्लेख गरिए अनुसार, तपाईंले प्रयोग गर्न सक्नु अघि popovers प्रारम्भ गर्नुपर्छ। पृष्ठमा सबै popovers प्रारम्भ गर्न एक तरिका तिनीहरूलाई तिनीहरूको data-bs-toggleविशेषता द्वारा चयन गर्न हुनेछ, जस्तै:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

प्रत्यक्ष डेमो

हामी निम्न लाइभ पपओभर रेन्डर गर्न माथिको स्निपेट जस्तै जाभास्क्रिप्ट प्रयोग गर्छौं। शीर्षकहरू मार्फत सेट गरिएको छ data-bs-titleर मुख्य सामग्री मार्फत सेट गरिएको छ data-bs-content।

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

चार दिशा

चार विकल्पहरू उपलब्ध छन्: शीर्ष, दायाँ, तल, र बाँया। RTL मा बुटस्ट्र्याप प्रयोग गर्दा दिशाहरू प्रतिबिम्बित हुन्छन्। data-bs-placementदिशा परिवर्तन गर्न सेट गर्नुहोस् ।

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

अनुकूलनcontainer

जब तपाइँसँग एक अभिभावक तत्वमा केहि शैलीहरू छन् जुन पपओभरमा हस्तक्षेप गर्दछ, तपाइँ एक अनुकूलन निर्दिष्ट गर्न चाहानुहुन्छ containerताकि पपओभरको HTML त्यस तत्व भित्र देखा पर्दछ। यो उत्तरदायी तालिकाहरू, इनपुट समूहहरू, र जस्तै सामान्य छ।

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

अर्को अवस्था जहाँ तपाइँ स्पष्ट अनुकूलन सेट गर्न चाहानुहुन्छ मोडल संवादcontainer भित्र पपओभरहरू छन् , पपओभर आफैं मोडलमा जोडिएको छ भनेर सुनिश्चित गर्न। यो विशेष गरी अन्तरक्रियात्मक तत्वहरू समावेश गर्ने पोपोभरहरूका लागि महत्त्वपूर्ण छ - मोडल संवादहरूले फोकसलाई ट्र्याप गर्नेछ, त्यसैले पपओभर मोडलको बाल तत्व नभएसम्म, प्रयोगकर्ताहरूले यी अन्तरक्रियात्मक तत्वहरूलाई फोकस गर्न वा सक्रिय गर्न सक्षम हुने छैनन्।

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

अनुकूलन popovers

तपाइँ CSS चर प्रयोग गरेर popovers को उपस्थिति अनुकूलन गर्न सक्नुहुन्छ । data-bs-custom-class="custom-popover"हामीले हाम्रो अनुकूलन उपस्थिति स्कोप गर्न र यसलाई स्थानीय CSS चरहरू ओभरराइड गर्न प्रयोग गर्नको लागि अनुकूलन वर्ग सेट गर्छौं ।

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

अर्को क्लिकमा खारेज गर्नुहोस्

focusटगल एलिमेन्ट भन्दा फरक तत्वको प्रयोगकर्ताको अर्को क्लिकमा पपओभरहरू खारेज गर्न ट्रिगर प्रयोग गर्नुहोस्।

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

const popover = new bootstrap.Popover('.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>

CSS

चरहरू

Bootstrap को विकसित CSS चर दृष्टिकोण को एक भाग को रूप मा, popovers अब .popoverविस्तारित वास्तविक समय अनुकूलन को लागी स्थानीय CSS चर प्रयोग गर्दछ। CSS चरका लागि मानहरू Sass मार्फत सेट गरिएका छन्, त्यसैले Sass अनुकूलन अझै पनि समर्थित छ।

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Sass चरहरू

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

प्रयोग

जाभास्क्रिप्ट मार्फत popovers सक्षम गर्नुहोस्:

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

विकल्पहरू

डेटा विशेषताहरू वा JavaScript मार्फत विकल्पहरू पास गर्न सकिने हुनाले, तपाईंले विकल्प नाम जोड्न सक्नुहुन्छ data-bs-, जस्तै मा data-bs-animation="{value}"। डेटा विशेषताहरू मार्फत विकल्पहरू पास गर्दा विकल्प नामको केस प्रकारलाई " camelCase " बाट " kebab-case " मा परिवर्तन गर्न निश्चित गर्नुहोस्। उदाहरण को लागी, data-bs-custom-class="beautifier"को सट्टा प्रयोग गर्नुहोस् data-bs-customClass="beautifier"।

बुटस्ट्र्याप ५.२.० को रूपमा, सबै कम्पोनेन्टहरूले प्रयोगात्मक आरक्षित डेटा विशेषतालाई समर्थन गर्दछ 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}'।

संग प्रकार्य प्रयोग गर्दैpopperConfig

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

विधिहरू

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

घटनाहरू

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