Popovers

கண்ணோட்டம்

பாப்ஓவர் செருகுநிரலைப் பயன்படுத்தும் போது தெரிந்து கொள்ள வேண்டியவை:

• Popovers நிலைப்படுத்துவதற்கு மூன்றாம் தரப்பு நூலகமான Popper ஐ நம்பியுள்ளது . நீங்கள் இதற்கு முன் popper.min.js ஐச்bootstrap.js சேர்க்க வேண்டும் அல்லது bootstrap.bundle.min.jsபாப்பர் உள்ள ஒன்றைப் பயன்படுத்த வேண்டும்.
• Popovers ஒரு சார்புநிலையாக popover செருகுநிரல் தேவைப்படுகிறது.
• செயல்திறன் காரணங்களுக்காக Popovers தேர்வு செய்யப்படுகின்றன, எனவே அவற்றை நீங்களே துவக்க வேண்டும் .
• பூஜ்ஜிய நீளம் titleமற்றும் contentமதிப்புகள் ஒருபோதும் பாப்ஓவரைக் காட்டாது.
• மிகவும் சிக்கலான கூறுகளில் (எங்கள் உள்ளீட்டு குழுக்கள், பொத்தான் குழுக்கள் போன்றவை) ரெண்டரிங் container: 'body'சிக்கல்களைத் தவிர்க்க குறிப்பிடவும்.
• மறைக்கப்பட்ட கூறுகளில் பாப்ஓவர்களைத் தூண்டுவது வேலை செய்யாது.
• ஒரு ரேப்பர் உறுப்பில் பாபோவர்ஸ் .disabledஅல்லது disabledஉறுப்புகள் தூண்டப்பட வேண்டும்.
• பல கோடுகளில் மூடப்பட்டிருக்கும் ஆங்கர்களில் இருந்து தூண்டப்படும் போது, ​​பாப்ஓவர்கள் ஆங்கர்களின் ஒட்டுமொத்த அகலத்திற்கு இடையே மையப்படுத்தப்படும். இந்த நடத்தையைத் தவிர்க்க .text-nowrapஉங்கள் களில் பயன்படுத்தவும் .<a>
• DOM இலிருந்து தொடர்புடைய உறுப்புகள் அகற்றப்படுவதற்கு முன், Popovers மறைக்கப்பட வேண்டும்.
• நிழல் DOM இல் உள்ள ஒரு உறுப்புக்கு நன்றி செலுத்துவதன் மூலம் Popovers தூண்டப்படலாம்.

சில எடுத்துக்காட்டுகளுடன் popovers எவ்வாறு செயல்படுகிறது என்பதைப் பார்க்க தொடர்ந்து படியுங்கள்.

எடுத்துக்காட்டுகள்

popovers ஐ இயக்கு

மேலே குறிப்பிட்டுள்ளபடி, பாப்ஓவர்களைப் பயன்படுத்துவதற்கு முன்பு அவற்றைத் துவக்க வேண்டும். ஒரு பக்கத்தில் அனைத்து பாபோவர்களையும் துவக்குவதற்கான ஒரு வழி, அவற்றின் பண்புக்கூறு மூலம் அவற்றைத் தேர்ந்தெடுப்பது 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

பாப்ஓவரில் குறுக்கிடும் ஒரு பெற்றோர் உறுப்பில் சில ஸ்டைல்கள் இருந்தால், containerஅதற்குப் பதிலாக அந்த உறுப்பில் பாப்ஓவரின் HTML தோன்றும் வகையில் தனிப்பயன் ஒன்றைக் குறிப்பிட வேண்டும். பதிலளிக்கக்கூடிய அட்டவணைகள், உள்ளீட்டு குழுக்கள் மற்றும் பலவற்றில் இது பொதுவானது.

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

நீங்கள் வெளிப்படையான தனிப்பயனாக்கத்தை அமைக்க விரும்பும் மற்றொரு சூழ்நிலை, containerஒரு மாதிரி உரையாடலுக்குள் பாப்ஓவர் ஆகும், பாப்ஓவர் மாடலுடன் இணைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும். ஊடாடும் கூறுகளைக் கொண்ட பாபோவர்களுக்கு இது மிகவும் முக்கியமானது - மாதிரி உரையாடல்கள் கவனத்தை ஈர்க்கும், எனவே பாப்ஓவர் மாதிரியின் குழந்தை உறுப்பாக இல்லாவிட்டால், பயனர்களால் இந்த ஊடாடும் கூறுகளை மையப்படுத்தவோ அல்லது செயல்படுத்தவோ முடியாது.

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

தனிப்பயன் பாப்ஓவர்கள்

CSS மாறிகளைப் பயன்படுத்தி popovers தோற்றத்தை நீங்கள் தனிப்பயனாக்கலாம் . எங்கள் தனிப்பயன் தோற்றத்தைக் கண்டறிய தனிப்பயன் வகுப்பை அமைத்துள்ளோம் 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மேம்படுத்தப்பட்ட நிகழ்நேர தனிப்பயனாக்கத்திற்காக popovers இப்போது உள்ளூர் 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);
  

சாஸ் மாறிகள்

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