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

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

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

...

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

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.

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

......

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.offcanvas`tabi `hidden.bs.offcanvas`iṣẹ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.offcanvas`iṣẹ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.offcanvas`iṣẹ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 `show`apẹẹ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...
})

Offcanfasi

Bawo ni o ṣe n ṣiṣẹ

Awọn apẹẹrẹ

Offcanvas irinše

Offcanfasi

Live demo

Offcanfasi

Ipo

Offcanvas oke

Offcanvas ọtun

Offcanvas isalẹ

Backdrop

Awọ pẹlu yi lọ

Offcanvas pẹlu backdrop

Backdrop pẹlu yi lọ

Wiwọle

Sass

Awọn oniyipada

Lilo

Nipasẹ awọn abuda data

Yipada

Yọọ kuro

Nipasẹ JavaScript

Awọn aṣayan

Awọn ọna

Awọn ọna Asynchronous ati awọn iyipada

Awọn iṣẹlẹ