Luncat ka eusi utama Luncat ka navigasi docs
in English

Offcanvas

Ngawangun sidebars disumputkeun kana proyék anjeun pikeun navigasi, carts balanja, sarta leuwih mibanda sababaraha kelas jeung plugin JavaScript kami.

Dina kaca ieu

Kumaha gawéna

Offcanvas mangrupakeun komponén sidebar nu bisa toggled via JavaScript mun nembongan ti kénca, katuhu, atawa ujung handap viewport nu. Tombol atawa jangkar dipaké salaku pemicu nu napel elemen husus Anjeun toggle, sarta dataatribut dipaké pikeun nelepon JavaScript urang.

  • Offcanvas ngabagi sababaraha kode JavaScript anu sami sareng modals. Conceptually, aranjeunna rada sarupa, tapi aranjeunna plugins misah.
  • Nya kitu, sababaraha sumber variabel Sass pikeun gaya sareng dimensi offcanvas diwariskeun tina variabel modal.
  • Nalika ditingalikeun, offcanvas kalebet latar tukang standar anu tiasa diklik pikeun nyumputkeun offcanvas.
  • Sarupa jeung modals, ngan hiji offcanvas bisa ditémbongkeun dina hiji waktu.

Mastaka tegak! Dibikeun kumaha CSS handles animasi, anjeun teu bisa make marginatawa translatedina .offcanvasunsur. Gantina, make kelas salaku unsur wrapping bebas.

Pangaruh animasi tina komponén ieu gumantung kana prefers-reduced-motionpamundut média. Tempo bagian gerak ngurangan tina dokuméntasi aksés kami .

Contona

Komponén offcanvas

Di handap ieu conto offcanvas anu dipidangkeun sacara standar (via .showon .offcanvas). Offcanvas kalebet dukungan pikeun header kalayan tombol tutup sareng kelas awak opsional pikeun sababaraha padding. Kami nyarankeun yén anjeun ngalebetkeun header offcanvas sareng tindakan ngaleungitkeun sabisana, atanapi nyayogikeun tindakan anu jelas.

Offcanvas
Eusi pikeun offcanvas angkat ka dieu. Anjeun tiasa nempatkeun naon waé komponén Bootstrap atanapi elemen khusus di dieu. 
<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>

Live demo

Anggo tombol di handap pikeun nunjukkeun sareng nyumputkeun unsur offcanvas via JavaScript anu ngagentos .showkelas dina unsur sareng .offcanvaskelas.

  • .offcanvasnyumputkeun eusi (standar)
  • .offcanvas.shownembongkeun eusi

Anjeun tiasa nganggo tautan sareng hrefatribut, atanapi tombol sareng data-bs-targetatribut. Dina duanana kasus, éta data-bs-toggle="offcanvas"diperlukeun.

Link sareng href
Offcanvas
Sababaraha téks salaku pananda tempat. Dina kahirupan nyata anjeun tiasa gaduh elemen anu anjeun pilih. Kawas, téks, gambar, daptar, jsb. 
<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>

panempatan

Henteu aya panempatan standar pikeun komponén offcanvas, janten anjeun kedah nambihan salah sahiji kelas modifier di handap ieu;

  • .offcanvas-startnempatkeun offcanvas di kénca viewport (ditémbongkeun di luhur)
  • .offcanvas-endnempatkeun offcanvas di sisi katuhu viewport
  • .offcanvas-topnempatkeun offcanvas dina luhureun viewport nu
  • .offcanvas-bottomnempatkeun offcanvas dina handapeun viewport

Coba conto luhur, katuhu, sareng handap di handap.

Atasan offcanvas
... 
<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 katuhu
... 
<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>
Offcanvas handap
... 
<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

Ngagulung <body>unsur dinonaktipkeun nalika offcanvas sareng latar na katingali. Anggo data-bs-scrollatribut pikeun toggle <body>ngagulung sareng data-bs-backdroptoggle backdrop.

Diwarnaan ku ngagugulung

Coba gulung sesa kaca pikeun ningali pilihan ieu dina aksi.

Offcanvas kalayan latar

.....

Latar kalayan ngagulung

Coba gulung sesa kaca pikeun ningali pilihan ieu dina aksi.

<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

Kusabab panel offcanvas sacara konseptual mangrupa dialog modal, pastikeun pikeun nambahkeun aria-labelledby="..."—ngarujuk kana judul offcanvas—ka .offcanvas. Catet yén anjeun henteu kedah nambihan role="dialog"sabab kami parantos nambihanana via 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;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Pamakéan

Plugin offcanvas ngagunakeun sababaraha kelas sareng atribut pikeun nanganan angkat beurat:

  • .offcanvasnyumputkeun eusi
  • .offcanvas.shownembongkeun eusi
  • .offcanvas-startnyumputkeun offcanvas di kénca
  • .offcanvas-endnyumputkeun offcanvas di katuhu
  • .offcanvas-bottomnyumputkeun offcanvas di handap

Tambahkeun tombol ngilangkeun kalawan data-bs-dismiss="offcanvas"atribut, nu micu fungsionalitas JavaScript. Pastikeun ngagunakeun <button>unsur éta pikeun paripolah anu leres dina sadaya alat.

Via atribut data

Togél

Tambihkeun data-bs-toggle="offcanvas"sareng a data-bs-targetatanapi hrefkana unsur pikeun otomatis netepkeun kadali hiji unsur offcanvas. Atribut data-bs-targetnampi pamilih CSS pikeun nerapkeun offcanvas. Pastikeun pikeun nambahkeun kelas offcanvaska elemen offcanvas. Upami anjeun hoyong kabuka sacara standar, tambahkeun kelas tambahan show.

Ngaleungitkeun

PHK tiasa dihontal ku dataatribut dina tombol dina offcanvas sapertos anu dipidangkeun di handap ieu:

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

atawa dina tombol di luar offcanvas ngagunakeun data-bs-targetsakumaha ditémbongkeun di handap ieu:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Sanaos duanana cara pikeun ngahapus offcanvas dirojong, émut yén ngaleungitkeun ti luar offcanvas henteu cocog sareng pola desain dialog modal WAI-ARIA . Ngalakukeun ieu dina resiko sorangan.

Ngaliwatan JavaScript

Aktipkeun sacara manual nganggo:

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

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-bs-, sapertos dina data-bs-backdrop="".

Ngaran Tipe Default Katerangan
backdrop boolean true Larapkeun latar dina awak nalika offcanvas dibuka
keyboard boolean true Nutup offcanvas sawaktos kenop escape dipencet
scroll boolean false Ngidinan ngagulung awak nalika offcanvas dibuka

Métode

Métode Asynchronous sareng transisi

Sadaya metode API henteu sinkron sareng ngamimitian transisi . Aranjeunna balik deui ka panelepon pas transisi dimimitian tapi saméméh éta ends . Sajaba ti éta, panggero métode dina komponén transisi bakal dipaliré .

Tempo dokuméntasi JavaScript kami pikeun inpo nu leuwih lengkep .

Aktipkeun eusi anjeun salaku unsur offcanvas. Narima hiji pilihan pilihan object.

Anjeun tiasa nyiptakeun conto offcanvas sareng konstruktor, contona:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Métode Katerangan
toggle Ngalihkeun unsur offcanvas pikeun ditampilkeun atanapi disumputkeun. Mulih ka nu nelepon saméméh unsur offcanvas sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.offcanvasatawa hidden.bs.offcanvaskajadian lumangsung).
show Némbongkeun unsur offcanvas. Mulih ka panelepon saméméh unsur offcanvas sabenerna geus ditémbongkeun (ie saméméh shown.bs.offcanvasacara lumangsung).
hide Nyumputkeun unsur offcanvas. Mulih ka panelepon saméméh unsur offcanvas sabenerna disumputkeun (ie saméméh hidden.bs.offcanvasacara lumangsung).
getInstance Metodeu statik anu ngamungkinkeun anjeun kéngingkeun conto offcanvas anu aya hubunganana sareng unsur DOM
getOrCreateInstance Métode statik anu ngamungkinkeun anjeun kéngingkeun conto offcanvas anu aya hubunganana sareng unsur DOM, atanapi ngadamel anu énggal upami henteu diinisialisasi.

Kajadian

Kelas offcanvas Bootstrap ngungkabkeun sababaraha acara pikeun nyambungkeun kana fungsionalitas offcanvas.

Jenis acara Katerangan
show.bs.offcanvas Kajadian ieu langsung hurung nalika showmetode conto disebut.
shown.bs.offcanvas Acara ieu dipecat nalika unsur offcanvas parantos katingali ku pangguna (bari ngantosan transisi CSS réngsé).
hide.bs.offcanvas Kajadian ieu dipecat langsung nalika hidepadika geus disebut.
hidden.bs.offcanvas Acara ieu dipecat nalika unsur offcanvas disumputkeun ti pangguna (bari ngadagoan transisi CSS réngsé). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})