Lumpat menyang isi utama Lumpat menyang pandhu arah docs
in English

Offcanvas

Gawe sidebars sing didhelikake menyang proyek sampeyan kanggo navigasi, troli blanja, lan liya-liyane kanthi sawetara kelas lan plugin JavaScript.

Ing kaca iki

Cara kerjane

Offcanvas minangka komponen sidebar sing bisa diowahi liwat JavaScript kanggo katon saka sisih kiwa, tengen, utawa pinggir ngisor viewport. Tombol utawa jangkar digunakake minangka pemicu sing dipasang ing unsur tartamtu sing sampeyan ganti, lan dataatribut digunakake kanggo njaluk JavaScript kita.

  • Offcanvas nuduhake sawetara kode JavaScript sing padha karo modal. Secara konseptual, padha meh padha, nanging minangka plugin sing kapisah.
  • Kajaba iku, sawetara sumber variabel Sass kanggo gaya lan dimensi offcanvas diwarisake saka variabel modal.
  • Nalika ditampilake, offcanvas kalebu latar mburi standar sing bisa diklik kanggo ndhelikake offcanvas.
  • Kaya modal, mung siji offcanvas sing bisa ditampilake sekaligus.

Kepala munggah! Given carane CSS nangani animasi, sampeyan ora bisa nggunakake marginutawa translateing .offcanvasunsur. Nanging, nggunakake kelas minangka unsur bungkus sawijining.

Efek animasi saka komponen iki gumantung marang prefers-reduced-motionpitakon media. Deleng bagean gerakan suda saka dokumentasi aksesibilitas kita .

Tuladha

Komponen Offcanvas

Ing ngisor iki conto offcanvas sing dituduhake kanthi standar (liwat .showon .offcanvas). Offcanvas kalebu dhukungan kanggo header kanthi tombol cedhak lan kelas awak opsional kanggo sawetara padding. Disaranake sampeyan nyakup header offcanvas kanthi tumindak ngilangi yen bisa, utawa menehi tumindak ngilangi sing eksplisit.

Offcanvas
Konten kanggo offcanvas ana ing kene. Sampeyan bisa nyelehake meh kabeh komponen Bootstrap utawa unsur khusus ing kene. 
<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 langsung

Gunakake tombol ing ngisor iki kanggo nuduhake lan ndhelikake unsur offcanvas liwat JavaScript sing ngganti .showkelas ing unsur karo .offcanvaskelas.

  • .offcanvasndhelikake isi (standar)
  • .offcanvas.shownuduhake isi

Sampeyan bisa nggunakake link karo hrefatribut, utawa tombol karo data-bs-targetatribut. Ing kasus loro, data-bs-toggle="offcanvas"iku dibutuhake.

Link karo href
Offcanvas
Sawetara teks minangka placeholder. Ing urip nyata sampeyan bisa duwe unsur sing wis milih. Kaya, teks, gambar, dhaptar, lsp. 
<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>

Panggonan

Ora ana papan panggonan standar kanggo komponen offcanvas, dadi sampeyan kudu nambah salah sawijining kelas modifier ing ngisor iki;

  • .offcanvas-startpanggonan offcanvas ing sisih kiwa viewport (katon ing ndhuwur)
  • .offcanvas-endpanggonan offcanvas ing sisih tengen viewport
  • .offcanvas-toppanggonan offcanvas ing ndhuwur viewport
  • .offcanvas-bottompanggonan offcanvas ing ngisor viewport

Coba conto ndhuwur, tengen, lan ngisor ing ngisor iki.

Offcanvas ndhuwur
... 
<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 tengen
... 
<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>
Offcanvas ngisor
... 
<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>

Latar mburi

Nggulung <body>unsur dipatèni nalika offcanvas lan latar mburi katon. Gunakake data-bs-scrollatribut kanggo ngalih <body>nggulung lan data-bs-backdropmilih latar mburi.

Diwarnai kanthi nggulung

Coba gulung kaca liyane kanggo ndeleng pilihan iki ing tumindak.

Offcanvas kanthi latar mburi

.....

Latar mburi karo nggulung

Coba gulung kaca liyane kanggo ndeleng pilihan iki ing tumindak.

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

Aksesibilitas

Wiwit panel offcanvas sacara konseptual minangka dialog modal, manawa sampeyan nambahake aria-labelledby="..."—referensi judhul offcanvas—kanggo .offcanvas. Elinga yen sampeyan ora perlu nambah role="dialog"amarga kita wis nambah liwat JavaScript.

Sass

Variabel

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

Panggunaan

Plugin offcanvas nggunakake sawetara kelas lan atribut kanggo nangani ngangkat abot:

  • .offcanvasndhelikake isi
  • .offcanvas.shownuduhake isi
  • .offcanvas-startndhelikake offcanvas ing sisih kiwa
  • .offcanvas-endndhelikake offcanvas ing sisih tengen
  • .offcanvas-bottomndhelikake offcanvas ing ngisor

Nambah tombol ngilangi kanthi data-bs-dismiss="offcanvas"atribut, sing nyebabake fungsi JavaScript. Priksa manawa sampeyan nggunakake <button>unsur kasebut kanggo tumindak sing bener ing kabeh piranti.

Liwat atribut data

Ngalih

Tambah data-bs-toggle="offcanvas"lan a data-bs-targetutawa hrefmenyang unsur kanthi otomatis nemtokake kontrol siji unsur offcanvas. Atribut data-bs-targetkasebut nampa pamilih CSS kanggo ngetrapake offcanvas kasebut. Dadi manawa kanggo nambah kelas offcanvasmenyang unsur offcanvas. Yen sampeyan pengin mbukak standar, tambahake kelas tambahan show.

Mbucal

Pembubaran bisa digayuh kanthi dataatribut ing tombol ing offcanvas kaya sing dituduhake ing ngisor iki:

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

utawa ing tombol ing njaba offcanvas nggunakake data-bs-targetkaya sing dituduhake ing ngisor iki:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Nalika loro-lorone cara ngilangi offcanvas didhukung, elinga yen ngilangi saka njaba offcanvas ora cocog karo pola desain dialog modal WAI-ARIA . Tindakake iki kanthi resiko dhewe.

Liwat JavaScript

Aktifake kanthi manual kanthi:

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

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-bs-, kaya ing data-bs-backdrop="".

jeneng Jinis Default Katrangan
backdrop boolean true Pasang latar mburi ing awak nalika offcanvas mbukak
keyboard boolean true Nutup offcanvas nalika tombol escape ditekan
scroll boolean false Ngidini nggulung awak nalika offcanvas mbukak

Metode

Cara lan transisi asinkron

Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .

Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .

Ngaktifake konten sampeyan minangka unsur offcanvas. Nampa opsi opsional object.

Sampeyan bisa nggawe conto offcanvas karo konstruktor, contone:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metode Katrangan
toggle Ngalih unsur offcanvas dadi ditampilake utawa didhelikake. Bali menyang panelpon sadurunge unsur offcanvas bener-bener ditampilake utawa didhelikake (yaiku sadurunge shown.bs.offcanvasutawa hidden.bs.offcanvasacara kedadeyan).
show Nuduhake unsur offcanvas. Bali menyang panelpon sadurunge unsur offcanvas bener-bener ditampilake (yaiku sadurunge shown.bs.offcanvaskedadeyan kasebut).
hide Ndhelikake unsur offcanvas. Bali menyang panelpon sadurunge unsur offcanvas bener-bener didhelikake (yaiku sadurunge hidden.bs.offcanvaskedadeyan kasebut).
getInstance Cara statis sing ngidini sampeyan entuk conto offcanvas sing ana gandhengane karo unsur DOM
getOrCreateInstance Cara statis sing ngidini sampeyan entuk conto offcanvas sing ana gandhengane karo unsur DOM, utawa nggawe sing anyar yen ora diwiwiti.

Acara

Kelas offcanvas Bootstrap nyedhiyakake sawetara acara kanggo nyambungake fungsi offcanvas.

Jenis acara Katrangan
show.bs.offcanvas Acara iki langsung murub nalika showmetode conto diarani.
shown.bs.offcanvas Acara iki dipecat nalika unsur offcanvas wis katon kanggo pangguna (bakal ngenteni transisi CSS rampung).
hide.bs.offcanvas Acara iki langsung dipecat nalika hidemetode kasebut diarani.
hidden.bs.offcanvas Acara iki dipecat nalika unsur offcanvas wis didhelikake saka pangguna (bakal ngenteni transisi CSS rampung). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})