Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
in English

Offcanvas

Wbuduj w swój projekt ukryte paski boczne do nawigacji, koszyków na zakupy i nie tylko dzięki kilku klasom i naszej wtyczce JavaScript.

Na tej stronie

Jak to działa

Offcanvas to komponent paska bocznego, który można przełączać za pomocą JavaScript, aby pojawiał się z lewej, prawej lub dolnej krawędzi obszaru roboczego. Przyciski lub kotwice są używane jako wyzwalacze, które są dołączone do określonych elementów, które przełączasz, a dataatrybuty są używane do wywoływania naszego JavaScript.

  • Offcanvas udostępnia niektóre z tego samego kodu JavaScript, co modalne. Koncepcyjnie są one dość podobne, ale są to osobne wtyczki.
  • Podobnie, niektóre zmienne źródłowe Sassa dla stylów i wymiarów offcanvas są dziedziczone ze zmiennych modalnych.
  • Po wyświetleniu offcanvas zawiera domyślne tło, które można kliknąć, aby ukryć offcanvas.
  • Podobnie jak w przypadku modów, naraz może być wyświetlany tylko jeden obraz poza kanwą.

Heads-up! Biorąc pod uwagę, jak CSS obsługuje animacje, nie możesz używać marginani translatena .offcanvaselemencie. Zamiast tego użyj klasy jako niezależnego elementu opakowującego.

Efekt animacji tego komponentu zależy od prefers-reduced-motionzapytania o media. Zobacz zmniejszoną sekcję ruchu w naszej dokumentacji ułatwień dostępu .

Przykłady

Komponenty Offcanvas

Poniżej znajduje się przykład offcanvas, który jest wyświetlany domyślnie (przez .showon .offcanvas). Offcanvas zawiera obsługę nagłówka z przyciskiem zamykania i opcjonalną klasę treści dla niektórych początkowych padding. Sugerujemy, aby w miarę możliwości dołączać nagłówki offcanvas do działań odrzucających lub podać wyraźne działanie odrzucające.

Offcanvas
Treść dla offcanvas znajduje się tutaj. Tutaj możesz umieścić dowolny komponent Bootstrap lub niestandardowe elementy. 
<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>

Demo na żywo

Użyj poniższych przycisków, aby pokazać i ukryć element offcanvas za pomocą JavaScript, który przełącza .showklasę na element z .offcanvasklasą.

  • .offcanvasukrywa zawartość (domyślnie)
  • .offcanvas.showpokazuje treść

Możesz użyć linku z hrefatrybutem lub przycisku z data-bs-targetatrybutem. W obu przypadkach data-bs-toggle="offcanvas"jest to wymagane.

Połącz z href
Offcanvas
Jakiś tekst jako symbol zastępczy. W prawdziwym życiu możesz mieć wybrane przez siebie elementy. Polubienie, tekst, obrazy, listy itp. 
<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>

Umieszczenie

Nie ma domyślnego rozmieszczenia komponentów offcanvas, więc musisz dodać jedną z poniższych klas modyfikatorów;

  • .offcanvas-startumieszcza poza kanwą po lewej stronie rzutni (pokazane powyżej)
  • .offcanvas-endumieszcza poza płótnem po prawej stronie okna widokowego
  • .offcanvas-topumieszcza płótno poza płótnem na górze okna widokowego
  • .offcanvas-bottomumieszcza poza płótnem na dole okna widokowego

Wypróbuj poniższe przykłady z góry, z prawej i z dołu.

Top na płótnie
... 
<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 prawo
... 
<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>
Dół 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>

Zasłona

Przewijanie <body>elementu jest wyłączone, gdy widoczny jest offcanvas i jego tło. Użyj data-bs-scrollatrybutu, aby przełączać <body>przewijanie i data-bs-backdropprzełączać tło.

Kolorowe z przewijaniem

Spróbuj przewinąć resztę strony, aby zobaczyć tę opcję w akcji.

Offcanvas z tłem

.....

Tło z przewijaniem

Spróbuj przewinąć resztę strony, aby zobaczyć tę opcję w akcji.

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

Dostępność

Ponieważ panel offcanvas jest koncepcyjnie modalnym oknem dialogowym, pamiętaj, aby dodać aria-labelledby="..."— odwołując się do tytułu offcanvas — do .offcanvas. Pamiętaj, że nie musisz dodawać role="dialog", ponieważ dodajemy je już za pomocą JavaScript.

Sass

Zmienne

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

Stosowanie

Wtyczka offcanvas wykorzystuje kilka klas i atrybutów do obsługi ciężkiego podnoszenia:

  • .offcanvasukrywa treść
  • .offcanvas.showpokazuje treść
  • .offcanvas-startukrywa offcanvas po lewej stronie
  • .offcanvas-endukrywa offcanvas po prawej stronie
  • .offcanvas-bottomukrywa offcanvas na dole

Dodaj przycisk odrzucenia z data-bs-dismiss="offcanvas"atrybutem, który uruchamia funkcję JavaScript. Upewnij się, że używasz z <button>nim elementu, aby zapewnić prawidłowe działanie na wszystkich urządzeniach.

Poprzez atrybuty danych

Przełącznik

Dodaj data-bs-toggle="offcanvas"i a data-bs-targetlub hrefdo elementu, aby automatycznie przypisać kontrolę nad jednym elementem offcanvas. data-bs-targetAtrybut akceptuje selektor CSS, do którego można zastosować offcanvas . Pamiętaj, aby dodać klasę offcanvasdo elementu offcanvas. Jeśli chcesz, aby była domyślnie otwarta, dodaj dodatkowe zajęcia show.

Odrzucać

Zwolnienie można osiągnąć za pomocą dataatrybutu na przycisku w offcanvas , jak pokazano poniżej:

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

lub na przycisku poza offcanvas , data-bs-targetjak pokazano poniżej:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Chociaż obsługiwane są oba sposoby odrzucania kanwy poza kanwą, pamiętaj, że odrzucanie spoza kanwy nie jest zgodne z wzorcem projektowania modalnego okna dialogowego WAI-ARIA . Zrób to na własne ryzyko.

Przez JavaScript

Włącz ręcznie za pomocą:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-bs-, jak w data-bs-backdrop="".

Nazwa Rodzaj Domyślna Opis
backdrop logiczne true Zastosuj tło na ciele, gdy offcanvas jest otwarty
keyboard logiczne true Zamyka obszar poza kanwą po naciśnięciu klawisza Escape
scroll logiczne false Zezwalaj na przewijanie treści, gdy otwarte jest offcanvas

Metody

Metody asynchroniczne i przejścia

Wszystkie metody API są asynchroniczne i rozpoczynają przejście . Wracają do rozmówcy zaraz po rozpoczęciu przejścia, ale przed jego zakończeniem . Ponadto wywołanie metody na składniku przechodzącym zostanie zignorowane .

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

Aktywuje Twoje treści jako element offcanvas. Akceptuje opcjonalne opcje object.

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

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
metoda Opis
toggle Przełącza element poza kanwą do pokazywania lub ukrywania. Wraca do wywołującego, zanim element offcanvas został faktycznie pokazany lub ukryty (tj. przed wystąpieniem zdarzenia shown.bs.offcanvaslub ).hidden.bs.offcanvas
show Pokazuje element offcanvas. Powraca do wywołującego, zanim element offcanvas został faktycznie wyświetlony (tj. przed shown.bs.offcanvaswystąpieniem zdarzenia).
hide Ukrywa element offcanvas. Powraca do wywołującego, zanim element offcanvas został faktycznie ukryty (tj. przed hidden.bs.offcanvaswystąpieniem zdarzenia).
getInstance Metoda statyczna , która pozwala uzyskać instancję offcanvas powiązaną z elementem DOM
getOrCreateInstance Metoda statyczna , która pozwala uzyskać instancję offcanvas skojarzoną z elementem DOM lub utworzyć nową w przypadku, gdy nie została zainicjowana

Wydarzenia

Klasa Bootstrap offcanvas udostępnia kilka zdarzeń umożliwiających podłączenie do funkcjonalności offcanvas.

Typ wydarzenia Opis
show.bs.offcanvas To zdarzenie jest wyzwalane natychmiast po showwywołaniu metody wystąpienia.
shown.bs.offcanvas To zdarzenie jest uruchamiane, gdy element offcanvas został udostępniony użytkownikowi (poczeka na zakończenie przejścia CSS).
hide.bs.offcanvas To zdarzenie jest wywoływane natychmiast po hidewywołaniu metody.
hidden.bs.offcanvas To zdarzenie jest uruchamiane, gdy element offcanvas został ukryty przed użytkownikiem (poczeka na zakończenie przejścia CSS). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})