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.

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

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.

...

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

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.

Coba gulung kaca liyane kanggo ndeleng pilihan iki ing tumindak.

.....

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

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;

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

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.

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 wis bener ditampilake utawa didhelikake (yaiku sadurunge acara `shown.bs.offcanvas`utawa `hidden.bs.offcanvas`kedadeyan).
`show`	Nuduhake unsur offcanvas. Bali menyang panelpon sadurunge unsur offcanvas bener-bener ditampilake (yaiku sadurunge `shown.bs.offcanvas`kedadeyan kasebut).
`hide`	Ndhelikake unsur offcanvas. Bali menyang panelpon sadurunge unsur offcanvas bener-bener didhelikake (yaiku sadurunge `hidden.bs.offcanvas`kedadeyan 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 `show`metode 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 `hide`metode 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...
})

Offcanvas

Cara kerjane

Tuladha

Komponen Offcanvas

Offcanvas

demo langsung

Offcanvas

Panggonan

Offcanvas ndhuwur

Offcanvas tengen

Offcanvas ngisor

Latar mburi

Diwarnai kanthi nggulung

Offcanvas kanthi latar mburi

Backdroped karo nggulung

Aksesibilitas

Sass

Variabel

Panggunaan

Liwat atribut data

Liwat JavaScript

Pilihan

Metode

Cara lan transisi asinkron

Acara