Popovers

अवलोकन

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

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

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

उदाहरण: सबै ठाउँमा 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>

चार दिशा

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

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

प्रयोग

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

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-bs-, जस्तै मा data-bs-animation=""। डेटा विशेषताहरू मार्फत विकल्पहरू पास गर्दा CamelCase बाट kebab-case मा विकल्प नामको केस प्रकार परिवर्तन गर्न निश्चित गर्नुहोस्। उदाहरणका लागि, प्रयोग गर्नुको सट्टा 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()

उदाहरण प्राप्त गर्नुहोस्

स्थिर विधि जसले तपाइँलाई DOM तत्वसँग सम्बन्धित पपओभर उदाहरण प्राप्त गर्न अनुमति दिन्छ

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

getOrCreateInstance

स्थिर विधि जसले तपाइँलाई DOM तत्वसँग सम्बन्धित पपओभर उदाहरण प्राप्त गर्न अनुमति दिन्छ, वा यो प्रारम्भ नगरिएको अवस्थामा नयाँ सिर्जना गर्न अनुमति दिन्छ।

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...
})