Offcanvas

Ngawangun sidebars disumputkeun kana proyék anjeun pikeun navigasi, carts balanja, sarta leuwih mibanda sababaraha kelas jeung plugin JavaScript kami.

Dina kaca ieu

Kumaha gawéna

Offcanvas mangrupakeun komponén sidebar nu bisa toggled via JavaScript mun nembongan ti kénca, katuhu, luhur, atawa ujung handap viewport nu. Tombol atawa jangkar dipaké salaku pemicu nu napel elemen husus Anjeun toggle, sarta dataatribut dipaké pikeun nelepon JavaScript urang.

Offcanvas ngabagi sababaraha kode JavaScript anu sami sareng modals. Conceptually, aranjeunna rada sarupa, tapi aranjeunna plugins misah.
Nya kitu, sababaraha sumber variabel Sass pikeun gaya sareng dimensi offcanvas diwariskeun tina variabel modal.
Nalika ditingalikeun, offcanvas kalebet latar tukang standar anu tiasa diklik pikeun nyumputkeun offcanvas.
Sarupa jeung modals, ngan hiji offcanvas bisa ditémbongkeun dina hiji waktu.

Mastaka tegak! Dibikeun kumaha CSS handles animasi, anjeun teu bisa make marginatawa translatedina .offcanvasunsur. Gantina, make kelas salaku unsur wrapping bebas.

Pangaruh animasi tina komponén ieu gumantung kana prefers-reduced-motionpamundut média. Tempo bagian gerak ngurangan tina dokuméntasi aksés kami .

Contona

Komponén offcanvas

Di handap ieu conto offcanvas anu dipidangkeun sacara standar (via .showon .offcanvas). Offcanvas kalebet dukungan pikeun header kalayan tombol tutup sareng kelas awak opsional pikeun sababaraha padding. Kami nyarankeun yén anjeun ngalebetkeun header offcanvas sareng tindakan ngaleungitkeun sabisana, atanapi nyayogikeun tindakan anu jelas.

Eusi pikeun offcanvas angkat ka dieu. Anjeun tiasa nempatkeun naon waé komponén Bootstrap atanapi elemen khusus di dieu.

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>

Live demo

Anggo tombol di handap pikeun nunjukkeun sareng nyumputkeun unsur offcanvas via JavaScript anu ngagentos .showkelas dina unsur sareng .offcanvaskelas.

.offcanvasnyumputkeun eusi (standar)
.offcanvas.shownembongkeun eusi

Anjeun tiasa nganggo tautan sareng hrefatribut, atanapi tombol sareng data-bs-targetatribut. Dina duanana kasus, éta data-bs-toggle="offcanvas"diperlukeun.

Link sareng href

Sababaraha téks salaku pananda tempat. Dina kahirupan nyata anjeun tiasa gaduh elemen anu anjeun pilih. Siga, téks, gambar, daptar, jsb.

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>

Awak ngagulung

Ngagulung <body>unsur dinonaktipkeun nalika offcanvas sareng latar na katingali. Anggo data-bs-scrollatribut pikeun ngaktipkeun <body>ngagulung.

Coba gulung sesa kaca pikeun ningali pilihan ieu dina aksi.

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>

Ngagulung awak sareng latar

Anjeun oge bisa ngaktipkeun <body>ngagulung ku backdrop katempo.

Coba gulung sesa kaca pikeun ningali pilihan ieu dina aksi.

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>

Latar statik

Nalika backdrop disetel ka statik, offcanvas moal nutup nalika ngaklik luar.

Kuring moal nutup lamun klik luar kuring.

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>

Kanvas poék

Ditambahkeun dina v5.2.0

Robah penampilan offcanvases sareng utilitas supados langkung cocog sareng kontéks anu béda sapertos navbar poék. Di dieu urang tambahkeun .text-bg-darkkana .offcanvassareng .btn-close-whitepikeun .btn-closegaya anu pas sareng offcanvas poék. Upami Anjeun gaduh dropdowns dina, mertimbangkeun ogé nambahkeun .dropdown-menu-darkkana .dropdown-menu.

Teundeun eusi offcanvas di dieu.

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>

Responsif

Ditambahkeun dina v5.2.0

Kelas offcanvas responsif nyumputkeun eusi di luar viewport ti breakpoint dieusian tur handap. Luhureun breakpoint éta, eusi dina bakal kalakuanana saperti biasa. Contona, .offcanvas-lgnyumputkeun eusi dina offcanvas handap lgbreakpoint, tapi nembongkeun eusi luhureun lgbreakpoint nu.

Ganti ukuran panyungsi anjeun pikeun nunjukkeun toggle offcanvas responsif.

Ieu eusi dina hiji .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>

Kelas offcanvas responsif sadia di sakuliah pikeun tiap breakpoint.

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

panempatan

Henteu aya panempatan standar pikeun komponén offcanvas, janten anjeun kedah nambihan salah sahiji kelas modifier di handap.

.offcanvas-startnempatkeun offcanvas di kénca viewport (ditémbongkeun di luhur)
.offcanvas-endnempatkeun offcanvas di sisi katuhu viewport
.offcanvas-topnempatkeun offcanvas dina luhureun viewport nu
.offcanvas-bottomnempatkeun offcanvas dina handapeun viewport

Coba conto luhur, katuhu, sareng handap di handap.

...

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>

...

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>

...

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>

Aksesibilitas

Kusabab panel offcanvas sacara konseptual mangrupa dialog modal, pastikeun pikeun nambahkeun aria-labelledby="..."—ngarujuk kana judul offcanvas—ka .offcanvas. Catet yén anjeun henteu kedah nambihan role="dialog"sabab kami parantos nambihanana via JavaScript.

CSS

Variabel

Ditambahkeun dina v5.2.0

Salaku bagian tina pendekatan variabel CSS Bootstrap anu ngembang, offcanvas ayeuna nganggo variabel CSS lokal .offcanvaspikeun kustomisasi sacara real-time anu ditingkatkeun. Nilai pikeun variabel CSS diatur via Sass, jadi kustomisasi Sass masih dirojong, teuing.

  --#{$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};

variabel Sass

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

Pamakéan

Plugin offcanvas ngagunakeun sababaraha kelas sareng atribut pikeun nanganan angkat beurat:

.offcanvasnyumputkeun eusi
.offcanvas.shownembongkeun eusi
.offcanvas-startnyumputkeun offcanvas di kénca
.offcanvas-endnyumputkeun offcanvas di katuhu
.offcanvas-topnyumputkeun offcanvas di luhur
.offcanvas-bottomnyumputkeun offcanvas di handap

Tambahkeun tombol ngilangkeun kalawan data-bs-dismiss="offcanvas"atribut, nu micu fungsionalitas JavaScript. Pastikeun ngagunakeun <button>unsur éta pikeun paripolah anu leres dina sadaya alat.

Via atribut data

Togél

Tambihkeun data-bs-toggle="offcanvas"sareng a data-bs-targetatanapi hrefkana unsur pikeun otomatis netepkeun kadali hiji unsur offcanvas. Atribut data-bs-targetnampi pamilih CSS pikeun nerapkeun offcanvas. Pastikeun pikeun nambahkeun kelas offcanvaska elemen offcanvas. Upami anjeun hoyong kabuka standar, tambahkeun kelas tambahan show.

Ngaleungitkeun

PHK tiasa dihontal ku dataatribut dina tombol dina offcanvas sapertos anu dipidangkeun di handap ieu:

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

atawa dina tombol di luar offcanvas ngagunakeun data-bs-targetsakumaha ditémbongkeun di handap ieu:

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

Sanaos kadua cara pikeun ngaleungitkeun offcanvas dirojong, émut yén ngabubarkeun ti luar offcanvas henteu cocog sareng pola dialog (modal) Panduan Praktek Ngarang ARIA . Ngalakukeun ieu dina resiko sorangan.

Ngaliwatan JavaScript

Aktipkeun sacara manual nganggo:

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

Pilihan

Salaku pilihan bisa diliwatan via atribut data atawa JavaScript, anjeun bisa append hiji ngaran pilihan pikeun data-bs-, sakumaha dina data-bs-animation="{value}". Pastikeun pikeun ngarobah tipe kasus tina ngaran pilihan tina " camelCase " pikeun " kebab-case " nalika ngalirkeun pilihan ngaliwatan atribut data. Contona, make data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".

Salaku Bootstrap 5.2.0, sadaya komponén ngarojong hiji atribut data ditangtayungan eksperimendata-bs-config nu bisa imah konfigurasi komponén basajan salaku string JSON. Lamun hiji unsur boga data-bs-config='{"delay":0, "title":123}'jeung data-bs-title="456"atribut, nilai final titlebakal 456jeung atribut data misah bakal override nilai dibikeun dina data-bs-config. Salaku tambahan, atribut data anu aya tiasa ngeusian nilai JSON sapertos data-bs-delay='{"show":0,"hide":150}'.

Ngaran	Tipe	Default	Katerangan
`backdrop`	boolean atawa string`static`	`true`	Larapkeun latar dina awak nalika offcanvas dibuka. Alternatipna, tangtukeun `static`pikeun latar anu henteu nutup offcanvas nalika diklik.
`keyboard`	boolean	`true`	Nutup offcanvas sawaktos kenop escape dipencet.
`scroll`	boolean	`false`	Ngidinan ngagulung awak nalika offcanvas dibuka.

Métode

Métode Asynchronous sareng transisi

Sadaya metode API henteu sinkron sareng ngamimitian transisi . Aranjeunna balik deui ka panelepon pas transisi dimimitian tapi saméméh éta ends . Sajaba ti éta, panggero métode dina komponén transisi bakal dipaliré .

Tempo dokuméntasi JavaScript kami pikeun inpo nu leuwih lengkep .

Aktipkeun eusi anjeun salaku unsur offcanvas. Narima hiji pilihan pilihan object.

Anjeun tiasa nyiptakeun conto offcanvas sareng konstruktor, contona:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

Métode	Katerangan
`getInstance`	Metodeu statik anu ngamungkinkeun anjeun kéngingkeun conto offcanvas anu aya hubunganana sareng unsur DOM.
`getOrCreateInstance`	Métode statik anu ngamungkinkeun anjeun kéngingkeun conto offcanvas anu aya hubunganana sareng unsur DOM, atanapi ngadamel anu énggal upami henteu diinisialisasi.
`hide`	Nyumputkeun unsur offcanvas. Mulih ka panelepon saméméh unsur offcanvas sabenerna disumputkeun (ie saméméh `hidden.bs.offcanvas`kajadian lumangsung).
`show`	Némbongkeun unsur offcanvas. Mulih ka panelepon saméméh unsur offcanvas sabenerna geus ditémbongkeun (ie saméméh `shown.bs.offcanvas`acara lumangsung).
`toggle`	Ngalihkeun unsur offcanvas pikeun ditampilkeun atanapi disumputkeun. Mulih ka nu nelepon saméméh unsur offcanvas sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh `shown.bs.offcanvas`atawa `hidden.bs.offcanvas`kajadian lumangsung).

Kajadian

Kelas offcanvas Bootstrap ngungkabkeun sababaraha acara pikeun nyambungkeun kana fungsionalitas offcanvas.

Jenis acara	Katerangan
`hide.bs.offcanvas`	Kajadian ieu dipecat langsung nalika `hide`padika geus disebut.
`hidden.bs.offcanvas`	Kajadian ieu dipecat nalika unsur offcanvas disumputkeun ti pangguna (bari ngadagoan transisi CSS réngsé).
`hidePrevented.bs.offcanvas`	Kajadian ieu dipecat nalika offcanvas ditingalikeun, latar tukangna `static`sareng klik di luar offcanvas dilaksanakeun. Kajadian ogé dipecat nalika kenop ngewa dipencet tur `keyboard`pilihan disetel ka `false`.
`show.bs.offcanvas`	Kajadian ieu langsung hurung nalika `show`metode conto disebut.
`shown.bs.offcanvas`	Kajadian ieu dipecat nalika unsur offcanvas parantos katingali ku pangguna (bakal ngantosan transisi CSS réngsé).

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

Offcanvas

Kumaha gawéna

Contona

Komponén offcanvas

Offcanvas

Live demo

Offcanvas

Awak ngagulung

Offcanvas kalayan ngagulung awak

Ngagulung awak sareng latar

Latar kalayan ngagulung

Latar statik

Offcanvas

Kanvas poék

Offcanvas

Responsif

Offcanvas responsif

panempatan

Atasan offcanvas

Offcanvas katuhu

Offcanvas handap

Aksesibilitas

CSS

Variabel

variabel Sass

Pamakéan

Via atribut data

Togél

Ngaleungitkeun

Ngaliwatan JavaScript

Pilihan

Métode

Métode Asynchronous sareng transisi

Kajadian