Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
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.

Bawo ni o ṣe n ṣiṣẹ

Offcanvas jẹ paati ẹgbẹ ẹgbẹ ti o le yipada nipasẹ JavaScript lati han lati apa osi, sọtun, tabi eti isalẹ ti ibudo 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.
<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

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

Ipo

Nibẹ ni ko si aiyipada placement fun offcanvas irinše, ki o gbọdọ fi ọkan ninu awọn modifier kilasi 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
...
<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 ọtun
...
<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 isalẹ
...
<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>

Backdrop

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

Awọ pẹlu yi lọ

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

Offcanvas pẹlu backdrop

......

Backdrop pẹlu yi lọ

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

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

Wiwọle

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

Sass

Awọn 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-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 itagiri ita ni atilẹyin, ni lokan pe yiyọ kuro ni ita itanafasi ko baamu ilana apẹrẹ ajọṣọ modal WAI-ARIA . Ṣe eyi ni ewu ti ara rẹ.

Nipasẹ JavaScript

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

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

Awọn aṣayan

Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-bs-, bi ninu data-bs-backdrop="".

Oruko Iru Aiyipada Apejuwe
backdrop boolian true Waye kan backdrop lori ara nigba ti offcanvas wa ni sisi
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ẹ:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Ọna Apejuwe
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).
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).
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).
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 ti o ko ba ṣe ipilẹṣẹ

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
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).
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).
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})