Langkau ke kandungan utama Langkau ke navigasi dokumen
in English

Luar Kanvas

Bina bar sisi tersembunyi ke dalam projek anda untuk navigasi, troli beli-belah dan banyak lagi dengan beberapa kelas dan pemalam JavaScript kami.

Pada halaman ini

Bagaimana ia berfungsi

Offcanvas ialah komponen bar sisi yang boleh ditogol melalui JavaScript untuk muncul dari tepi kiri, kanan atau bawah port pandangan. Butang atau sauh digunakan sebagai pencetus yang dilampirkan pada elemen tertentu yang anda togol dan dataatribut digunakan untuk menggunakan JavaScript kami.

  • Offcanvas berkongsi beberapa kod JavaScript yang sama seperti modals. Dari segi konsep, ia agak serupa, tetapi ia adalah pemalam yang berasingan.
  • Begitu juga, beberapa pembolehubah Sass sumber untuk gaya dan dimensi offcanvas diwarisi daripada pembolehubah modal.
  • Apabila ditunjukkan, offcanvas menyertakan tirai latar lalai yang boleh diklik untuk menyembunyikan offcanvas.
  • Sama seperti modals, hanya satu offcanvas boleh ditunjukkan pada satu masa.

Angkat kepala! Memandangkan cara CSS mengendalikan animasi, anda tidak boleh menggunakan marginatau translatepada .offcanvaselemen. Sebaliknya, gunakan kelas sebagai elemen pembalut bebas.

Kesan animasi komponen ini bergantung pada prefers-reduced-motionpertanyaan media. Lihat bahagian gerakan yang dikurangkan dalam dokumentasi kebolehaksesan kami .

Contoh

Komponen luar kanvas

Di bawah ialah contoh offcanvas yang ditunjukkan secara lalai (melalui .showpada .offcanvas). Offcanvas termasuk sokongan untuk pengepala dengan butang tutup dan kelas badan pilihan untuk beberapa permulaan padding. Kami mencadangkan agar anda menyertakan pengepala offcanvas dengan tindakan tolak bila-bila boleh, atau berikan tindakan tolak yang jelas.

Luar Kanvas
Kandungan untuk offcanvas pergi ke sini. Anda boleh meletakkan hampir mana-mana komponen Bootstrap atau elemen tersuai 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 butang di bawah untuk menunjukkan dan menyembunyikan elemen offcanvas melalui JavaScript yang menogol .showkelas pada elemen dengan .offcanvaskelas.

  • .offcanvasmenyembunyikan kandungan (lalai)
  • .offcanvas.showmenunjukkan kandungan

Anda boleh menggunakan pautan dengan hrefatribut, atau butang dengan data-bs-targetatribut. Dalam kedua-dua kes, data-bs-toggle="offcanvas"ia diperlukan.

Pautan dengan href
Luar Kanvas
Beberapa teks sebagai pemegang tempat. Dalam kehidupan sebenar anda boleh mempunyai elemen yang telah anda pilih. Suka, teks, imej, senarai, dsb. 
<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

Tiada peletakan lalai untuk komponen offcanvas, jadi anda mesti menambah salah satu kelas pengubah suai di bawah;

  • .offcanvas-startletak offcanvas di sebelah kiri port pandangan (ditunjukkan di atas)
  • .offcanvas-endletak offcanvas di sebelah kanan port pandangan
  • .offcanvas-topmeletakkan offcanvas di bahagian atas port pandangan
  • .offcanvas-bottommeletakkan offcanvas di bahagian bawah port pandangan

Cuba contoh atas, kanan dan bawah di bawah.

Bahagian atas 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 betul
... 
<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>
Bahagian bawah luar 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>

Tirai latar

Menatal <body>elemen dilumpuhkan apabila offcanvas dan tirai latarnya kelihatan. Gunakan data-bs-scrollatribut untuk menogol <body>penatalan dan data-bs-backdropuntuk menogol tirai latar.

Berwarna dengan menatal

Cuba tatal seluruh halaman untuk melihat pilihan ini dalam tindakan.

Luar kanvas dengan tirai latar

.....

Tirai latar dengan menatal

Cuba tatal seluruh halaman untuk melihat pilihan ini dalam tindakan.

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

Kebolehcapaian

Memandangkan panel offcanvas secara konseptual ialah dialog modal, pastikan anda menambah aria-labelledby="..."—merujuk tajuk offcanvas—kepada .offcanvas. Ambil perhatian bahawa anda tidak perlu menambah role="dialog"kerana kami telah menambahkannya melalui JavaScript.

Sass

Pembolehubah

$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

Pemalam offcanvas menggunakan beberapa kelas dan atribut untuk mengendalikan pengangkatan berat:

  • .offcanvasmenyembunyikan kandungan
  • .offcanvas.showmenunjukkan kandungan
  • .offcanvas-startmenyembunyikan offcanvas di sebelah kiri
  • .offcanvas-endmenyembunyikan offcanvas di sebelah kanan
  • .offcanvas-bottommenyembunyikan offcanvas di bahagian bawah

Tambahkan butang tolak dengan data-bs-dismiss="offcanvas"atribut, yang mencetuskan kefungsian JavaScript. Pastikan anda menggunakan <button>elemen dengannya untuk tingkah laku yang betul merentas semua peranti.

Melalui atribut data

Togol

Tambah data-bs-toggle="offcanvas"dan a data-bs-targetatau hrefpada elemen untuk menetapkan kawalan secara automatik bagi satu elemen offcanvas. Atribut data-bs-targetmenerima pemilih CSS untuk menggunakan offcanvas. Pastikan anda menambah kelas offcanvaspada elemen offcanvas. Jika anda mahu ia dibuka secara lalai, tambahkan kelas tambahan show.

Tolak

Pemecatan boleh dicapai dengan dataatribut pada butang dalam offcanvas seperti yang ditunjukkan di bawah:

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

atau pada butang di luar offcanvas menggunakan data-bs-targetseperti yang ditunjukkan di bawah:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Walaupun kedua-dua cara untuk mengetepikan offcanvas disokong, perlu diingat bahawa mengetepikan dari luar offcanvas tidak sepadan dengan corak reka bentuk dialog modal WAI-ARIA . Lakukan ini atas risiko anda sendiri.

Melalui JavaScript

Dayakan secara manual dengan:

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

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-bs-, seperti dalam data-bs-backdrop="".

Nama taip Lalai Penerangan
backdrop boolean true Letakkan tirai latar pada badan semasa offcanvas dibuka
keyboard boolean true Menutup offkanvas apabila kekunci escape ditekan
scroll boolean false Benarkan menatal badan semasa offcanvas dibuka

Kaedah

Kaedah dan peralihan tak segerak

Semua kaedah API adalah tak segerak dan mulakan peralihan . Mereka kembali kepada pemanggil sebaik sahaja peralihan dimulakan tetapi sebelum ia tamat . Selain itu, panggilan kaedah pada komponen peralihan akan diabaikan .

Lihat dokumentasi JavaScript kami untuk mendapatkan maklumat lanjut .

Mengaktifkan kandungan anda sebagai elemen luar kanvas. Menerima pilihan pilihan object.

Anda boleh membuat contoh offcanvas dengan pembina, contohnya:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Kaedah Penerangan
toggle Menogol elemen luar kanvas kepada ditunjukkan atau disembunyikan. Kembali kepada pemanggil sebelum elemen offcanvas benar-benar ditunjukkan atau disembunyikan (iaitu sebelum shown.bs.offcanvasatau hidden.bs.offcanvasperistiwa berlaku).
show Menunjukkan elemen luar kanvas. Kembali kepada pemanggil sebelum elemen offcanvas benar-benar ditunjukkan (iaitu sebelum shown.bs.offcanvasperistiwa berlaku).
hide Menyembunyikan elemen luar kanvas. Kembali kepada pemanggil sebelum elemen offcanvas sebenarnya telah disembunyikan (iaitu sebelum hidden.bs.offcanvasperistiwa berlaku).
getInstance Kaedah statik yang membolehkan anda mendapatkan contoh offcanvas yang dikaitkan dengan elemen DOM
getOrCreateInstance Kaedah statik yang membolehkan anda mendapatkan contoh offcanvas yang dikaitkan dengan elemen DOM, atau mencipta yang baharu sekiranya ia tidak dimulakan

Peristiwa

Kelas offcanvas Bootstrap mendedahkan beberapa acara untuk menyambung ke fungsi offcanvas.

Jenis acara Penerangan
show.bs.offcanvas Peristiwa ini berlaku serta-merta apabila showkaedah contoh dipanggil.
shown.bs.offcanvas Peristiwa ini dicetuskan apabila elemen offcanvas telah ditunjukkan kepada pengguna (akan menunggu peralihan CSS selesai).
hide.bs.offcanvas Acara ini dipecat serta-merta apabila hidekaedah telah dipanggil.
hidden.bs.offcanvas Peristiwa ini dicetuskan apabila elemen offcanvas telah disembunyikan daripada pengguna (akan menunggu peralihan CSS selesai). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})