Popovers

දළ විශ්ලේෂණය

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

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

සමහර උදාහරණ සමඟ popovers ක්‍රියා කරන ආකාරය බැලීමට කියවන්න.

උදාහරණ

popovers සබල කරන්න

ඉහත සඳහන් කළ පරිදි, ඔබ ඒවා භාවිතා කිරීමට පෙර popovers ආරම්භ කළ යුතුය. පිටුවක ඇති සියලුම popovers ආරම්භ කිරීමට එක් ක්‍රමයක් වනුයේ ඒවායේ data-bs-toggleගුණාංගය අනුව ඒවා තෝරා ගැනීමයි.

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

සජීවී නිරූපණය

අපි පහත සජීවී popover විදැහුම් කිරීමට ඉහත ස්නිපටයට සමාන 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 හි Bootstrap භාවිතා කරන විට දිශාවන් පිළිබිඹු වේ. 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

ඔබට popover එකකට බාධා කරන මව් මූලද්‍රව්‍යයක් මත සමහර මෝස්තර ඇති විට, containerඒ වෙනුවට popover හි HTML එම මූලද්‍රව්‍යය තුළ දිස්වන පරිදි අභිරුචියක් සඳහන් කිරීමට ඔබට අවශ්‍ය වනු ඇත. මෙය ප්‍රතිචාරාත්මක වගු, ආදාන කණ්ඩායම් සහ ඒ හා සමානව පොදු වේ.

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

ඔබට පැහැදිලි අභිරුචියක් සැකසීමට අවශ්‍ය වන තවත් තත්වයක් නම් , මොඩල් සංවාදයක්container තුළ ඇති popovers නම්, popover එයම මාදිලියට අමුණා ඇති බව තහවුරු කර ගැනීමයි. අන්තර්ක්‍රියාකාරී මූලද්‍රව්‍ය අඩංගු popover සඳහා මෙය විශේෂයෙන් වැදගත් වේ - මොඩල් සංවාද නාභිගත කරනු ඇත, එබැවින් popover මාදිලියේ ළමා අංගයක් නම් මිස, පරිශීලකයින්ට මෙම අන්තර්ක්‍රියාකාරී මූලද්‍රව්‍ය නාභිගත කිරීමට හෝ සක්‍රිය කිරීමට නොහැකි වනු ඇත.

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

අභිරුචි popovers

ඔබට CSS විචල්‍ය භාවිතයෙන් popover වල පෙනුම අභිරුචිකරණය කළ හැක . අපි අපගේ අභිරුචි පෙනුම විෂය පථය සඳහා අභිරුචි පන්තියක් සකසා 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ටොගල් මූලද්‍රව්‍යයට වඩා වෙනස් මූලද්‍රව්‍යයක පරිශීලකයාගේ මීළඟ ක්ලික් කිරීම මත popovers ඉවත දැමීමට ප්‍රේරකය භාවිතා කරන්න .

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

ආබාධිත 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>

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;

භාවිතය

JavaScript හරහා popovers සබල කරන්න:

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

විකල්ප

දත්ත උපලක්ෂණ හෝ ජාවාස්ක්‍රිප්ට් හරහා විකල්ප ලබා දිය හැකි බැවින්, ඔබට විකල්ප නාමයක් data-bs-, ලෙසට එකතු කළ හැක data-bs-animation="{value}". දත්ත ගුණාංග හරහා විකල්ප සම්මත කිරීමේදී විකල්ප නාමයේ කේස් වර්ගය “ කැමල්කේස් ” සිට “ කෙබාබ්-කේස් ” ලෙස වෙනස් කිරීමට වග බලා ගන්න. උදාහරණයක් ලෙස, data-bs-custom-class="beautifier"වෙනුවට භාවිතා කරන්න data-bs-customClass="beautifier".

Bootstrap 5.2.0 වන විට, සියලුම සංරචක JSON තන්තුවක් ලෙස සරල සංරචක වින්‍යාසගත කළ හැකි පර්යේෂණාත්මක වෙන් කළ දත්ත ගුණාංගයකට සහාය දක්වයි. data-bs-configමූලද්‍රව්‍යයක් සතුව 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...
})