પોપોવર્સ

ઝાંખી

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

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

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

ઉદાહરણો

પોપોવર્સ સક્ષમ કરો

ઉપર સૂચવ્યા મુજબ, તમારે પોપોવર્સનો ઉપયોગ કરી શકાય તે પહેલાં પ્રારંભ કરવો આવશ્યક છે. પૃષ્ઠ પરના તમામ પોપોવર્સને પ્રારંભ કરવાની એક રીત એ છે કે તેમને તેમની data-bs-toggleવિશેષતા દ્વારા પસંદ કરવી, જેમ કે:

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

લાઈવ ડેમો

અમે નીચેના લાઇવ પોપઓવરને રેન્ડર કરવા માટે ઉપરના સ્નિપેટ જેવી જ JavaScriptનો ઉપયોગ કરીએ છીએ. શીર્ષકો દ્વારા સેટ કરવામાં આવે છે 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 ચલોનો ઉપયોગ કરીને પોપોવર્સના દેખાવને કસ્ટમાઇઝ કરી શકો છો . 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

ચલો

બુટસ્ટ્રેપના વિકસતા CSS ચલોના અભિગમના ભાગરૂપે, પોપોવર્સ હવે .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;

ઉપયોગ

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

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

વિકલ્પો

data-bs-ડેટા એટ્રિબ્યુટ્સ અથવા JavaScript દ્વારા વિકલ્પો પસાર કરી શકાય છે, તમે ની જેમ, માં વિકલ્પ નામ ઉમેરી શકો છો data-bs-animation="{value}". ડેટા એટ્રિબ્યુટ્સ દ્વારા વિકલ્પો પસાર કરતી વખતે વિકલ્પ નામના કેસ પ્રકારને “ camelCase ” થી “ kebab-case ” માં બદલવાની ખાતરી કરો. ઉદાહરણ તરીકે, data-bs-custom-class="beautifier"ની જગ્યાએ ઉપયોગ કરો data-bs-customClass="beautifier".

બુટસ્ટ્રેપ 5.2.0 મુજબ, બધા ઘટકો પ્રાયોગિક આરક્ષિત ડેટા એટ્રિબ્યુટને સમર્થન આપે છે 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...
})