Offcanvas

Gawe sidebars sing didhelikake menyang proyek sampeyan kanggo navigasi, troli blanja, lan liya-liyane kanthi sawetara kelas lan plugin JavaScript.

Ing kaca iki

Cara kerjane

Offcanvas minangka komponen sidebar sing bisa diuripake liwat JavaScript kanggo katon saka sisih kiwa, tengen, ndhuwur, utawa pinggir ngisor viewport. Tombol utawa jangkar digunakake minangka pemicu sing dipasang ing unsur tartamtu sing sampeyan ganti, lan dataatribut digunakake kanggo njaluk JavaScript kita.

Offcanvas nuduhake sawetara kode JavaScript sing padha karo modal. Secara konseptual, padha meh padha, nanging minangka plugin sing kapisah.
Kajaba iku, sawetara sumber variabel Sass kanggo gaya lan dimensi offcanvas diwarisake saka variabel modal.
Nalika ditampilake, offcanvas kalebu latar mburi standar sing bisa diklik kanggo ndhelikake offcanvas.
Kaya modal, mung siji offcanvas sing bisa ditampilake sekaligus.

Kepala munggah! Given carane CSS nangani animasi, sampeyan ora bisa nggunakake marginutawa translateing .offcanvasunsur. Nanging, nggunakake kelas minangka unsur bungkus sawijining.

Efek animasi saka komponen iki gumantung marang prefers-reduced-motionpitakon media. Deleng bagean gerakan suda saka dokumentasi aksesibilitas kita .

Tuladha

Komponen Offcanvas

Ing ngisor iki conto offcanvas sing dituduhake kanthi standar (liwat .showon .offcanvas). Offcanvas kalebu dhukungan kanggo header kanthi tombol cedhak lan kelas awak opsional kanggo sawetara padding. Disaranake sampeyan nyakup header offcanvas kanthi tumindak ngilangi yen bisa, utawa menehi tumindak ngilangi sing eksplisit.

Konten kanggo offcanvas ana ing kene. Sampeyan bisa nyelehake meh kabeh komponen Bootstrap utawa unsur khusus ing kene.

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

Gunakake tombol ing ngisor iki kanggo nuduhake lan ndhelikake unsur offcanvas liwat JavaScript sing ngganti .showkelas ing unsur karo .offcanvaskelas.

.offcanvasndhelikake isi (standar)
.offcanvas.shownuduhake isi

Sampeyan bisa nggunakake link karo hrefatribut, utawa tombol karo data-bs-targetatribut. Ing kasus loro, data-bs-toggle="offcanvas"iku dibutuhake.

Link karo href

Sawetara teks minangka placeholder. Ing urip nyata sampeyan bisa duwe unsur sing wis milih. Kaya, teks, gambar, dhaptar, lsp.

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>

Nggulung awak

Nggulung <body>unsur dipatèni nalika offcanvas lan latar mburi katon. Gunakake data-bs-scrollatribut kanggo ngaktifake <body>nggulung.

Coba gulung kaca liyane kanggo ndeleng pilihan iki ing tumindak.

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>

Nggulung awak lan latar mburi

Sampeyan uga bisa ngaktifake <body>nggulung kanthi latar mburi sing katon.

Coba gulung kaca liyane kanggo ndeleng pilihan iki ing tumindak.

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

Nalika latar mburi disetel menyang statis, offcanvas ora bakal nutup nalika ngeklik njaba.

Aku ora bakal nutup yen sampeyan klik njaba kula.

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 peteng

Ditambahake ing v5.2.0

Ganti tampilan offcanvases kanthi utilitas supaya luwih cocog karo konteks sing beda kaya bar navbar sing peteng. Ing kene kita nambahake lan .text-bg-darkkanggo gaya sing tepat karo offcanvas peteng. Yen sampeyan duwe dropdowns ing, nimbang uga nambah menyang ..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Selehake konten offcanvas ing kene.

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

Ditambahake ing v5.2.0

Kelas offcanvas responsif ndhelikake konten ing njaba viewport saka breakpoint tartamtu lan mudhun. Ing ndhuwur breakpoint kasebut, isi ing njero bakal tumindak kaya biasane. Contone, .offcanvas-lgndhelikake konten ing offcanvas ing ngisor lgbreakpoint, nanging nuduhake konten ing ndhuwur lgbreakpoint.

Ganti ukuran browser sampeyan kanggo nuduhake pilihan offcanvas responsif.

Iki isi ing .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 kasedhiya kanggo saben breakpoint.

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

Panggonan

Ora ana penempatan standar kanggo komponen offcanvas, dadi sampeyan kudu nambah salah sawijining kelas modifier ing ngisor iki.

.offcanvas-startpanggonan offcanvas ing sisih kiwa viewport (katon ing ndhuwur)
.offcanvas-endpanggonan offcanvas ing sisih tengen viewport
.offcanvas-toppanggonan offcanvas ing ndhuwur viewport
.offcanvas-bottompanggonan offcanvas ing ngisor viewport

Coba conto ndhuwur, tengen, lan ngisor ing ngisor iki.

...

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>

...

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>

...

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>

Aksesibilitas

Wiwit panel offcanvas sacara konseptual minangka dialog modal, manawa sampeyan nambahake aria-labelledby="..."—referensi judhul offcanvas—kanggo .offcanvas. Elinga yen sampeyan ora perlu nambah role="dialog"amarga kita wis nambah liwat JavaScript.

CSS

Variabel

Ditambahake ing v5.2.0

Minangka bagéan saka pendekatan variabel CSS Bootstrap sing berkembang, offcanvas saiki nggunakake variabel CSS lokal .offcanvaskanggo kustomisasi wektu nyata sing ditingkatake. Nilai kanggo variabel CSS disetel liwat Sass, supaya kustomisasi Sass isih didhukung.

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

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

Panggunaan

Plugin offcanvas nggunakake sawetara kelas lan atribut kanggo nangani ngangkat abot:

.offcanvasndhelikake isi
.offcanvas.shownuduhake isi
.offcanvas-startndhelikake offcanvas ing sisih kiwa
.offcanvas-endndhelikake offcanvas ing sisih tengen
.offcanvas-topndhelikake offcanvas ing ndhuwur
.offcanvas-bottomndhelikake offcanvas ing ngisor

Nambah tombol ngilangi kanthi data-bs-dismiss="offcanvas"atribut, sing nyebabake fungsi JavaScript. Priksa manawa sampeyan nggunakake <button>unsur kasebut kanggo tumindak sing bener ing kabeh piranti.

Liwat atribut data

Ngalih

Tambah data-bs-toggle="offcanvas"lan a data-bs-targetutawa hrefmenyang unsur kanthi otomatis nemtokake kontrol siji unsur offcanvas. Atribut data-bs-targetkasebut nampa pamilih CSS kanggo ngetrapake offcanvas kasebut. Dadi manawa kanggo nambah kelas offcanvasmenyang unsur offcanvas. Yen sampeyan pengin mbukak standar, tambahake kelas tambahan show.

Mbucal

Pembubaran bisa digayuh kanthi dataatribut ing tombol ing offcanvas kaya sing dituduhake ing ngisor iki:

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

utawa ing tombol ing njaba offcanvas nggunakake data-bs-targetkaya sing dituduhake ing ngisor iki:

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

Nalika loro-lorone cara kanggo ngilangi offcanvas didhukung, elinga yen ngilangi saka njaba offcanvas ora cocog karo pola dialog (modal) Pandhuan Praktik Penulisan ARIA . Tindakake iki kanthi resiko dhewe.

Liwat JavaScript

Aktifake kanthi manual kanthi:

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

Pilihan

Minangka opsi bisa liwati liwat atribut data utawa JavaScript, sampeyan bisa nambah jeneng pilihan kanggo data-bs-, kaya ing data-bs-animation="{value}". Priksa manawa kanggo ngganti jinis kasus jeneng pilihan saka " camelCase " kanggo " kebab-case " nalika ngliwati pilihan liwat atribut data. Contone, nggunakake data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".

Ing Bootstrap 5.2.0, kabeh komponen ndhukung atribut data sing dilindhungi eksperimendata-bs-config sing bisa ngemot konfigurasi komponen sing prasaja minangka string JSON. Nalika unsur duwe data-bs-config='{"delay":0, "title":123}'lan data-bs-title="456"atribut, titlenilai pungkasan bakal 456lan atribut data sing kapisah bakal ngilangi nilai sing diwenehake ing data-bs-config. Kajaba iku, atribut data sing ana bisa ngemot nilai JSON kaya data-bs-delay='{"show":0,"hide":150}'.

jeneng	Jinis	Default	Katrangan
`backdrop`	boolean utawa string`static`	`true`	Pasang latar mburi ing awak nalika offcanvas mbukak. Utawa, nemtokake `static`latar mburi sing ora nutup offcanvas nalika diklik.
`keyboard`	boolean	`true`	Nutup offcanvas nalika tombol escape ditekan.
`scroll`	boolean	`false`	Ngidini nggulung awak nalika offcanvas mbukak.

Metode

Cara lan transisi asinkron

Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .

Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .

Ngaktifake konten sampeyan minangka unsur offcanvas. Nampa opsi opsional object.

Sampeyan bisa nggawe conto offcanvas karo konstruktor, contone:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

Metode	Katrangan
`getInstance`	Cara statis sing ngidini sampeyan entuk conto offcanvas sing ana gandhengane karo unsur DOM.
`getOrCreateInstance`	Cara statis sing ngidini sampeyan entuk conto offcanvas sing ana gandhengane karo unsur DOM, utawa nggawe sing anyar yen ora diwiwiti.
`hide`	Ndhelikake unsur offcanvas. Bali menyang panelpon sadurunge unsur offcanvas bener-bener didhelikake (yaiku sadurunge `hidden.bs.offcanvas`kedadeyan kasebut).
`show`	Nuduhake unsur offcanvas. Bali menyang panelpon sadurunge unsur offcanvas bener-bener ditampilake (yaiku sadurunge `shown.bs.offcanvas`kedadeyan kasebut).
`toggle`	Ngalih unsur offcanvas dadi ditampilake utawa didhelikake. Bali menyang panelpon sadurunge unsur offcanvas wis bener ditampilake utawa didhelikake (yaiku sadurunge acara `shown.bs.offcanvas`utawa `hidden.bs.offcanvas`kedadeyan).

Acara

Kelas offcanvas Bootstrap nyedhiyakake sawetara acara kanggo nyambungake fungsi offcanvas.

Jenis acara	Katrangan
`hide.bs.offcanvas`	Acara iki langsung dipecat nalika `hide`metode kasebut diarani.
`hidden.bs.offcanvas`	Acara iki dipecat nalika unsur offcanvas wis didhelikake saka pangguna (bakal ngenteni transisi CSS rampung).
`hidePrevented.bs.offcanvas`	Acara iki dipecat nalika offcanvas ditampilake, latar mburi `static`lan klik ing njaba offcanvas ditindakake. Acara uga dipecat nalika tombol uwal dipencet lan `keyboard`pilihan disetel kanggo `false`.
`show.bs.offcanvas`	Acara iki langsung murub nalika `show`metode conto diarani.
`shown.bs.offcanvas`	Acara iki dipecat nalika unsur offcanvas wis katon kanggo pangguna (bakal ngenteni transisi CSS rampung).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

Offcanvas

Cara kerjane

Tuladha

Komponen Offcanvas

Offcanvas

demo langsung

Offcanvas

Nggulung awak

Offcanvas karo nggulung awak

Nggulung awak lan latar mburi

Latar mburi karo nggulung

Latar mburi statis

Offcanvas

Kanvas peteng

Offcanvas

Responsif

Offcanvas responsif

Panggonan

Offcanvas ndhuwur

Offcanvas tengen

Offcanvas ngisor

Aksesibilitas

CSS

Variabel

Variabel Sass

Panggunaan

Liwat atribut data

Ngalih

Mbucal

Liwat JavaScript

Pilihan

Metode

Cara lan transisi asinkron

Acara