Langkau ke kandungan utama Langkau ke navigasi dokumen
Check
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, atas 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.
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>

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

Tatal badan

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

Offcanvas dengan menatal badan

Cuba tatal seluruh halaman untuk melihat pilihan ini dalam tindakan.

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>

Tatal badan dan tirai latar

Anda juga boleh mendayakan <body>penatalan dengan tirai latar yang boleh dilihat.

Tirai latar dengan menatal

Cuba tatal seluruh halaman untuk melihat pilihan ini dalam tindakan.

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

Apabila tirai latar ditetapkan kepada statik, offcanvas tidak akan ditutup apabila mengklik di luarnya.

Luar Kanvas
Saya tidak akan tutup jika anda klik di luar saya.
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 gelap

Ditambah dalam v5.2.0

Tukar penampilan offcanvases dengan utiliti untuk memadankannya dengan lebih baik kepada konteks yang berbeza seperti bar navigasi gelap. Di sini kami menambah dan .text-bg-darkuntuk penggayaan yang betul dengan offkanvas gelap. Jika anda mempunyai menu lungsur dalam, pertimbangkan juga untuk menambah ..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Luar Kanvas

Letakkan kandungan offcanvas di sini.

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

Ditambah dalam v5.2.0

Kelas offcanvas responsif menyembunyikan kandungan di luar ruang pandang dari titik pecah yang ditentukan dan ke bawah. Di atas titik putus itu, kandungan dalam akan berkelakuan seperti biasa. Contohnya, .offcanvas-lgmenyembunyikan kandungan dalam offcanvas di bawah lgtitik putus, tetapi menunjukkan kandungan di atas lgtitik putus.

Ubah saiz penyemak imbas anda untuk menunjukkan togol offcanvas responsif.
Luar kanvas responsif

Ini adalah kandungan dalam .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 tersedia untuk setiap titik putus.

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

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-bottomletak offcanvas di bahagian bawah port pandangan

Cuba contoh atas, kanan dan bawah di bawah.

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

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.

CSS

Pembolehubah

Ditambah dalam v5.2.0

Sebagai sebahagian daripada pendekatan pembolehubah CSS Bootstrap yang sedang berkembang, offcanvas kini menggunakan pembolehubah CSS tempatan hidup .offcanvasuntuk penyesuaian masa nyata yang dipertingkatkan. Nilai untuk pembolehubah CSS ditetapkan melalui Sass, jadi penyesuaian Sass masih disokong juga.

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

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

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-topmenyembunyikan offcanvas di bahagian atas
  • .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 luar kanvas. 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 pola dialog (modal) Panduan Amalan Pengarangan ARIA . Lakukan ini atas risiko anda sendiri.

Melalui JavaScript

Dayakan secara manual dengan:

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

Pilihan

Memandangkan pilihan boleh dihantar melalui atribut data atau JavaScript, anda boleh menambahkan nama pilihan pada data-bs-, seperti dalam data-bs-animation="{value}". Pastikan anda menukar jenis kes bagi nama pilihan daripada " camelCase " kepada " kebab-case " apabila menghantar pilihan melalui atribut data. Sebagai contoh, gunakan data-bs-custom-class="beautifier"bukannya data-bs-customClass="beautifier".

Mulai Bootstrap 5.2.0, semua komponen menyokong atribut data simpanan percubaandata-bs-config yang boleh menempatkan konfigurasi komponen ringkas sebagai rentetan JSON. Apabila elemen mempunyai data-bs-config='{"delay":0, "title":123}'dan data-bs-title="456"atribut, nilai akhir titleakan menjadi 456dan atribut data yang berasingan akan mengatasi nilai yang diberikan pada data-bs-config. Selain itu, atribut data sedia ada dapat menempatkan nilai JSON seperti data-bs-delay='{"show":0,"hide":150}'.

Nama taip Lalai Penerangan
backdrop boolean atau rentetanstatic true Letakkan tirai latar pada badan semasa offcanvas dibuka. Sebagai alternatif, tentukan statictirai latar yang tidak menutup kanvas apabila diklik.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Kaedah Penerangan
getInstance Kaedah statik yang membolehkan anda mendapatkan contoh offcanvas yang dikaitkan dengan elemen DOM.
getOrCreateInstance Kaedah statik yang membolehkan anda mendapatkan tika offcanvas yang dikaitkan dengan elemen DOM, atau mencipta yang baharu sekiranya ia tidak dimulakan.
hide Menyembunyikan elemen luar kanvas. Kembali kepada pemanggil sebelum elemen offcanvas sebenarnya telah disembunyikan (iaitu sebelum hidden.bs.offcanvasperistiwa berlaku).
show Menunjukkan elemen luar kanvas. Kembali kepada pemanggil sebelum elemen offcanvas benar-benar ditunjukkan (iaitu sebelum shown.bs.offcanvasperistiwa berlaku).
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).

Peristiwa

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

Jenis acara Penerangan
hide.bs.offcanvas Acara ini dipecat serta-merta apabila hidekaedah telah dipanggil.
hidden.bs.offcanvas Acara ini dicetuskan apabila elemen offcanvas telah disembunyikan daripada pengguna (akan menunggu peralihan CSS selesai).
hidePrevented.bs.offcanvas Acara ini dicetuskan apabila offcanvas ditunjukkan, tirai latarnya adalah staticdan klik di luar offcanvas dilakukan. Acara ini juga dicetuskan apabila kekunci melarikan diri ditekan dan keyboardpilihan ditetapkan kepada false.
show.bs.offcanvas Peristiwa ini menyala serta-merta apabila showkaedah contoh dipanggil.
shown.bs.offcanvas Peristiwa ini dicetuskan apabila elemen offcanvas telah dilihat kepada pengguna (akan menunggu peralihan CSS selesai). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})