Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
Check
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, górnej 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ść na offcanvas znajduje się tutaj. Tutaj możesz umieścić dowolny komponent Bootstrap lub niestandardowe elementy.
html 
<div class="offcanvas offcanvas-start show" 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" 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.
html 
<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

Przewijanie ciała

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

Offcanvas z przewijaniem ciała

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

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

Przewijanie ciała i tło

Możesz także włączyć <body>przewijanie z widocznym tłem.

Tło z przewijaniem

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

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

Tło statyczne

Gdy tło jest ustawione jako statyczne, offcanvas nie zamknie się po kliknięciu poza nim.

Offcanvas
Nie zamknę, jeśli klikniesz poza mną.
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Ciemne płótno

Dodano w wersji 5.2.0

Zmień wygląd płótna zewnętrznego za pomocą narzędzi, aby lepiej dopasować je do różnych kontekstów, takich jak ciemne paski nawigacyjne. Tutaj dodajemy .text-bg-darkdo .offcanvasi .btn-close-whitedo .btn-closeodpowiedniej stylizacji z ciemnym offcanvas. Jeśli masz listy rozwijane w obrębie, rozważ również dodanie .dropdown-menu-darkdo .dropdown-menu.

Offcanvas

Umieść tutaj zawartość offcanvas.

html 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Czuły

Dodano w wersji 5.2.0

Elastyczne klasy offcanvas ukrywają zawartość poza widocznym obszarem od określonego punktu przerwania i w dół. Powyżej tego punktu przerwania zawartość będzie zachowywać się normalnie. Na przykład .offcanvas-lgukrywa zawartość w offcanva poniżej lgpunktu przerwania, ale wyświetla zawartość powyżej lgpunktu przerwania.

Zmień rozmiar przeglądarki, aby wyświetlić przełącznik responsywny offcanvas.
Responsywne płótno

To jest treść w .offcanvas-lg.

html 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Dla każdego punktu przerwania dostępne są responsywne klasy offcanvas.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

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
...
html 
<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas prawo
...
html 
<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Dół Offcanvas
...
html 
<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </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ż już dodajemy je za pomocą JavaScript.

CSS

Zmienne

Dodano w wersji 5.2.0

W ramach ewoluującego podejścia Bootstrap do zmiennych CSS, offcanvas używa teraz lokalnych zmiennych CSS w .offcanvascelu udoskonalenia dostosowywania w czasie rzeczywistym. Wartości zmiennych CSS są ustawiane przez Sass, więc dostosowywanie Sass jest nadal obsługiwane.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Zmienne Sassa

$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 podnoszenia ciężkich przedmiotów:

  • .offcanvasukrywa treść
  • .offcanvas.showpokazuje treść
  • .offcanvas-startukrywa offcanvas po lewej stronie
  • .offcanvas-endukrywa offcanvas po prawej stronie
  • .offcanvas-topukrywa offcanvas na górze
  • .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 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 offcanvas, należy pamiętać, że odrzucanie z zewnątrz offcanva nie jest zgodne ze wzorcem okna dialogowego ARIA Authoring Practices Guide (modalny) . Zrób to na własne ryzyko.

Przez JavaScript

Włącz ręcznie za pomocą:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

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

Nazwa Rodzaj Domyślna Opis
backdrop wartość logiczna lub ciągstatic true Nałóż tło na ciało, gdy płótno jest otwarte. Możesz też określić statictło, które nie zamyka kanwy po kliknięciu.
keyboard logiczne true Zamyka obszar poza kanwą po naciśnięciu klawisza Escape.
scroll logiczne false Zezwalaj na przewijanie treści, gdy otwarte jest pole 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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
metoda Opis
getInstance Metoda statyczna , która pozwala uzyskać instancję offcanvas skojarzoną 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.
hide Ukrywa element offcanvas. Wraca do wywołującego, zanim element offcanvas został faktycznie ukryty (tj. przed hidden.bs.offcanvaswystąpieniem zdarzenia).
show Pokazuje element offcanvas. Powraca do wywołującego, zanim element offcanvas został faktycznie wyświetlony (tj. przed shown.bs.offcanvaswystąpieniem zdarzenia).
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

Wydarzenia

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

Typ wydarzenia Opis
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).
hidePrevented.bs.offcanvas To zdarzenie jest uruchamiane, gdy pokazywane jest offcanvas, jego tło jest statici wykonywane jest kliknięcie poza offcanvas. Zdarzenie jest również wywoływane po naciśnięciu klawisza Escape i ustawieniu keyboardopcji na false.
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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})