דלג לתוכן הראשי דלג לניווט במסמכים
Check
in English

Offcanvas

בנה סרגלי צד נסתרים בפרויקט שלך עבור ניווט, עגלות קניות ועוד עם כמה מחלקות ותוסף JavaScript שלנו.

בעמוד זה

איך זה עובד

Offcanvas הוא רכיב סרגל צד שניתן לשנות באמצעות JavaScript כדי להופיע מהקצה השמאלי, הימני, העליון או התחתון של נקודת התצוגה. כפתורים או עוגנים משמשים כטריגרים המחוברים לאלמנטים ספציפיים שאתה מחליף, dataותכונות משמשות להפעלת JavaScript שלנו.

  • Offcanvas חולק חלק מאותו קוד JavaScript כמו מודלים. מבחינה רעיונית, הם די דומים, אבל הם תוספים נפרדים.
  • באופן דומה, כמה משתני Sass במקור עבור הסגנונות והממדים של offcanvas עוברים בירושה מהמשתנים של המודאל.
  • כאשר מוצג, offcanvas כולל רקע ברירת מחדל שניתן ללחוץ עליו כדי להסתיר את offcanvas.
  • בדומה למודלים, ניתן להציג רק offcanvas אחד בכל פעם.

שימו לב! בהתחשב באופן שבו CSS מטפל בהנפשות, אינך יכול להשתמש marginאו translateעל .offcanvasאלמנט. במקום זאת, השתמש במחלקה כרכיב עטיפה עצמאי.

אפקט האנימציה של רכיב זה תלוי prefers-reduced-motionבשאילתת המדיה. עיין בסעיף תנועה מופחתת בתיעוד הנגישות שלנו .

דוגמאות

רכיבי Offcanvas

להלן דוגמה offcanvas שמוצגת כברירת מחדל (באמצעות .showon .offcanvas). Offcanvas כולל תמיכה בכותרת עם כפתור סגירה ומחלקת גוף אופציונלית לחלק ראשוני padding. אנו ממליצים לכלול כותרות offcanvas עם פעולות דחייה במידת האפשר, או לספק פעולת דחייה מפורשת.

Offcanvas
תוכן עבור offcanvas נכנס כאן. אתה יכול למקם כמעט כל רכיב Bootstrap או אלמנטים מותאמים אישית כאן.
html 
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

דמו ישיר

השתמש בלחצנים למטה כדי להציג ולהסתיר אלמנט offcanvas באמצעות JavaScript שמעביר את .showהמחלקה לרכיב עם .offcanvasהמחלקה.

  • .offcanvasמסתיר תוכן (ברירת מחדל)
  • .offcanvas.showמציג תוכן

אתה יכול להשתמש בקישור עם hrefהתכונה, או בכפתור עם data-bs-targetהתכונה. בשני המקרים, data-bs-toggle="offcanvas"נדרש.

קישור עם href
Offcanvas
טקסט מסוים כמציין מיקום. בחיים האמיתיים אתה יכול לקבל את האלמנטים שבחרת. כמו, טקסט, תמונות, רשימות וכו'.
html 
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

גלילה גוף

גלילה של <body>האלמנט מושבתת כאשר offcanvas והרקע שלו גלויים. השתמש data-bs-scrollבתכונה כדי לאפשר <body>גלילה.

Offcanvas עם גלילה גוף

נסה לגלול את שאר העמוד כדי לראות אפשרות זו בפעולה.

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

גלילה גוף ותפאורה

אתה יכול גם לאפשר <body>גלילה עם רקע גלוי.

רקע עם גלילה

נסה לגלול את שאר העמוד כדי לראות אפשרות זו בפעולה.

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

רקע סטטי

כאשר רקע מוגדר לסטטי, ה-offcanvas לא ייסגר בעת לחיצה מחוצה לו.

Offcanvas
אני לא אסגור אם תלחץ מחוץ לי.
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

אוף קנבס כהה

נוסף בגרסה 5.2.0

שנה את המראה של משטחי ציור עם כלי עזר כדי להתאים אותם טוב יותר להקשרים שונים כמו סרגלי ניווט כהים. כאן אנו מוסיפים .text-bg-darkל- .offcanvasand .btn-close-whiteלסטיילינג .btn-closeנכון עם offcanvas כהה. אם יש לך תפריטים נפתחים, שקול להוסיף גם .dropdown-menu-darkל- .dropdown-menu.

Offcanvas

הצב תוכן offcanvas כאן.

html 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

תגובה

נוסף בגרסה 5.2.0

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

שנה את גודל הדפדפן שלך כדי להציג את הבורר הרספונסיבי מחוץ לקנבס.
רספונסיבי מחוץ לקנבס

זהו תוכן בתוך .offcanvas-lg.

html 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

שיעורי אוף-קנבס רספונסיביים זמינים בכל נקודת שבירה.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

מיקום

אין מיקום ברירת מחדל עבור רכיבי offcanvas, אז עליך להוסיף אחת ממחלקות השינוי שלהלן.

  • .offcanvas-startממקמת offcanvas בצד שמאל של יציאת התצוגה (מוצג למעלה)
  • .offcanvas-endממקמת offcanvas בצד ימין של נקודת התצוגה
  • .offcanvas-topממקמת offcanvas בחלק העליון של יציאת התצוגה
  • .offcanvas-bottomממקם offcanvas בתחתית יציאת התצוגה

נסה את הדוגמאות העליונות, הימניות והתחתונות למטה.

חלק עליון אוף קנבס
...
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas נכון
...
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
תחתית offcanvas
...
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

נְגִישׁוּת

מכיוון שהחלונית offcanvas היא קונספטואלית דו-שיח מודאלי, הקפד להוסיף aria-labelledby="..."- בהתייחסות לכותרת offcanvas - ל .offcanvas. שים לב שאינך צריך להוסיף role="dialog"מכיוון שכבר הוספנו אותו באמצעות JavaScript.

CSS

משתנים

נוסף בגרסה 5.2.0

כחלק מגישת משתני ה-CSS המתפתחת של Bootstrap, offcanvas משתמש כעת במשתני CSS מקומיים .offcanvasעבור התאמה אישית משופרת בזמן אמת. ערכים עבור משתני ה-CSS נקבעים באמצעות Sass, כך שגם התאמה אישית של Sass עדיין נתמכת.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

משתנים Sass

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

נוֹהָג

התוסף offcanvas משתמש בכמה מחלקות ותכונות כדי להתמודד עם ההרמה הכבדה:

  • .offcanvasמסתיר את התוכן
  • .offcanvas.showמציג את התוכן
  • .offcanvas-startמסתיר את ה-offcanvas בצד שמאל
  • .offcanvas-endמסתיר את ה-offcanvas בצד ימין
  • .offcanvas-topמסתיר את ה-offcanvas בחלק העליון
  • .offcanvas-bottomמסתיר את ה-offcanvas בתחתית

הוסף לחצן ביטול עם data-bs-dismiss="offcanvas"התכונה, שמפעיל את פונקציונליות JavaScript. הקפד להשתמש <button>ברכיב איתו להתנהגות נאותה בכל המכשירים.

באמצעות תכונות נתונים

לְמַתֵג

הוסף data-bs-toggle="offcanvas"ו- data-bs-targetאו hrefלאלמנט כדי להקצות אוטומטית שליטה על אלמנט אחד מחוץ לקנבס. התכונה data-bs-targetמקבלת בורר CSS להחיל עליו את ה-offcanvas. הקפד להוסיף את המחלקה offcanvasלאלמנט offcanvas. אם תרצה שהיא תיפתח כברירת מחדל, הוסף את המחלקה הנוספת show.

לשחרר

ניתן להשיג הדחה באמצעות dataהתכונה על כפתור בתוך ה-offcanvas כפי שמוצג להלן:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

או על כפתור מחוץ ל-offcanvas באמצעות הלחצן data-bs-targetכפי שמודגם להלן:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
אמנם שתי הדרכים לביטול offcanvas נתמכות, אך זכור שביטול מחוץ ל-offcanvas אינו תואם את דפוס הדו-שיח של ARIA Authoring Practices Guide (מודאלי) . עשה זאת על אחריותך בלבד.

דרך JavaScript

הפעל באופן ידני עם:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

אפשרויות

מכיוון שניתן להעביר אפשרויות באמצעות תכונות נתונים או 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}'.

שֵׁם סוּג בְּרִירַת מֶחדָל תיאור
backdrop בוליאן או המחרוזתstatic true החל רקע על הגוף כאשר offcanvas פתוח. לחלופין, ציין staticעבור רקע אשר אינו סוגר את offcanvas כאשר לוחצים עליו.
keyboard בוליאני true סוגר את ה-offcanvas כאשר מקש Escape נלחץ.
scroll בוליאני false אפשר גלילה לגוף בזמן שה-offcanvas פתוח.

שיטות

שיטות ומעברים אסינכרוניים

כל שיטות ה-API הן אסינכרוניות ומתחילות מעבר . הם חוזרים למתקשר ברגע שהמעבר מתחיל אבל לפני שהוא מסתיים . בנוסף, תתעלם מקריאת שיטה על רכיב מעבר .

עיין בתיעוד JavaScript שלנו למידע נוסף .

מפעיל את התוכן שלך כאלמנט offcanvas. מקבל אפשרויות אופציונליות object.

אתה יכול ליצור מופע offcanvas עם הקונסטרוקטור, לדוגמה:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
שיטה תיאור
getInstance שיטה סטטית המאפשרת לך לקבל את המופע offcanvas המשויך לאלמנט DOM.
getOrCreateInstance שיטה סטטית המאפשרת לך לקבל את המופע offcanvas המשויך לרכיב DOM, או ליצור אחד חדש למקרה שהוא לא אותחל.
hide מסתיר אלמנט offcanvas. חוזר אל המתקשר לפני שהאלמנט offcanvas הוסתר בפועל (כלומר לפני hidden.bs.offcanvasשהאירוע מתרחש).
show מציג אלמנט offcanvas. חוזר למתקשר לפני שהאלמנט offcanvas הוצג בפועל (כלומר לפני shown.bs.offcanvasשהאירוע מתרחש).
toggle מחליף אלמנט offcanvas להצגה או מוסתר. חוזר אל המתקשר לפני שהאלמנט offcanvas הוצג או הוסתר בפועל (כלומר לפני שהאירוע shown.bs.offcanvasאו hidden.bs.offcanvasמתרחש).

אירועים

מחלקה offcanvas של Bootstrap חושפת כמה אירועים לחיבור לפונקציונליות offcanvas.

סוג אירוע תיאור
hide.bs.offcanvas אירוע זה מופעל מיד כאשר hideהשיטה נקראה.
hidden.bs.offcanvas אירוע זה מופעל כאשר אלמנט offcanvas הוסתר מהמשתמש (יחכה לסיום מעברי CSS).
hidePrevented.bs.offcanvas אירוע זה מופעל כאשר ה-offcanvas מוצג, הרקע שלו staticובוצע לחיצה מחוץ ל-offcanvas. האירוע מופעל גם כאשר מקש ה-Escape נלחץ keyboardוהאפשרות מוגדרת ל- false.
show.bs.offcanvas אירוע זה מופעל מיד כאשר showשיטת המופע נקראת.
shown.bs.offcanvas אירוע זה מופעל כאשר אלמנט offcanvas נעשה גלוי למשתמש (יחכה לסיום מעברי CSS). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})