פופ-אוברים

סקירה כללית

דברים שכדאי לדעת בעת שימוש בתוסף popover:

• Popovers מסתמכים על ספריית הצד השלישי Popper לצורך מיקום. עליך לכלול popper.min.js לפני bootstrap.js, או להשתמש באחד bootstrap.bundle.min.jsשמכיל Popper.
• פופ-אובר דורש את הפלאגין פופ -אובר כתלות.
• חלונות קופצים ניתנים להצטרפות מסיבות ביצועים, לכן עליך לאתחל אותם בעצמך .
• אורך אפס titleוערכים contentלעולם לא יראו פופ-אובר.
• ציין container: 'body'כדי להימנע מעיבוד בעיות ברכיבים מורכבים יותר (כמו קבוצות הקלט שלנו, קבוצות לחצנים וכו').
• הפעלת popovers על אלמנטים מוסתרים לא תעבוד.
• יש להפעיל פופ-אובר עבור אלמנטים .disabledאו disabledאלמנטים ברכיב עטיפה.
• כאשר מופעלים מעוגנים העוטפים על פני קווים מרובים, הפופ-אוברים יתרכזו בין הרוחב הכללי של העוגנים. השתמש .text-nowrapב- <a>s שלך כדי להימנע מהתנהגות זו.
• יש להסתיר חלונות קופצים לפני שהרכיבים התואמים שלהם יוסרו מה-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>

ארבעה כיוונים

ארבע אפשרויות זמינות: למעלה, ימין, תחתון ושמאל. ההנחיות משתקפות בעת שימוש ב-Bootstrap ב-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

כאשר יש לך כמה סגנונות ברכיב אב שמפריעים ל-popover, תרצה לציין התאמה אישית containerכך שה-HTML של ה-pover יופיע בתוך הרכיב הזה במקום זאת. זה נפוץ בטבלאות רספונסיביות, קבוצות קלט וכדומה.

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"כך שה-pover יופיע כמשוב ויזואלי מיידי למשתמשים שלך, מכיוון שהם עשויים שלא לצפות ללחוץ על אלמנט מושבת.

<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 המתפתחת של Bootstrap, פופ-אוברים משתמשים כעת במשתני CSS מקומיים .popoverלהתאמה אישית משופרת בזמן אמת. ערכים עבור משתני ה-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)

אפשרויות

מכיוון שניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript, אתה יכול להוסיף שם אפשרות ל- data-bs-, כמו ב- data-bs-animation="{value}". הקפד לשנות את סוג המארז של שם האופציה מ" camelCase " ל" kebab -case " כאשר אתה מעביר את האפשרויות באמצעות תכונות נתונים. לדוגמה, השתמש data-bs-custom-class="beautifier"במקום data-bs-customClass="beautifier".

החל מ-Bootstrap 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...
})