הִתמוֹטְטוּת

איך זה עובד

התוסף ל-Clapse JavaScript משמש להצגה והסתרה של תוכן. לחצנים או עוגנים משמשים כטריגרים שממופים לאלמנטים ספציפיים שאתה מחליף. כיווץ של אלמנט יגרום להנפשה heightמהערך הנוכחי שלו ל- 0. בהתחשב באופן שבו CSS מטפל בהנפשות, אינך יכול להשתמש paddingבאלמנט .collapse. במקום זאת, השתמש במחלקה כרכיב עטיפה עצמאי.

דוגמא

לחץ על הלחצנים למטה כדי להציג ולהסתיר אלמנט נוסף באמצעות שינויים בכיתה:

• .collapseמסתיר תוכן
• .collapsingמוחל במהלך מעברים
• .collapse.showמציג תוכן

באופן כללי, אנו ממליצים להשתמש בלחצן עם data-bs-targetהתכונה. אמנם לא מומלץ מנקודת מבט סמנטית, אבל אתה יכול גם להשתמש בקישור עם hrefהתכונה (ו-a role="button"). בשני המקרים, data-bs-toggle="collapse"נדרש.

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

אופקי

תוסף הקריסה תומך גם בקריסה אופקית. הוסף את .collapse-horizontalמחלקת השינוי כדי להעביר את widthבמקום heightולהגדיר a widthעל אלמנט הבן המיידי. אל תהסס לכתוב Sass מותאם אישית משלך, להשתמש בסגנונות מוטבעים או להשתמש בכלי השירות לרוחב שלנו .

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

מטרות מרובות

A <button>או <a>יכול להציג ולהסתיר אלמנטים מרובים על ידי הפניה אליהם עם בורר בתכונה hrefאו שלו. data-bs-targetריבוי <button>או <a>יכול להציג ולהסתיר אלמנט אם כל אחד מהם מפנה אליו עם התכונה hrefאו שלוdata-bs-target

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

נְגִישׁוּת

הקפד להוסיף aria-expandedלאלמנט הבקרה. תכונה זו מעבירה באופן מפורש את המצב הנוכחי של האלמנט הניתן לקריסה הקשור לבקרה לקוראי מסך ולטכנולוגיות מסייעות דומות. אם האלמנט המתקפל נסגר כברירת מחדל, התכונה ברכיב הבקרה צריכה להיות בעלת ערך של aria-expanded="false". אם הגדרת את הרכיב הניתן לכיווץ להיות פתוח כברירת מחדל באמצעות showהמחלקה, הגדר aria-expanded="true"על הפקד במקום זאת. התוסף יחליף אוטומטית את התכונה הזו בפקד בהתבסס על פתיחה או סגירה של האלמנט הניתן לקריסה (באמצעות JavaScript, או בגלל שהמשתמש הפעיל אלמנט בקרה אחר שקשור גם הוא לאותו אלמנט מתקפל). אם רכיב ה-HTML של רכיב הבקרה אינו כפתור (למשל, <a>או או <div>), התכונהrole="button"יש להוסיף לאלמנט.

אם רכיב הבקרה שלך מכוון לרכיב אחד שניתן להתכווץ - כלומר data-bs-targetהתכונה מכוונת idלבורר - עליך להוסיף את aria-controlsהתכונה לרכיב הבקרה, המכילה את התכונה של idהרכיב המתכווץ. קוראי מסך מודרניים וטכנולוגיות מסייעות דומות עושים שימוש בתכונה זו כדי לספק למשתמשים קיצורי דרך נוספים כדי לנווט ישירות אל הרכיב הניתן לקריסה עצמו.

שים לב שהיישום הנוכחי של Bootstrap אינו מכסה את אינטראקציות המקלדת האופציונליות השונות המתוארות ב- ARIA Authoring Practices Guide דפוס האקורדיון - תצטרך לכלול את אלה בעצמך עם JavaScript מותאם אישית.

סאס

משתנים

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

שיעורים

ניתן למצוא כיתות מעבר כיווץ scss/_transitions.scssמכיוון שהן מחולקות על פני מספר רכיבים (התמוטטות ואקורדיון).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

נוֹהָג

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

• .collapseמסתיר את התוכן
• .collapse.showמציג את התוכן
• .collapsingמתווסף כאשר המעבר מתחיל, ומוסר כאשר הוא מסתיים

ניתן למצוא שיעורים אלה ב _transitions.scss.

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

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

כדי להוסיף ניהול קבוצתי דמוי אקורדיון לאזור מתקפל, הוסף את תכונת הנתונים data-bs-parent="#selector". עיין בדף האקורדיון למידע נוסף.

דרך JavaScript

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

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

אפשרויות

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

שיטות

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

אתה יכול ליצור מופע כיווץ עם הבנאי, לדוגמה:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

אירועים

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

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})