Offcanvas
Amboary ny sisiny miafina ao amin'ny tetikasanao ho an'ny fitetezana, sarety fiantsenana, ary maro hafa miaraka amin'ny kilasy vitsivitsy sy ny plugin JavaScript.
Ny fomba fiasa
Offcanvas dia singa sidebar izay azo avadika amin'ny alalan'ny JavaScript mba hiseho eo amin'ny sisiny havia, havanana, na ambany amin'ny seranan-tsambo. Ny bokotra na vatofantsika dia ampiasaina ho trigger izay miraikitra amin'ny singa manokana avadikao, ary data
ny toetra dia ampiasaina hiantsoana ny JavaScript.
- Offcanvas dia mizara ny sasany amin'ireo kaody JavaScript mitovy amin'ny modals. Raha ny hevitra dia mitovy ihany izy ireo, saingy plugins misaraka.
- Torak'izany ihany koa, ny fari-piainan'ny Sass loharano sasany ho an'ny fomba sy ny refin'ny offcanvas dia nolovaina tamin'ny fari-piainan'ny modal.
- Rehefa aseho, ny offcanvas dia misy laha-vitrana mahazatra azo kitihina hanafenana ny offcanvas.
- Mitovy amin'ny modals, offcanvas iray ihany no azo aseho amin'ny fotoana iray.
Fampitandremana! Raha jerena ny fomba fitantanana ny sary mihetsika ny CSS dia tsy afaka mampiasa margin
na translate
amin'ny .offcanvas
singa iray ianao. Ampiasao kosa ny kilasy ho singa famonosana mahaleo tena.
prefers-reduced-motion
fangatahan'ny haino aman-jery ny fiantraikan'io singa io. Jereo ny
fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .
OHATRA
Offcanvas singa
Ity ambany ity ny ohatra offcanvas izay aseho amin'ny alàlan'ny default (amin'ny alàlan'ny .show
on .offcanvas
). Ny Offcanvas dia misy fanohanan'ny lohapejy misy bokotra akaiky sy kilasin'ny vatana tsy voatery ho an'ny padding
. Manoro hevitra izahay ny hampidiranao lohapejy offcanvas miaraka amin'ny hetsika fandroahana raha azo atao, na manome hetsika fandroahana mazava.
Offcanvas
<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>
Demo mivantana
Ampiasao ireo bokotra etsy ambany mba hampisehoana sy hanafenana singa iray ivelan'ny canvas amin'ny alàlan'ny JavaScript izay manodina ny .show
kilasy amin'ny singa iray miaraka amin'ny .offcanvas
kilasy.
.offcanvas
manafina atiny (default).offcanvas.show
mampiseho votoaty
Azonao atao ny mampiasa rohy misy ilay href
toetra, na bokotra misy ilay data-bs-target
toetra. Amin'ireo tranga roa ireo, data-bs-toggle="offcanvas"
dia ilaina ny.
Offcanvas
<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>
fametrahana
Tsy misy fametrahana default ho an'ny singa offcanvas, noho izany dia tsy maintsy ampidirinao ny iray amin'ireo kilasy fanovana etsy ambany;
.offcanvas-start
mametraka offcanvas eo ankavian'ny seranan-tsambo (aseho etsy ambony).offcanvas-end
apetraka eo amin'ny sisiny ankavanan'ny seranan-tsambo.offcanvas-top
apetraho eo an-tampon'ny seranan-tsambo.offcanvas-bottom
apetraho eo amin'ny farany ambany amin'ny seranan-tsambo
Andramo ny ohatra ambony sy havanana ary ambany eto ambany.
Offcanvas ambony
<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 havanana
<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 ambany
<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>
resahana
Tsy mandeha ny scrolling ilay <body>
singa rehefa hita ny offcanvas sy ny lamosiny. Ampiasao ny data-bs-scroll
toetra hanodina ny <body>
horonan-taratasy sy data-bs-backdrop
hanodinana ny lamosina.
Miloko miaraka amin'ny horonana
Andramo ny horonan-taratasy sisa amin'ny pejy hahitanao ity safidy ity.
Offcanvas misy lamosina
.....
Mifototra amin'ny horonana
Andramo ny horonan-taratasy sisa amin'ny pejy hahitanao ity safidy ity.
<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">Backdroped 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>
Accessibility
Koa satria ny tontolon'ny offcanvas dia fifanakalozan-kevitra amin'ny fomba fijery, aza hadino ny manampy aria-labelledby="..."
— manondro ny lohatenin'ny offcanvas — amin'ny .offcanvas
. Mariho fa tsy mila manampy ianao role="dialog"
satria efa nampianay tamin'ny JavaScript.
Sass
hiovaova
$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;
Fampiasana
Ny plugin offcanvas dia mampiasa kilasy sy toetra vitsivitsy hiatrehana ny fampiakarana mavesatra:
.offcanvas
manafina ny votoatiny.offcanvas.show
mampiseho ny votoatiny.offcanvas-start
manafina ny offcanvas eo ankavia.offcanvas-end
manafina ny offcanvas eo ankavanana.offcanvas-bottom
manafina ny offcanvas eo ambany
Manampia bokotra manilika miaraka amin'ny data-bs-dismiss="offcanvas"
toetra, izay miteraka ny fampiasa JavaScript. Aza hadino ny mampiasa ilay <button>
singa miaraka aminy mba hahazoana fitondran-tena mety amin'ny fitaovana rehetra.
Amin'ny alàlan'ny data attributes
Ampio data-bs-toggle="offcanvas"
sy a data-bs-target
na href
amin'ny singa mba hanendry ho azy ny fanaraha-maso ny singa offcanvas iray. Ny data-bs-target
toetra dia manaiky mpifidy CSS hampiharana ny offcanvas. Ataovy azo antoka ny manampy ny kilasy offcanvas
amin'ny singa offcanvas. Raha tianao ny hisokatra ho default dia ampio ny kilasy fanampiny show
.
Amin'ny JavaScript
Alefa tanana amin'ny:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
FANDIKANA
Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-bs-
, toy ny ao amin'ny data-bs-backdrop=""
.
Anarana | Type | toerana misy anao | Description |
---|---|---|---|
backdrop |
boolean | true |
Asio lafika eo amin'ny vatana raha mbola misokatra ny offcanvas |
keyboard |
boolean | true |
Akatona ny offcanvas rehefa tsindriana ny fanalahidin'ny escape |
scroll |
boolean | false |
Avelao ny body scrolling raha mbola misokatra ny offcanvas |
fomba
Fomba sy fifindrana asynchronous
Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .
Jereo ny antontan-taratasintsika JavaScript raha mila fanazavana fanampiny .
Mampihetsika ny atiny ho singa offcanvas. Manaiky safidy azo atao object
.
Azonao atao ny mamorona ohatra offcanvas miaraka amin'ny mpanamboatra, ohatra:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
FOMBA | Description |
---|---|
toggle |
Manova singa offcanvas ho aseho na afenina. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny singa offcanvas na nafenina (izany hoe talohan'ny nitrangan'ny shown.bs.offcanvas na hidden.bs.offcanvas hetsika). |
show |
Mampiseho singa ivelan'ny canvas. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny singa offcanvas (izany hoe alohan'ny shown.bs.offcanvas nitrangan'ny hetsika). |
hide |
Manafina singa offcanvas. Miverina any amin'ny mpiantso alohan'ny nafenina ny singa offcanvas (izany hoe alohan'ny hidden.bs.offcanvas nitrangan'ny hetsika). |
getInstance |
Fomba static izay ahafahanao mahazo ny ohatra offcanvas mifandray amin'ny singa DOM |
getOrCreateInstance |
Fomba static izay ahafahanao mahazo ny ohatra offcanvas mifandray amin'ny singa DOM, na mamorona vaovao raha toa ka tsy natomboka izany |
zava-mitranga
Ny kilasin'ny offcanvas an'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa offcanvas.
Karazana hetsika | Description |
---|---|
show.bs.offcanvas |
Mirehitra avy hatrany ity hetsika ity rehefa show antsoina ny fomba fiasa. |
shown.bs.offcanvas |
Ity hetsika ity dia alefa rehefa misy singa offcanvas naseho ho hitan'ny mpampiasa (hiandry ny fahavitan'ny fifindrana CSS). |
hide.bs.offcanvas |
Ity hetsika ity dia alefa avy hatrany rehefa hide nantsoina ny fomba. |
hidden.bs.offcanvas |
Voaroaka ity hetsika ity rehefa nafenina tamin'ny mpampiasa ny singa offcanvas (hiandry ny fahavitan'ny fifindrana CSS). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})