Offcanvas
בנה סרגלי צד נסתרים בפרויקט שלך עבור ניווט, עגלות קניות ועוד עם כמה מחלקות ותוסף JavaScript שלנו.
איך זה עובד
Offcanvas הוא רכיב סרגל צד שניתן לשנות באמצעות JavaScript כדי להופיע מהקצה השמאלי, הימני או התחתון של נקודת התצוגה. כפתורים או עוגנים משמשים כטריגרים המחוברים לאלמנטים ספציפיים שאתה מחליף, data
ותכונות משמשות להפעלת JavaScript שלנו.
- Offcanvas חולק חלק מאותו קוד JavaScript כמו מודלים. מבחינה רעיונית, הם די דומים, אבל הם תוספים נפרדים.
- באופן דומה, כמה משתני Sass במקור עבור הסגנונות והממדים של offcanvas עוברים בירושה מהמשתנים של המודאל.
- כאשר מוצג, offcanvas כולל רקע ברירת מחדל שניתן ללחוץ עליו כדי להסתיר את offcanvas.
- בדומה למודלים, ניתן להציג רק offcanvas אחד בכל פעם.
שימו לב! בהתחשב באופן שבו CSS מטפל בהנפשות, אינך יכול להשתמש margin
או translate
על .offcanvas
אלמנט. במקום זאת, השתמש במחלקה כרכיב עטיפה עצמאי.
prefers-reduced-motion
בשאילתת המדיה. עיין
בסעיף תנועה מופחתת בתיעוד הנגישות שלנו .
דוגמאות
רכיבי Offcanvas
להלן דוגמה offcanvas שמוצגת כברירת מחדל (באמצעות .show
on .offcanvas
). Offcanvas כולל תמיכה בכותרת עם כפתור סגירה ומחלקת גוף אופציונלית לחלק ראשוני padding
. אנו ממליצים לכלול כותרות offcanvas עם פעולות דחייה במידת האפשר, או לספק פעולת דחייה מפורשת.
Offcanvas
<div class="offcanvas offcanvas-start" 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 text-reset" 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"
נדרש.
Offcanvas
<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 text-reset" 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" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
מיקום
אין מיקום ברירת מחדל עבור רכיבי offcanvas, אז עליך להוסיף אחת ממחלקות השינוי שלהלן;
.offcanvas-start
ממקמת offcanvas בצד שמאל של יציאת התצוגה (מוצג למעלה).offcanvas-end
ממקמת offcanvas בצד ימין של נקודת התצוגה.offcanvas-top
ממקמת offcanvas בחלק העליון של יציאת התצוגה.offcanvas-bottom
ממקם offcanvas בתחתית יציאת התצוגה
נסה את הדוגמאות העליונות, הימניות והתחתונות למטה.
חלק עליון אוף קנבס
<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 id="offcanvasTopLabel">Offcanvas top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Offcanvas נכון
<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 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
תחתית offcanvas
<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 text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
...
</div>
</div>
רקע
גלילה של <body>
האלמנט מושבתת כאשר offcanvas והרקע שלו גלויים. השתמש data-bs-scroll
בתכונה כדי לשנות את <body>
הגלילה data-bs-backdrop
ולהחליף את הרקע.
צבעוני עם גלילה
נסה לגלול את שאר העמוד כדי לראות אפשרות זו בפעולה.
Offcanvas עם רקע
.....
רקע עם גלילה
נסה לגלול את שאר העמוד כדי לראות אפשרות זו בפעולה.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<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" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
<button type="button" class="btn-close text-reset" 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>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>.....</p>
</div>
</div>
<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 text-reset" 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 היא קונספטואלית דו-שיח מודאלי, הקפד להוסיף aria-labelledby="..."
- בהתייחסות לכותרת offcanvas - ל .offcanvas
. שים לב שאינך צריך להוסיף role="dialog"
מכיוון שכבר הוספנו אותו באמצעות JavaScript.
סאס
משתנים
$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-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>
דרך JavaScript
הפעל באופן ידני עם:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
אפשרויות
ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-bs-
, כמו ב- data-bs-backdrop=""
.
שֵׁם | סוּג | בְּרִירַת מֶחדָל | תיאור |
---|---|---|---|
backdrop |
בוליאני | true |
החל רקע על הגוף כאשר offcanvas פתוח |
keyboard |
בוליאני | true |
סוגר את ה-offcanvas כאשר מקש Escape נלחץ |
scroll |
בוליאני | false |
אפשר גלילה לגוף כאשר offcanvas פתוח |
שיטות
שיטות ומעברים אסינכרוניים
כל שיטות ה-API הן אסינכרוניות ומתחילות מעבר . הם חוזרים למתקשר ברגע שהמעבר מתחיל אבל לפני שהוא מסתיים . בנוסף, תתעלם מקריאת שיטה על רכיב מעבר .
מפעיל את התוכן שלך כאלמנט offcanvas. מקבל אפשרויות אופציונליות object
.
אתה יכול ליצור מופע offcanvas עם הבנאי, לדוגמה:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
שיטה | תיאור |
---|---|
toggle |
מחליף אלמנט offcanvas להצגה או מוסתר. חוזר אל המתקשר לפני שהאלמנט offcanvas הוצג או הוסתר בפועל (כלומר לפני שהאירוע shown.bs.offcanvas או hidden.bs.offcanvas מתרחש). |
show |
מציג אלמנט offcanvas. חוזר אל המתקשר לפני שהאלמנט offcanvas הוצג בפועל (כלומר לפני shown.bs.offcanvas שהאירוע מתרחש). |
hide |
מסתיר אלמנט offcanvas. חוזר אל המתקשר לפני שהאלמנט offcanvas הוסתר בפועל (כלומר לפני hidden.bs.offcanvas שהאירוע מתרחש). |
getInstance |
שיטה סטטית המאפשרת לך לקבל את המופע offcanvas המשויך לאלמנט DOM |
getOrCreateInstance |
שיטה סטטית המאפשרת לך לקבל את המופע offcanvas המשויך לרכיב DOM, או ליצור אחד חדש למקרה שהוא לא אותחל |
אירועים
מחלקה offcanvas של Bootstrap חושפת כמה אירועים לחיבור לפונקציונליות offcanvas.
סוג אירוע | תיאור |
---|---|
show.bs.offcanvas |
אירוע זה מופעל מיד כאשר show שיטת המופע נקראת. |
shown.bs.offcanvas |
אירוע זה מופעל כאשר אלמנט offcanvas נעשה גלוי למשתמש (יחכה לסיום מעברי CSS). |
hide.bs.offcanvas |
אירוע זה מופעל מיד כאשר hide השיטה נקראה. |
hidden.bs.offcanvas |
אירוע זה מופעל כאשר אלמנט offcanvas הוסתר מהמשתמש (יחכה לסיום מעברי CSS). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})