Popovers

දළ විශ්ලේෂණය

popover ප්ලගිනය භාවිතා කරන විට දැනගත යුතු දේවල්:

• Popovers ස්ථානගත කිරීම සඳහා 3වන පාර්ශ්ව පුස්තකාලය Popper මත රඳා පවතී . ඔබ bootstrap.js ට පෙර popper.min.js ඇතුළත් කළ යුතුය හෝ popovers ක්‍රියා කිරීම සඳහා Popper අඩංගු bootstrap.bundle.min.js/ භාවිතා කළ යුතුය!bootstrap.bundle.js
• Popovers මත යැපීම ලෙස මෙවලම් ඉඟි ප්ලගිනය අවශ්‍ය වේ.
• Popovers කාර්ය සාධන හේතූන් මත තෝරාගෙන ඇත, එබැවින් ඔබ විසින්ම ඒවා ආරම්භ කළ යුතුය .
• ශුන්‍ය-දිග titleසහ contentඅගයන් කිසිවිටෙක උත්ප්‍රාප්තිය නොපෙන්වයි.
• container: 'body'වඩාත් සංකීර්ණ සංරචකවල (අපගේ ආදාන කණ්ඩායම්, බොත්තම් කණ්ඩායම්, ආදිය) විදැහුම්කරණ ගැටළු වළක්වා ගැනීමට සඳහන් කරන්න .
• සැඟවුණු මූලද්‍රව්‍ය මත popovers අවුලුවාලීම ක්‍රියා නොකරනු ඇත.
• පොපෝවර් .disabledහෝ disabledමූලද්‍රව්‍ය දවටන මූලද්‍රව්‍යයක් මත ක්‍රියාරම්භ කළ යුතුය.
• රේඛා කිහිපයක් හරහා ඔතා ඇති නැංගුරම් වලින් ක්‍රියාරම්භ කරන විට, popovers නැංගුරම් වල සමස්ත පළල අතර කේන්ද්‍රගත වේ. මෙම හැසිරීම වළක්වා ගැනීමට .text-nowrapඔබේ s මත භාවිතා කරන්න .<a>
• ඒවායේ අනුරූප මූලද්‍රව්‍ය DOM වෙතින් ඉවත් කිරීමට පෙර Popovers සැඟවිය යුතුය.
• සෙවනැලි DOM තුළ ඇති මූලද්‍රව්‍යයකට ස්තුති වන්නට Popovers ක්‍රියාරම්භ කළ හැක.

සමහර උදාහරණ සමඟ 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විකල්පය භාවිතා කිරීම

ඔබට popover එකකට බාධා කරන මව් මූලද්‍රව්‍යයක් මත සමහර මෝස්තර ඇති විට, containerඒ වෙනුවට popover හි 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 හි Bootstrap භාවිතා කරන විට දිශාවන් පිළිබිඹු වේ.

<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ටොගල් මූලද්‍රව්‍යයට වඩා වෙනස් මූලද්‍රව්‍යයක පරිශීලකයාගේ මීළඟ ක්ලික් කිරීම මත popovers ඉවත දැමීමට ප්‍රේරකය භාවිතා කරන්න .

<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"ඇත.

ආබාධිත popover ප්‍රේරක සඳහා, ඔබ කැමති විය හැක data-bs-trigger="hover focus"එවිට popover ඔබගේ පරිශීලකයින්ට ක්ෂණික දෘශ්‍ය ප්‍රතිපෝෂණයක් ලෙස දිස්වනු ඇත, මන්ද ඔවුන් අබල කළ මූලද්‍රව්‍යයක් මත ක්ලික් කිරීමට බලාපොරොත්තු නොවිය හැක.

<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="". දත්ත උපලක්ෂණ හරහා විකල්ප ලබා දීමේදී ඔප්ෂන් නමේ කේස් වර්ගය කැමල් කේස් සිට කෙබාබ්-කේස් දක්වා වෙනස් කිරීමට වග බලා ගන්න. උදාහරණයක් ලෙස, භාවිතා කිරීම වෙනුවට 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
  }
})

ක්රම

පෙන්වන්න

මූලද්‍රව්‍යයක පොපෝවර් හෙළි කරයි. Popover ඇත්ත වශයෙන්ම පෙන්වීමට පෙර (එනම් shown.bs.popoverසිදුවීම සිදුවීමට පෙර) අමතන්නා වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" අවුලුවන ලෙස සැලකේ. මාතෘකාව සහ අන්තර්ගතය ශුන්‍ය දිග යන දෙකම ඇති Popovers කිසි විටෙක සංදර්ශණය නොවේ.

myPopover.show()

සඟවන්න

මූලද්‍රව්‍යයක පොපෝවර් සඟවයි. Popover ඇත්ත වශයෙන්ම සැඟවීමට පෙර (එනම් hidden.bs.popoverසිදුවීම සිදුවීමට පෙර) අමතන්නා වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" අවුලුවන ලෙස සැලකේ.

myPopover.hide()

ටොගල් කරන්න

මූලද්‍රව්‍යයක popover ටොගල් කරයි. popover ඇත්ත වශයෙන්ම පෙන්වීමට හෝ සැඟවීමට පෙර (එනම් සිදුවීමට shown.bs.popoverහෝ hidden.bs.popoverසිදුවීමට පෙර) ඇමතුම්කරු වෙත ආපසු පැමිණේ. මෙය popover හි "අත්පොත" අවුලුවන ලෙස සැලකේ.

myPopover.toggle()

බැහැර කරන්න

මූලද්‍රව්‍යයක popover සඟවා විනාශ කරයි (DOM මූලද්‍රව්‍යයේ ගබඩා කර ඇති දත්ත ඉවත් කරයි). නියෝජිතායතනය භාවිතා කරන Popovers ( විකල්පය භාවිතයෙන් සාදනු ලබනselector ) පැවත එන ප්‍රේරක මූලද්‍රව්‍ය මත තනි තනිව විනාශ කළ නොහැක.

myPopover.dispose()

සක්රිය කරන්න

මූලද්‍රව්‍යයක popover පෙන්වීමට හැකියාව ලබා දෙයි. Popovers පෙරනිමියෙන් සබල කර ඇත.

myPopover.enable()

අක්රිය කරන්න

මූලද්‍රව්‍යයක popover පෙන්වීමට ඇති හැකියාව ඉවත් කරයි. popover පෙන්විය හැක්කේ එය නැවත සබල කළහොත් පමණි.

myPopover.disable()

toggleEnabled

මූලද්‍රව්‍යයක popover පෙන්වීමට හෝ සැඟවීමට ඇති හැකියාව ටොගල් කරයි.

myPopover.toggleEnabled()

යාවත්කාලීන

මූලද්‍රව්‍යයක popover තත්ත්වය යාවත්කාලීන කරයි.

myPopover.update()

getInstance

DOM මූලද්‍රව්‍යයක් සමඟ සම්බන්ධිත popover අවස්ථාව ලබා ගැනීමට ඔබට ඉඩ සලසන ස්ථිතික ක්‍රමය

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

getOrCreateInstance

DOM මූලද්‍රව්‍යයක් හා සම්බන්ධ popover අවස්ථාව ලබා ගැනීමට ඔබට ඉඩ සලසන ස්ථිතික ක්‍රමය, හෝ එය ආරම්භ නොකළහොත් නව එකක් නිර්මාණය කරන්න

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