Collapse (Polski)

By admin on

Zmień widoczność treści w swoim projekcie za pomocą kilku klas i naszych wtyczek JavaScript.

Przykład

Kliknij poniższe przyciski, aby pokazać lub ukryć inny element poprzez zmianę klasy:

  • .collapse ukrywa zawartość
  • .collapsing jest stosowany podczas przejść

    • .

  • .collapse.show pokazuje zawartość

Możesz użyć linku z atrybutem href, lub przycisku z atrybutem data-target. W obu przypadkach wymagany jest atrybut data-toggle="collapse".

Link with href Button with data-target

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Multiple targets

A <button> lub <a> może pokazywać i ukrywać wiele elementów, odwołując się do nich za pomocą selektora JQuery w swoim atrybucie href lub data-target.Wiele elementów <button> lub <a> może pokazywać i ukrywać element, jeśli każdy z nich odwołuje się do niego za pomocą swojego atrybutu href lub data-target atrybut

Przełącz pierwszy element Przełącz drugi element Przełącz oba elementy

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Przykład akordeonu

Używając komponentu karty, można rozszerzyć domyślne zachowanie zwijania, aby utworzyć akordeon.

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. W tym roku, w tym roku, w tym roku, w tym roku. W tym roku, kiedy to na rynku pojawiło się już ponad 100 tysięcy osób, a w tym roku na rynku pojawiło się ponad 100 tysięcy osób, a w tym roku na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób. Ad vegan excepteur butcher vice lomo. Legginsy occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. W tym roku, w tym roku, w tym roku, w tym roku. W tym roku, kiedy to na rynku pojawiło się już ponad 100 tysięcy osób, a w tym roku na rynku pojawiło się ponad 100 tysięcy osób, a w tym roku na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób. Ad vegan excepteur butcher vice lomo. Legginsy occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. W tym roku, w tym roku, w tym roku, w tym roku. W tym roku, kiedy to na rynku pojawiło się już ponad 100 tysięcy osób, a w tym roku na rynku pojawiło się ponad 100 tysięcy osób, a w tym roku na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób, a w tym momencie na rynku pojawiło się ponad 100 tysięcy osób. Ad vegan excepteur butcher vice lomo. Legginsy occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Dostępność

Pamiętaj, aby dodać aria-expanded do elementu kontrolnego. Ten atrybut jednoznacznie przekazuje aktualny stan elementu składanego powiązanego z kontrolką do czytników ekranu i podobnych technologii wspomagających. Jeśli element składany jest domyślnie zamknięty, atrybut elementu sterującego powinien mieć wartość aria-expanded="false". Jeśli ustawiłeś element collapsible, aby był domyślnie otwarty za pomocą klasy show, ustaw aria-expanded="true" na kontrolce zamiast tego. Wtyczka automatycznie przełączy ten atrybut na kontrolę w oparciu o to, czy element zwijany został otwarty lub zamknięty (za pomocą JavaScript lub dlatego, że użytkownik wywołał inny element kontrolny również powiązany z tym samym elementem collapsbile). Jeżeli element HTML elementu sterującego nie jest przyciskiem (np, <a> lub <div>), atrybut role="button" powinien zostać dodany do elementu.

Jeśli Twój element kontrolny jest skierowany na pojedynczy element collapsible – tj. atrybut data-target wskazuje na selektor id – powinieneś dodać atrybut aria-controls do elementu kontrolnego, zawierający id elementu collapsible. Nowoczesne czytniki ekranu i podobne technologie wspomagające wykorzystują ten atrybut, aby zapewnić użytkownikom dodatkowe skróty do nawigacji bezpośrednio do samego elementu collapsible.

Zauważ, że obecna implementacja Bootstrapa nie obejmuje różnych interakcji klawiaturowych opisanych we wzorcu akordeonowym WAI-ARIA Authoring Practices 1.1 – będziesz musiał włączyć je samodzielnie za pomocą niestandardowego JavaScript.

Użytkowanie

Wtyczka zwijania wykorzystuje kilka klas do obsługi ciężkich zadań:

  • .collapse ukrywa zawartość
  • .collapse.show pokazuje zawartość
  • .collapsing jest dodawany, gdy rozpoczyna się przejście, i usuwany, gdy się kończy

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

Via atrybuty danych

Wystarczy dodać data-toggle="collapse" oraz data-target do elementu, aby automatycznie przypisać kontrolę nad jednym lub większą liczbą elementów collapsible. Atrybut data-target akceptuje selektor CSS, do którego należy zastosować zwijanie. Pamiętaj, aby dodać klasę collapse do elementu collapsible. Jeśli chcesz, aby element był domyślnie otwarty, dodaj dodatkową klasę show.

Aby dodać zarządzanie grupami w stylu akordeonu do zwijanego obszaru, dodaj atrybut danych data-parent="#selector". Odwołaj się do demo, aby zobaczyć to w akcji.

Przez JavaScript

Włącz ręcznie za pomocą:

$('.collapse').collapse()

Opcje

Opcje mogą być przekazywane przez atrybuty danych lub JavaScript. W przypadku atrybutów danych należy dodać nazwę opcji do data-, jak w data-parent="".

.

Nazwa Typ Default Opis
parent selektor | obiekt jQuery | element DOM false Jeśli podano parent, to wszystkie elementy składane pod określonym rodzicem zostaną zamknięte, gdy ten element składany zostanie pokazany. (podobne do tradycyjnego zachowania akordeonu – jest to zależne od klasy card). Atrybut ten musi być ustawiony na docelowym obszarze collapsible.
toggle boolean true Zapala element collapsible przy wywołaniu

Metody

Metody asynchroniczne i przejścia

Wszystkie metody API są asynchroniczne i rozpoczynają przejście. Powracają one do wywołującego zaraz po rozpoczęciu przejścia, ale przed jego zakończeniem. Ponadto wywołanie metody na elemencie przechodzącym zostanie zignorowane.

Zobacz naszą dokumentację JavaScript, aby uzyskać więcej informacji.

.collapse(options)

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

$('#myCollapsible').collapse({ toggle: false})

.collapse('toggle')

Toggles a collapsible element to shown or hidden. Zwraca się do wywołującego zanim collapsible element został faktycznie pokazany lub ukryty (tj. przed wystąpieniem zdarzenia shown.bs.collapse lub hidden.bs.collapse).

.collapse('show')

Pokazuje collapsible element. Zwraca się do wywołującego zanim element składany zostanie faktycznie pokazany (tj. zanim wystąpi zdarzenie shown.bs.collapse).

.collapse('hide')

Ukrywa element składany. Zwraca się do wywołującego, zanim element składany zostanie faktycznie ukryty (tj. zanim wystąpi zdarzenie hidden.bs.collapse).

.collapse('dispose')

Zniszcza collapse elementu.

Zdarzenia

Klasa collapse w Bootstrapie udostępnia kilka zdarzeń umożliwiających podpięcie się do funkcjonalności collapse.

Event Type Description
show.bs.collapse Ten event wystrzeliwuje natychmiast, gdy zostanie wywołana metoda instancji show.
shown.bs.collapse To zdarzenie jest wywoływane, gdy element collapse stał się widoczny dla użytkownika (będzie czekać na zakończenie przejść CSS).
hide.bs.collapse To zdarzenie jest wywoływane natychmiast, gdy metoda hide została wywołana.
hidden.bs.collapse To zdarzenie jest wywoływane, gdy element collapse został ukryty przed użytkownikiem (będzie czekać na zakończenie przejść CSS). 
$('#myCollapsible').on('hidden.bs.collapse', function () { // do something…})

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *