Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

Offcanfasi

Kọ awọn ẹgbẹ ẹgbẹ ti o farapamọ sinu iṣẹ akanṣe rẹ fun lilọ kiri, awọn rira rira, ati diẹ sii pẹlu awọn kilasi diẹ ati ohun itanna JavaScript wa.

Lori iwe yi

Bawo ni o ṣe n ṣiṣẹ

Offcanvas jẹ paati ẹgbẹ ẹgbẹ ti o le yipada nipasẹ JavaScript lati han lati apa osi, ọtun, oke, tabi eti isalẹ ti oju wiwo. Awọn bọtini tabi awọn ìdákọró ni a lo bi awọn okunfa ti o somọ awọn eroja kan pato ti o yipada, ati dataawọn abuda ni a lo lati pe JavaScript wa.

  • Offcanvas pin diẹ ninu koodu JavaScript kanna gẹgẹbi awọn modals. Ni imọran, wọn jọra pupọ, ṣugbọn wọn jẹ awọn afikun lọtọ.
  • Bakanna, diẹ ninu awọn oniyipada Sass orisun fun awọn aza ati awọn iwọn offcanvas jẹ jogun lati awọn oniyipada modal.
  • Nigbati o ba han, offcanvas pẹlu ẹhin aiyipada ti o le tẹ lati tọju itanafasi naa.
  • Iru si modals, ọkan offcanvas le ṣe afihan ni akoko kan.

Efeti sile! Fi fun bi CSS ṣe n kapa awọn ohun idanilaraya, o ko le lo margintabi translatelori nkan .offcanvaskan. Dipo, lo kilaasi bi ohun elo murasilẹ ominira.

Ipa iwara ti paati yii dale lori prefers-reduced-motionibeere media. Wo apakan išipopada ti o dinku ti iwe iraye si wa .

Awọn apẹẹrẹ

Offcanvas irinše

Ni isalẹ jẹ apẹẹrẹ itanafasi ti o han nipasẹ aiyipada (nipasẹ .showtitan .offcanvas). Offcanvas pẹlu atilẹyin akọsori pẹlu bọtini isunmọ ati kilasi ara iyan fun diẹ ninu ibẹrẹ padding. A daba pe ki o pẹlu awọn akọsori itanafasi pẹlu awọn iṣe yiyọ kuro nigbakugba ti o ṣee ṣe, tabi pese igbese ifasilẹ ti o fojuhan.

Offcanfasi
Akoonu fun offcanvas lọ nibi. O le gbe o kan nipa eyikeyi paati Bootstrap tabi awọn eroja aṣa nibi.
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>

Live demo

Lo awọn bọtini ti o wa ni isalẹ lati ṣafihan ati tọju ohun elo aibikita nipasẹ JavaScript ti o .showyi kilasi pada lori eroja pẹlu .offcanvaskilasi naa.

  • .offcanvastọju akoonu (aiyipada)
  • .offcanvas.showfihan akoonu

O le lo ọna asopọ kan pẹlu hrefabuda, tabi bọtini kan pẹlu data-bs-targetabuda. Ni awọn ọran mejeeji, o data-bs-toggle="offcanvas"nilo.

Ọna asopọ pẹlu href
Offcanfasi
Diẹ ninu awọn ọrọ bi placeholder. Ni igbesi aye gidi o le ni awọn eroja ti o yan. Bii, ọrọ, awọn aworan, awọn atokọ, ati bẹbẹ lọ.
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>

Yiyi ara

Yi lọ <body>eroja naa jẹ alaabo nigbati itanafasi ati ẹhin rẹ han. Lo data-bs-scrollabuda naa lati mu <body>yi lọ ṣiṣẹ.

Offcanvas pẹlu yiyi ara

Gbiyanju yi lọ kiri oju-iwe to ku lati rii aṣayan yii ni iṣe.

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>

Ara yiyi ati backdrop

O tun le mu <body>yi lọ ṣiṣẹ pẹlu ẹhin ti o han.

Backdrop pẹlu yi lọ

Gbiyanju yi lọ kiri oju-iwe to ku lati rii aṣayan yii ni iṣe.

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>

Aimi backdrop

Nigbati a ba ṣeto backdrop si aimi, offcanvas kii yoo sunmọ nigbati o ba tẹ ita rẹ.

Offcanfasi
Emi kii yoo pa ti o ba tẹ ita mi.
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>

Dudu offcanvas

Fi kun v5.2.0

Yi irisi offcanvases pada pẹlu awọn ohun elo lati baamu wọn dara si awọn ipo oriṣiriṣi bii awọn navbars dudu. Nibi ti a ṣafikun .text-bg-darksi .offcanvasati .btn-close-whitesi .btn-closefun iselona to dara pẹlu itanafa dudu kan. Ti o ba ni awọn silẹ laarin, ronu tun ṣafikun .dropdown-menu-darksi .dropdown-menu.

Offcanfasi

Gbe akoonu offcanvas nibi.

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>

Idahun

Fi kun v5.2.0

Awọn kilasi ifasẹsi ti o ṣe idahun tọju akoonu ni ita wiwo wiwo lati aaye fifọ ti o pàtó kan ati isalẹ. Loke aaye fifọ yẹn, awọn akoonu inu yoo huwa bi igbagbogbo. Fún àpẹrẹ, .offcanvas-lgàkóónú bòmọ́lẹ̀ sínú ìkanfasi kan nísàlẹ̀ ibi ìparun lg, ṣùgbọ́n ó fi àkóónú hàn lókè ibi lgìparun.

Ṣe atunto ẹrọ aṣawakiri rẹ lati ṣe afihan iyipada offcanvas ti o ṣe idahun.
Offcanvas idahun

Eyi jẹ akoonu laarin ẹya .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>

Awọn kilasi itafasi ti o ṣe idahun wa kọja fun aaye fifọ kọọkan.

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

Ipo

Ko si aaye aiyipada fun awọn paati itanafasi, nitorinaa o gbọdọ ṣafikun ọkan ninu awọn kilasi modifier ni isalẹ.

  • .offcanvas-startgbe offcanfasi si apa osi ti oju wiwo (ti o han loke)
  • .offcanvas-endgbe offcanvas lori ọtun ti awọn viewport
  • .offcanvas-topgbe offcanvas lori oke wiwo
  • .offcanvas-bottomgbe offcanvas lori isalẹ ti awọn viewport

Gbiyanju awọn apẹẹrẹ oke, ọtun, ati isalẹ ni isalẹ.

Offcanvas oke
...
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 ọtun
...
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>
Offcanvas isalẹ
...
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>

Wiwọle

Níwọ̀n bí pánẹ́ẹ̀lì offcanvas ti jẹ́ ìbánisọ̀rọ̀ ìfọ̀rọ̀rọ̀rọ̀-èpodà, ríi dájú pé o ṣàfikún aria-labelledby="..."—tí ń tọ́ka sí àkọlé offcanvas—si .offcanvas. Ṣe akiyesi pe o ko nilo lati ṣafikun role="dialog"nitori a ti ṣafikun tẹlẹ nipasẹ JavaScript.

CSS

Awọn oniyipada

Fi kun v5.2.0

Gẹ́gẹ́ bí ara Bootstrap’s títúnṣe àwọn àyípadà CSS, offcanvas ń lo àwọn oniyipada CSS agbegbe lori .offcanvasfun imudara isọdi-akoko gidi. Awọn iye fun awọn oniyipada CSS ti ṣeto nipasẹ Sass, nitorinaa isọdi Sass tun ni atilẹyin, paapaa.

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

Sass oniyipada

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

Lilo

Ohun itanna offcanvas nlo awọn kilasi diẹ ati awọn abuda lati mu gbigbe gbigbe ti o wuwo naa:

  • .offcanvashides awọn akoonu
  • .offcanvas.showfihan akoonu
  • .offcanvas-starthides awọn offcanvas lori osi
  • .offcanvas-endhides awọn offcanvas lori ọtun
  • .offcanvas-tophides awọn offcanvas lori oke
  • .offcanvas-bottomhides awọn offcanvas lori isalẹ

Ṣafikun bọtini yiyọ kuro pẹlu data-bs-dismiss="offcanvas"abuda, eyiti o nfa iṣẹ ṣiṣe JavaScript. Rii daju lati lo <button>eroja pẹlu rẹ fun ihuwasi to dara lori gbogbo awọn ẹrọ.

Nipasẹ awọn abuda data

Yipada

Fikun -un data-bs-toggle="offcanvas"ati kan data-bs-targettabi hrefsi eroja lati fi iṣakoso laifọwọyi ti ẹya kanfasi kan. Ẹya naa data-bs-targetgba oluyan CSS kan lati lo offcanvas si. Rii daju lati ṣafikun kilasi offcanvasnaa si nkan ti itafasi. Ti o ba fẹ ki o ṣii aiyipada, ṣafikun afikun kilasi show.

Yọọ kuro

Iyọkuro le ṣee ṣaṣeyọri pẹlu dataabuda lori bọtini kan laarin itanafasi bi a ti ṣe afihan ni isalẹ:

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

tabi lori bọtini kan ni ita ita gbangba nipa lilo eyi data-bs-targetbi a ti ṣe afihan ni isalẹ:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Lakoko ti awọn ọna mejeeji lati yọkuro kanfasi ita ni atilẹyin, ni lokan pe yiyọ kuro ni ita itanafasi ko ni ibamu pẹlu ilana Itọnisọna Awọn iṣe Onkọwe ARIA (modal) . Ṣe eyi ni ewu ti ara rẹ.

Nipasẹ JavaScript

Mu ṣiṣẹ pẹlu ọwọ pẹlu:

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

Awọn aṣayan

Bi awọn aṣayan ṣe le kọja nipasẹ awọn abuda data tabi JavaScript, o le fi orukọ aṣayan si data-bs-, bi ninu data-bs-animation="{value}". Rii daju lati yi iru ọran ti orukọ aṣayan pada lati “ CamelCase ” si “ kebab-case ” nigba gbigbe awọn aṣayan nipasẹ awọn abuda data. Fun apẹẹrẹ, lo data-bs-custom-class="beautifier"dipo data-bs-customClass="beautifier".

Bi ti Bootstrap 5.2.0, gbogbo awọn paati ṣe atilẹyin abuda data ipamọ idanwodata-bs-config ti o le ṣe atunto paati ti o rọrun bi okun JSON kan. Nigbati ohun kan ba ni data-bs-config='{"delay":0, "title":123}'ati data-bs-title="456"awọn abuda, iye ikẹhin titleyoo jẹ 456ati awọn abuda data lọtọ yoo dojuti awọn iye ti a fun lori data-bs-config. Ni afikun, awọn abuda data ti o wa ni anfani lati gbe awọn iye JSON bii data-bs-delay='{"show":0,"hide":150}'.

Oruko Iru Aiyipada Apejuwe
backdrop boolian tabi okunstatic true Waye kan backdrop lori ara nigba ti offcanvas wa ni sisi. Ni omiiran, pato staticfun ẹhin ẹhin eyiti ko tii itanafasi nigbati o tẹ.
keyboard boolian true Tilekun itanafasi nigbati o ba tẹ bọtini ona abayo.
scroll boolian false Gba laaye yi lọ ara nigba ti offcanvas wa ni sisi.

Awọn ọna

Awọn ọna Asynchronous ati awọn iyipada

Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .

Wo iwe JavaScript wa fun alaye diẹ sii .

Mu akoonu rẹ ṣiṣẹ bi eroja itafasi kan. Gba awọn aṣayan iyan object.

O le ṣẹda apẹẹrẹ itanafasi pẹlu oluṣe, fun apẹẹrẹ:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Ọna Apejuwe
getInstance Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ offcanvas ti o ni nkan ṣe pẹlu nkan DOM kan.
getOrCreateInstance Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ offcanvas ti o ni nkan ṣe pẹlu nkan DOM kan, tabi ṣẹda ọkan tuntun ni ọran ti ko ṣe ipilẹṣẹ.
hide Fi ohun elo itanafa pamọ. Pada si olupe ṣaaju ki ohun elo itanafasi ti wa ni ipamọ gangan (ie ṣaaju ki hidden.bs.offcanvasiṣẹlẹ naa to waye).
show Ṣe afihan eroja offcanvas kan. Pada si olupe ṣaaju ki ohun elo ita gbangba ti han gangan (ie ṣaaju ki shown.bs.offcanvasiṣẹlẹ naa to waye).
toggle Yipada eroja itanafasi kan si ifihan tabi pamọ. Pada si olupe ṣaaju ki ohun elo ita gbangba ti han tabi farapamọ gangan (ie ṣaaju ki iṣẹlẹ shown.bs.offcanvastabi hidden.bs.offcanvasiṣẹlẹ to waye).

Awọn iṣẹlẹ

Kilasi offcanvas Bootstrap ṣe afihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe offcanvas.

Iru iṣẹlẹ Apejuwe
hide.bs.offcanvas Yi iṣẹlẹ ti wa ni kuro lenu ise lẹsẹkẹsẹ nigbati awọn hideọna ti a ti a npe ni.
hidden.bs.offcanvas Iṣẹlẹ yii jẹ ina nigba ti ohun elo itanafasi kan ti farapamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari).
hidePrevented.bs.offcanvas Iṣẹlẹ yii jẹ ina nigbati a ba han offcanvas, ẹhin rẹ jẹ staticati tẹ ni ita ti offcanvas ti ṣe. Iṣẹlẹ naa tun jẹ ina nigbati o ba tẹ bọtini ona abayo ati keyboardaṣayan ti ṣeto si false.
show.bs.offcanvas Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni.
shown.bs.offcanvas Iṣẹlẹ yii jẹ ina nigba ti ohun elo ita gbangba ti han si olumulo (yoo duro fun awọn iyipada CSS lati pari). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})