પોપોવર્સ

ઝાંખી

પોપઓવર પ્લગઇનનો ઉપયોગ કરતી વખતે જાણવા જેવી બાબતો:

• પોપોવર્સ પોઝિશનિંગ માટે 3જી પાર્ટી લાઇબ્રેરી પોપર પર આધાર રાખે છે . તમારે bootstrap.js પહેલા popper.min.jsbootstrap.bundle.min.js નો સમાવેશ કરવો જોઈએ અથવા પોપોવર કામ કરવા માટે / bootstrap.bundle.jsજેમાં પોપર છે તેનો ઉપયોગ કરો!
• પોપોવર્સને અવલંબન તરીકે ટૂલટિપ પ્લગઇનની જરૂર છે.
• પોપોવર્સ કામગીરીના કારણોસર પસંદ કરવામાં આવે છે, તેથી તમારે તેમને જાતે જ પ્રારંભ કરવું આવશ્યક છે .
• શૂન્ય-લંબાઈ titleઅને contentમૂલ્યો ક્યારેય પોપઓવર બતાવશે નહીં.
• container: 'body'વધુ જટિલ ઘટકો (જેમ કે અમારા ઇનપુટ જૂથો, બટન જૂથો, વગેરે) માં રેન્ડરિંગ સમસ્યાઓ ટાળવા માટે સ્પષ્ટ કરો .
• છુપાયેલા તત્વો પર પોપઓવરને ટ્રિગર કરવું કામ કરશે નહીં.
• .disabledરેપર એલિમેન્ટ પર અથવા disabledતત્વો માટે પોપોવર્સ ટ્રિગર થવું આવશ્યક છે.
• જ્યારે બહુવિધ રેખાઓ પર લપેટતા એન્કરથી ટ્રિગર થાય છે, ત્યારે પોપોવર્સ એન્કરની એકંદર પહોળાઈ વચ્ચે કેન્દ્રિત કરવામાં આવશે. આ વર્તનને ટાળવા માટે .text-nowrapતમારા s નો ઉપયોગ કરો.<a>
• પોપોવર્સ તેમના અનુરૂપ ઘટકોને DOMમાંથી દૂર કરવામાં આવે તે પહેલાં છુપાયેલા હોવા જોઈએ.
• પડછાયા DOM ની અંદરના તત્વને કારણે પોપોવર્સ ટ્રિગર થઈ શકે છે.

કેટલાક ઉદાહરણો સાથે પોપોવર્સ કેવી રીતે કાર્ય કરે છે તે જોવા માટે વાંચવાનું ચાલુ રાખો.

ઉદાહરણ: દરેક જગ્યાએ પોપોવર્સ સક્ષમ કરો

પૃષ્ઠ પરના તમામ પોપોવર્સને પ્રારંભ કરવાની એક રીત એ છે કે તેમને તેમની 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);

ઉપયોગ

JavaScript દ્વારા પોપોવર્સ સક્ષમ કરો:

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

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-bs-, જેમ કે માં ઉમેરો data-bs-animation="". ડેટા વિશેષતાઓ દ્વારા વિકલ્પો પસાર કરતી વખતે વિકલ્પ નામના કેસ પ્રકારને કેમલકેસમાંથી કબાબ-કેસમાં બદલવાની ખાતરી કરો. ઉદાહરણ તરીકે, ઉપયોગ કરવાને બદલે 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ઇવેન્ટ થાય તે પહેલાં). આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે. પોપોવર કે જેનું શીર્ષક અને સામગ્રી બંને શૂન્ય-લેન્થ હોય તે ક્યારેય પ્રદર્શિત થતા નથી.

myPopover.show()

છુપાવો

તત્વના પોપઓવરને છુપાવે છે. પોપઓવર વાસ્તવમાં છુપાયેલ હોય તે પહેલાં (એટલે ​​કે hidden.bs.popoverઘટના બને તે પહેલાં) કોલર પાસે પરત આવે છે. આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે.

myPopover.hide()

ટૉગલ

તત્વના પોપઓવરને ટૉગલ કરે છે. પોપઓવર વાસ્તવમાં બતાવવામાં આવે અથવા છુપાવવામાં આવે તે પહેલાં (એટલે ​​કે ઘટના shown.bs.popoverઅથવા hidden.bs.popoverઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે. આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે.

myPopover.toggle()

નિકાલ

તત્વના પોપઓવરને છુપાવે છે અને તેનો નાશ કરે છે (DOM તત્વ પર સંગ્રહિત ડેટાને દૂર કરે છે). ડેલિગેશનનો ઉપયોગ કરતા પોપોવર્સ (જે વિકલ્પનો ઉપયોગ કરીનેselector બનાવવામાં આવે છે ) વંશજ ટ્રિગર તત્વો પર વ્યક્તિગત રીતે નાશ કરી શકાતા નથી.

myPopover.dispose()

સક્ષમ કરો

એલિમેન્ટના પોપઓવરને બતાવવાની ક્ષમતા આપે છે. પોપોવર્સ ડિફૉલ્ટ રૂપે સક્ષમ છે.

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

સ્ટેટિક મેથડ જે તમને 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...
})