Upadek

Jak to działa

Wtyczka scalania JavaScript służy do pokazywania i ukrywania treści. Przyciski lub kotwice są używane jako wyzwalacze, które są mapowane na określone elementy, które przełączasz. Zwinięcie elementu spowoduje animację heightz jego bieżącej wartości do 0. Biorąc pod uwagę, jak CSS obsługuje animacje, nie możesz użyć paddingna .collapseelemencie. Zamiast tego użyj klasy jako niezależnego elementu opakowującego.

Przykład

Kliknij poniższe przyciski, aby pokazać i ukryć inny element poprzez zmiany klasy:

• .collapseukrywa treść
• .collapsingjest stosowany podczas przejść
• .collapse.showpokazuje treść

Generalnie zalecamy używanie przycisku z data-bs-targetatrybutem. Chociaż nie jest to zalecane z semantycznego punktu widzenia, możesz również użyć linku z hrefatrybutem (i role="button"). W obu przypadkach data-bs-toggle="collapse"jest to wymagane.

<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>

Poziomy

Wtyczka zwijania obsługuje również zwijanie w poziomie. Dodaj .collapse-horizontalklasę modyfikatora do przejścia widthzamiast heighti ustaw a widthna bezpośrednim elemencie podrzędnym. Zachęcamy do napisania własnego niestandardowego Sassa, używania stylów wbudowanych lub korzystania z naszych narzędzi szerokości .

<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>

Wiele celów

A <button>lub <a>może pokazywać i ukrywać wiele elementów, odwołując się do nich za pomocą selektora w jego atrybucie hreflub . data-bs-targetWiele <button>lub <a>może pokazywać i ukrywać element, jeśli każdy z nich odwołuje się do niego za pomocą swojego atrybutu hreflubdata-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>

Dostępność

Pamiętaj, aby dodać aria-expandeddo elementu kontrolnego. Ten atrybut jawnie przekazuje bieżący stan zwijanego elementu powiązanego z kontrolką z czytnikami ekranu i podobnymi technologiami pomocniczymi. Jeśli zwijany element jest domyślnie zamknięty, atrybut elementu sterującego powinien mieć wartość aria-expanded="false". Jeśli ustawisz zwijany element, aby był domyślnie otwarty przy użyciu showklasy, aria-expanded="true"zamiast tego ustaw kontrolkę. Wtyczka automatycznie przełączy ten atrybut w kontrolce na podstawie tego, czy zwijalny element został otwarty lub zamknięty (za pomocą JavaScript lub ponieważ użytkownik wyzwolił inny element sterujący również powiązany z tym samym zwijanym elementem). Jeśli element HTML elementu kontrolnego nie jest przyciskiem (np. an <a>lub <div>), atrybutrole="button"należy dodać do elementu.

Jeśli Twój element kontrolny jest skierowany na pojedynczy zwijalny element – ​​tj. data-bs-targetatrybut wskazuje na idselektor – powinieneś dodać aria-controlsatrybut do elementu kontrolnego zawierającego idelement zwijalny. Nowoczesne czytniki ekranu i podobne technologie pomocnicze wykorzystują ten atrybut, aby zapewnić użytkownikom dodatkowe skróty umożliwiające nawigację bezpośrednio do samego zwijanego elementu.

Zwróć uwagę, że obecna implementacja Bootstrap nie obejmuje różnych opcjonalnych interakcji klawiatury opisanych we wzorcu akordeonowym ARIA Authoring Practices Guide — musisz je dołączyć samodzielnie za pomocą niestandardowego kodu JavaScript.

Sass

Zmienne

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

Klasy

Klasy przejść można znaleźć w Collapse, scss/_transitions.scssponieważ są one współdzielone przez wiele komponentów (collapse i akordeon).

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

Stosowanie

Wtyczka zwijania wykorzystuje kilka klas do obsługi podnoszenia ciężkich przedmiotów:

• .collapseukrywa treść
• .collapse.showpokazuje treść
• .collapsingjest dodawany po rozpoczęciu przejścia i usuwany po jego zakończeniu

Klasy te można znaleźć w _transitions.scss.

Poprzez atrybuty danych

Wystarczy dodać data-bs-toggle="collapse"i a data-bs-targetdo elementu, aby automatycznie przypisać kontrolę nad jednym lub większą liczbą zwijanych elementów. data-bs-targetAtrybut akceptuje selektor CSS, do którego ma zostać zastosowane zwinięcie . Pamiętaj, aby dodać klasę collapsedo zwijanego elementu. Jeśli chcesz, aby była domyślnie otwarta, dodaj dodatkowe zajęcia show.

Aby dodać zarządzanie grupami w stylu harmonijki do zwijanego obszaru, dodaj atrybut data data-bs-parent="#selector". Więcej informacji znajdziesz na stronie akordeonu .

Przez JavaScript

Włącz ręcznie za pomocą:

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

Opcje

Ponieważ opcje mogą być przekazywane przez atrybuty danych lub JavaScript, możesz dołączyć nazwę opcji do data-bs-, jak w data-bs-animation="{value}". Pamiętaj, aby zmienić typ wielkości liter w nazwie opcji z „ camelCase ” na „ kebab-case ” podczas przekazywania opcji przez atrybuty danych. Na przykład użyj data-bs-custom-class="beautifier"zamiast data-bs-customClass="beautifier".

Od wersji Bootstrap 5.2.0 wszystkie komponenty obsługują eksperymentalny atrybut zarezerwowanych danych data-bs-config, który może zawierać prostą konfigurację komponentu w postaci ciągu JSON. Gdy element ma atrybuty data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", ostateczną titlewartością będzie, 456a oddzielne atrybuty danych zastąpią wartości podane w data-bs-config. Ponadto istniejące atrybuty danych mogą zawierać wartości JSON, takie jak data-bs-delay='{"show":0,"hide":150}'.

Metody

Aktywuje zawartość jako zwijany element. Akceptuje opcjonalne opcje object.

Możesz utworzyć instancję zwinięcia za pomocą konstruktora, na przykład:

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

Wydarzenia

Klasa zwijania Bootstrap udostępnia kilka zdarzeń umożliwiających podłączenie do funkcji zwijania.

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