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.

Treść na 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

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.

...

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

...

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

...

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

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

.....

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">Backdroped 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;

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

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.

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 kodu 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.offcanvas`lub ).`hidden.bs.offcanvas`
`show`	Pokazuje element offcanvas. Powraca do wywołującego, zanim element offcanvas został faktycznie wyświetlony (tj. przed `shown.bs.offcanvas`wystąpieniem zdarzenia).
`hide`	Ukrywa element offcanvas. Powraca do wywołującego, zanim element offcanvas został faktycznie ukryty (tj. przed `hidden.bs.offcanvas`wystą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 `show`wywoł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 `hide`wywoł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...
})

Offcanvas

Jak to działa

Przykłady

Komponenty Offcanvas

Offcanvas

Demo na żywo

Offcanvas

Umieszczenie

Top na płótnie

Offcanvas prawo

Dół Offcanvas

Zasłona

Kolorowe z przewijaniem

Offcanvas z tłem

Tło z przewijaniem

Dostępność

Sass

Zmienne

Stosowanie

Poprzez atrybuty danych

Przez JavaScript

Opcje

Metody

Metody asynchroniczne i przejścia

Wydarzenia