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.

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

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

Cuba contoh atas, kanan dan bawah di bawah.

...

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

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.

Cuba tatal seluruh halaman untuk melihat pilihan ini dalam tindakan.

.....

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

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;

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

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.

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.offcanvas`atau `hidden.bs.offcanvas`peristiwa berlaku).
`show`	Menunjukkan elemen luar kanvas. Kembali kepada pemanggil sebelum elemen offcanvas benar-benar ditunjukkan (iaitu sebelum `shown.bs.offcanvas`peristiwa berlaku).
`hide`	Menyembunyikan elemen luar kanvas. Kembali kepada pemanggil sebelum elemen offcanvas sebenarnya telah disembunyikan (iaitu sebelum `hidden.bs.offcanvas`peristiwa 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 menyala serta-merta apabila `show`kaedah contoh dipanggil.
`shown.bs.offcanvas`	Peristiwa ini dicetuskan apabila elemen offcanvas telah dilihat kepada pengguna (akan menunggu peralihan CSS selesai).
`hide.bs.offcanvas`	Acara ini dipecat serta-merta apabila `hide`kaedah telah dipanggil.
`hidden.bs.offcanvas`	Acara 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...
})

Luar Kanvas

Bagaimana ia berfungsi

Contoh

Komponen luar kanvas

Luar Kanvas

Demo langsung

Luar Kanvas

Penempatan

Bahagian atas luar kanvas

Offcanvas betul

Bahagian bawah luar kanvas

Tirai latar

Berwarna dengan menatal

Luar kanvas dengan tirai latar

Berlatar belakang dengan menatal

Kebolehcapaian

Sass

Pembolehubah

Penggunaan

Melalui atribut data

Melalui JavaScript

Pilihan

Kaedah

Kaedah dan peralihan tak segerak

Peristiwa