ପପୋଭର୍ସ |

ସମୀକ୍ଷା

ପପଓଭର ପ୍ଲଗଇନ ବ୍ୟବହାର କରିବା ସମୟରେ ଜାଣିବା ଜିନିଷ:

• ପୋଜିଭର୍ସ ପୋଜିସନ୍ ପାଇଁ ତୃତୀୟ ପକ୍ଷ ଲାଇବ୍ରେରୀ ପପର୍ ଉପରେ ନିର୍ଭର କରନ୍ତି | ଆପଣ ନିଶ୍ଚିତ ଭାବରେ popper.min.js ଅନ୍ତର୍ଭୂକ୍ତ କରିବେ ,bootstrap.js କିମ୍ବା bootstrap.bundle.min.jsପପର୍ ଧାରଣ କରିଥିବା ଗୋଟିଏ ବ୍ୟବହାର କରନ୍ତୁ |
• ପପୋଭରଗୁଡିକ ଏକ ନିର୍ଭରଶୀଳତା ଭାବରେ ପପଓଭର ପ୍ଲଗଇନ୍ ଆବଶ୍ୟକ କରେ |
• କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ ପପୋଭର୍ସ ଅପ୍ଟ-ଇନ୍ ଅଟେ, ତେଣୁ ଆପଣ ସେମାନଙ୍କୁ ନିଜେ ଆରମ୍ଭ କରିବା ଜରୁରୀ |
• ଶୂନ-ଦ length ର୍ଘ୍ୟ titleଏବଂ contentମୂଲ୍ୟ କଦାପି ପପଓଭର ଦେଖାଇବ ନାହିଁ |
• container: 'body'ଅଧିକ ଜଟିଳ ଉପାଦାନଗୁଡ଼ିକରେ ସମସ୍ୟା ସୃଷ୍ଟି ନକରିବାକୁ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ (ଯେପରିକି ଆମର ଇନପୁଟ୍ ଗୋଷ୍ଠୀ, ବଟନ୍ ଗୋଷ୍ଠୀ, ଇତ୍ୟାଦି) |
• ଲୁକ୍କାୟିତ ଉପାଦାନଗୁଡିକ ଉପରେ ପପଓଭରଗୁଡିକ ଟ୍ରିଗ୍ କରିବା କାମ କରିବ ନାହିଁ |
• ଏକ ରାପର୍ ଉପାଦାନ ଉପରେ ପପୋଭର୍ସ .disabledକିମ୍ବା disabledଉପାଦାନଗୁଡ଼ିକ ଟ୍ରିଗର ହେବା ଜରୁରୀ |
• ଯେତେବେଳେ ଆଙ୍କର୍ଗୁଡ଼ିକରୁ ଟ୍ରିଗର ହୁଏ ଯାହା ଏକାଧିକ ଧାଡିରେ ଗୁଡ଼ାଏ, ପପୋଭରଗୁଡ଼ିକ ଆଙ୍କର୍ଗୁଡ଼ିକର ସାମଗ୍ରିକ ମୋଟେଇ ମଧ୍ୟରେ କେନ୍ଦ୍ରୀଭୂତ ହେବ | ଏହି ଆଚରଣକୁ ଏଡାଇବା ପାଇଁ .text-nowrapଆପଣଙ୍କ ଉପରେ ବ୍ୟବହାର କରନ୍ତୁ |<a>
• ସେମାନଙ୍କର ଅନୁରୂପ ଉପାଦାନଗୁଡିକ DOM ରୁ ଅପସାରଣ ହେବା ପୂର୍ବରୁ ପପୋଭରଗୁଡିକ ଲୁକ୍କାୟିତ ହେବା ଜରୁରୀ |
• ଏକ ଛାୟା DOM ଭିତରେ ଥିବା ଏକ ଉପାଦାନ ଯୋଗୁଁ ପପୋଭରଗୁଡିକ ଟ୍ରିଗର ହୋଇପାରେ |

କିଛି ଉଦାହରଣ ସହିତ ପପୋଭରଗୁଡିକ କିପରି କାମ କରେ ଦେଖିବା ପାଇଁ ପ reading ଼ନ୍ତୁ |

ଉଦାହରଣଗୁଡିକ

ପପୋଭର୍ ସକ୍ଷମ କରନ୍ତୁ |

ଉପରୋକ୍ତ ପରି, ସେଗୁଡିକ ବ୍ୟବହାର ହେବା ପୂର୍ବରୁ ଆପଣ ନିଶ୍ଚିତ ଭାବରେ ପପୋଭର୍ ଆରମ୍ଭ କରିବେ | ଏକ ପୃଷ୍ଠାରେ ସମସ୍ତ ପପୋଭର୍ ଆରମ୍ଭ କରିବାର ଗୋଟିଏ ଉପାୟ ହେଉଛି, ସେମାନଙ୍କ data-bs-toggleଗୁଣ ଅନୁଯାୟୀ ସେମାନଙ୍କୁ ବାଛିବା, ଯେପରି:

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

ଲାଇଭ୍ ଡେମୋ |

ନିମ୍ନଲିଖିତ ଲାଇଭ୍ ପପଓଭରକୁ ଉପସ୍ଥାପନ କରିବା ପାଇଁ ଆମେ ଉପର ସ୍ନିପେଟ୍ ପରି ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରୁ | ଶିରୋନାମାଗୁଡ଼ିକ ମାଧ୍ୟମରେ ସେଟ୍ ହୋଇଛି 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

ଯେତେବେଳେ ଆପଣଙ୍କର ଏକ ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନରେ କିଛି ଶ yles ଳୀ ଅଛି ଯାହା ଏକ ପପ୍ ଓଭରରେ ବାଧା ସୃଷ୍ଟି କରେ, ଆପଣ ଏକ କଷ୍ଟମ୍ ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଚାହାଁନ୍ତି containerଯାହା ଦ୍ pop ାରା ପପୋଭରର HTML ସେହି ଉପାଦାନ ମଧ୍ୟରେ ଦେଖାଯାଏ | ପ୍ରତିକ୍ରିୟାଶୀଳ ସାରଣୀ, ଇନପୁଟ୍ ଗୋଷ୍ଠୀ, ଏବଂ ଏହିପରି ଏହା ସାଧାରଣ ଅଟେ |

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

ଅନ୍ୟ ଏକ ପରିସ୍ଥିତି ଯେଉଁଠାରେ ଆପଣ ଏକ ସ୍ପଷ୍ଟ କଷ୍ଟମ୍ ସେଟ୍ କରିବାକୁ ଚାହାଁନ୍ତି, ଏକ ମୋଡାଲ୍ ଡାୟଲଗ୍ ଭିତରେ ପପଓଭର , ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ containerପପୋଭର ନିଜେ ମୋଡାଲରେ ଯୋଡି ହୋଇଛି | ପପୋଭର୍ ପାଇଁ ଏହା ବିଶେଷ ଗୁରୁତ୍ that ପୂର୍ଣ ଅଟେ ଯେଉଁଥିରେ ଇଣ୍ଟରାକ୍ଟିଭ୍ ଉପାଦାନ ଥାଏ - ମୋଡାଲ୍ ଡାୟଲଗ୍ ଫୋକସ୍ ଫାନ୍ଦରେ ପକାଇବ, ତେଣୁ ଯଦି ପପୋଭର ମୋଡାଲର ଏକ ଶିଶୁ ଉପାଦାନ ନହୁଏ, ଉପଭୋକ୍ତାମାନେ ଏହି ଇଣ୍ଟରାକ୍ଟିଭ୍ ଉପାଦାନଗୁଡ଼ିକୁ ଧ୍ୟାନ ଦେବା କିମ୍ବା ସକ୍ରିୟ କରିବାରେ ସମର୍ଥ ହେବେ ନାହିଁ |

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

କଷ୍ଟମ୍ ପପୋଭର୍ସ |

ଆପଣ 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"ଯାହା ଦ୍ pop ାରା ପପୋଭର ଆପଣଙ୍କ ଉପଭୋକ୍ତାମାନଙ୍କୁ ତୁରନ୍ତ ଭିଜୁଆଲ୍ ଫିଡବ୍ୟାକ୍ ଭାବରେ ଦେଖାଯାଏ କାରଣ ସେମାନେ ଏକ ଅକ୍ଷମ ଉପାଦାନ ଉପରେ କ୍ଲିକ୍ କରିବାକୁ ଆଶା କରିପାରନ୍ତି ନାହିଁ |

<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 ଭେରିଏବଲ୍ ପାଇଁ ମୂଲ୍ୟଗୁଡ଼ିକ ସାସ୍ ମାଧ୍ୟମରେ ସେଟ୍ ହୋଇଛି, ତେଣୁ ସାସ୍ କଷ୍ଟୋମାଇଜେସନ୍ ମଧ୍ୟ ସମର୍ଥିତ |

  --#{$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);
  

ସାସ୍ ଭେରିଏବଲ୍ |

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

ବ୍ୟବହାର

ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ପପୋଭର୍ ସକ୍ଷମ କରନ୍ତୁ:

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

ବିକଳ୍ପଗୁଡ଼ିକ

ଯେହେତୁ ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଅପ୍ସନ୍ ପାସ୍ ହୋଇପାରିବ, ତୁମେ ଯେପରି ଏକ ଅପ୍ସନ୍ ନାମ ଯୋଡି data-bs-ପାରିବ 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...
})