Lewati ke konten utama Lewati ke navigasi dokumen
in English

di luar kanvas

Bangun bilah sisi tersembunyi ke dalam proyek Anda untuk navigasi, keranjang belanja, dan lainnya dengan beberapa kelas dan plugin JavaScript kami.

Di halaman ini

Bagaimana itu bekerja

Offcanvas adalah komponen bilah sisi yang dapat diaktifkan melalui JavaScript untuk muncul dari tepi kiri, kanan, atau bawah area pandang. Tombol atau jangkar digunakan sebagai pemicu yang dilampirkan ke elemen tertentu yang Anda aktifkan, dan dataatribut digunakan untuk menjalankan JavaScript kami.

  • Offcanvas berbagi beberapa kode JavaScript yang sama dengan modals. Secara konseptual, mereka sangat mirip, tetapi mereka adalah plugin yang terpisah.
  • Demikian pula, beberapa variabel Sass sumber untuk gaya dan dimensi offcanvas diwarisi dari variabel modal.
  • Saat ditampilkan, offcanvas menyertakan latar belakang default yang dapat diklik untuk menyembunyikan offcanvas.
  • Mirip dengan modals, hanya satu offcanvas yang dapat ditampilkan pada satu waktu.

Perhatian! Mengingat bagaimana CSS menangani animasi, Anda tidak dapat menggunakan marginatau translatepada suatu .offcanvaselemen. Sebagai gantinya, gunakan kelas sebagai elemen pembungkus independen.

Efek animasi komponen ini bergantung pada prefers-reduced-motionkueri media. Lihat bagian pengurangan gerakan pada dokumentasi aksesibilitas kami .

Contoh

Komponen Offcanvas

Di bawah ini adalah contoh offcanvas yang ditampilkan secara default (via .showon .offcanvas). Offcanvas menyertakan dukungan untuk header dengan tombol tutup dan kelas isi opsional untuk beberapa file padding. Kami menyarankan agar Anda menyertakan header offcanvas dengan tindakan pemberhentian bila memungkinkan, atau berikan tindakan pemberhentian yang eksplisit.

di luar kanvas
Konten untuk offcanvas ada di sini. Anda dapat menempatkan hampir semua komponen Bootstrap atau elemen khusus di sini. 
<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

Gunakan tombol di bawah ini untuk menampilkan dan menyembunyikan elemen offcanvas melalui JavaScript yang mengaktifkan .showkelas pada elemen dengan .offcanvaskelas.

  • .offcanvasmenyembunyikan konten (default)
  • .offcanvas.showmenunjukkan konten

Anda dapat menggunakan tautan dengan hrefatribut, atau tombol dengan data-bs-targetatribut. Dalam kedua kasus, data-bs-toggle="offcanvas"diperlukan.

Tautkan dengan href
di luar kanvas
Beberapa teks sebagai pengganti. Dalam kehidupan nyata Anda dapat memiliki elemen yang telah Anda pilih. Seperti, teks, gambar, daftar, dll. 
<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>

Penempatan

Tidak ada penempatan default untuk komponen offcanvas, jadi Anda harus menambahkan salah satu kelas pengubah di bawah ini;

  • .offcanvas-startmenempatkan offcanvas di sebelah kiri viewport (ditampilkan di atas)
  • .offcanvas-endmenempatkan offcanvas di sebelah kanan viewport
  • .offcanvas-topmenempatkan offcanvas di atas viewport
  • .offcanvas-bottommenempatkan offcanvas di bagian bawah viewport

Coba contoh atas, kanan, dan bawah di bawah ini.

Atasan di luar kanvas
... 
<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 benar
... 
<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>
Bawah kanvas
... 
<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 belakang

Menggulir <body>elemen dinonaktifkan saat offcanvas dan latar belakangnya terlihat. Gunakan data-bs-scrollatribut untuk beralih <body>pengguliran dan data-bs-backdropuntuk beralih latar belakang.

Diwarnai dengan scrolling

Coba gulir sisa halaman untuk melihat opsi ini beraksi.

Offcanvas dengan latar belakang

.....

Latar belakang dengan menggulir

Coba gulir sisa halaman untuk melihat opsi ini beraksi.

<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

Karena panel offcanvas secara konseptual adalah dialog modal, pastikan untuk menambahkan aria-labelledby="..."—merujuk judul offcanvas—ke .offcanvas. Perhatikan bahwa Anda tidak perlu menambahkan role="dialog"karena kami sudah menambahkannya melalui JavaScript.

Kelancangan

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;

Penggunaan

Plugin offcanvas menggunakan beberapa kelas dan atribut untuk menangani pekerjaan berat:

  • .offcanvasmenyembunyikan isinya
  • .offcanvas.showmenunjukkan isinya
  • .offcanvas-startmenyembunyikan offcanvas di sebelah kiri
  • .offcanvas-endmenyembunyikan offcanvas di sebelah kanan
  • .offcanvas-bottommenyembunyikan offcanvas di bagian bawah

Tambahkan tombol tutup dengan data-bs-dismiss="offcanvas"atribut, yang memicu fungsionalitas JavaScript. Pastikan untuk menggunakan <button>elemen dengan itu untuk perilaku yang tepat di semua perangkat.

Melalui atribut data

Beralih

Tambahkan data-bs-toggle="offcanvas"dan a data-bs-targetatau hrefke elemen untuk secara otomatis menetapkan kontrol satu elemen offcanvas. Atribut data-bs-targetmenerima pemilih CSS untuk menerapkan offcanvas. Pastikan untuk menambahkan kelas offcanvaske elemen offcanvas. Jika Anda ingin default terbuka, tambahkan kelas tambahan show.

Membubarkan

Pemberhentian dapat dicapai dengan dataatribut pada tombol di dalam kanvas seperti yang ditunjukkan di bawah ini:

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

atau pada tombol di luar kanvas menggunakan data-bs-targetseperti yang ditunjukkan di bawah ini:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Meskipun kedua cara untuk menutup offcanvas didukung, perlu diingat bahwa menutup dari luar offcanvas tidak cocok dengan pola desain dialog modal WAI-ARIA . Lakukan dengan resiko ditanggung sendiri.

Melalui JavaScript

Aktifkan secara manual dengan:

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

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-bs-, seperti pada data-bs-backdrop="".

Nama Jenis Bawaan Keterangan
backdrop boolean true Terapkan latar belakang pada tubuh saat offcanvas terbuka
keyboard boolean true Menutup kanvas saat tombol escape ditekan
scroll boolean false Izinkan pengguliran tubuh saat offcanvas terbuka

Metode

Metode dan transisi asinkron

Semua metode API tidak sinkron dan memulai transisi . Mereka kembali ke penelepon segera setelah transisi dimulai tetapi sebelum berakhir . Selain itu, pemanggilan metode pada komponen transisi akan diabaikan .

Lihat dokumentasi JavaScript kami untuk informasi lebih lanjut .

Mengaktifkan konten Anda sebagai elemen offcanvas. Menerima opsi opsional object.

Anda dapat membuat instance offcanvas dengan konstruktor, misalnya:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
metode Keterangan
toggle Mengalihkan elemen offcanvas untuk ditampilkan atau disembunyikan. Kembali ke pemanggil sebelum elemen offcanvas benar-benar ditampilkan atau disembunyikan (yaitu sebelum shown.bs.offcanvasatau hidden.bs.offcanvasperistiwa terjadi).
show Menampilkan elemen offcanvas. Kembali ke pemanggil sebelum elemen offcanvas benar-benar ditampilkan (yaitu sebelum shown.bs.offcanvasperistiwa terjadi).
hide Menyembunyikan elemen offcanvas. Kembali ke pemanggil sebelum elemen offcanvas sebenarnya disembunyikan (yaitu sebelum hidden.bs.offcanvasperistiwa terjadi).
getInstance Metode statis yang memungkinkan Anda mendapatkan instance offcanvas yang terkait dengan elemen DOM
getOrCreateInstance Metode statis yang memungkinkan Anda mendapatkan instance offcanvas yang terkait dengan elemen DOM, atau membuat yang baru jika tidak diinisialisasi

Acara

Kelas offcanvas Bootstrap memperlihatkan beberapa peristiwa untuk menghubungkan ke fungsionalitas offcanvas.

Jenis acara Keterangan
show.bs.offcanvas Acara ini langsung aktif ketika showmetode instance dipanggil.
shown.bs.offcanvas Peristiwa ini dipicu ketika elemen offcanvas telah dibuat terlihat oleh pengguna (akan menunggu transisi CSS selesai).
hide.bs.offcanvas Acara ini dipecat segera ketika hidemetode telah dipanggil.
hidden.bs.offcanvas Peristiwa ini dipicu ketika elemen offcanvas disembunyikan dari pengguna (akan menunggu transisi CSS selesai). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})