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 data
awọ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 margin
tabi translate
lori nkan .offcanvas
kan. Dipo, lo kilaasi bi ohun elo murasilẹ ominira.
prefers-reduced-motion
ibeere 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ẹ .show
titan .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
<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 .show
yi kilasi pada lori eroja pẹlu .offcanvas
kilasi naa.
.offcanvas
tọju akoonu (aiyipada).offcanvas.show
fihan akoonu
O le lo ọna asopọ kan pẹlu href
abuda, tabi bọtini kan pẹlu data-bs-target
abuda. Ni awọn ọran mejeeji, o data-bs-toggle="offcanvas"
nilo.
Offcanfasi
<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-start
gbe offcanfasi si apa osi ti oju wiwo (ti o han loke).offcanvas-end
gbe offcanvas lori ọtun ti awọn viewport.offcanvas-top
gbe offcanvas lori oke wiwo.offcanvas-bottom
gbe 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-scroll
abuda naa lati yi yiyi pada <body>
ati data-bs-backdrop
lati 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:
.offcanvas
hides awọn akoonu.offcanvas.show
fihan akoonu.offcanvas-start
hides awọn offcanvas lori osi.offcanvas-end
hides awọn offcanvas lori ọtun.offcanvas-bottom
hides 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-target
tabi href
si eroja lati fi iṣakoso laifọwọyi ti ẹya kanfasi kan. Ẹya naa data-bs-target
gba oluyan CSS kan lati lo offcanvas si. Rii daju lati ṣafikun kilasi offcanvas
naa 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 data
abuda 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-target
bi 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>
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 .
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...
})