Offcanvas
Pangani zisankho zobisika mu projekiti yanu kuti muyendere, ngolo zogulira, ndi zina zambiri ndi makalasi ochepa komanso pulogalamu yathu yowonjezera ya JavaScript.
Momwe zimagwirira ntchito
Offcanvas ndi chigawo cham'mbali chomwe chitha kusinthidwa kudzera pa JavaScript kuti chiwoneke kuchokera kumanzere, kumanja, kapena kumunsi kwa malo owonera. Mabatani kapena anangula amagwiritsidwa ntchito ngati zoyambitsa zomwe zimalumikizidwa ndi zinthu zina zomwe mumasintha, ndipo data
mawonekedwe amagwiritsidwa ntchito kuyitanitsa JavaScript yathu.
- Offcanvas imagawana ma code ena a JavaScript ngati ma modals. M'malingaliro, ndizofanana, koma ndi mapulagini osiyana.
- Momwemonso, zosintha zina za Sass zama masitaelo ndi miyeso ya offcanvas zimatengera kusinthika kwa modal.
- Ikawonetsedwa, offcanvas imakhala ndi mawonekedwe osasinthika omwe mungadindidwe kuti mubise chinsalucho.
- Mofanana ndi ma modal, chinsalu chimodzi chokha chimatha kuwonetsedwa panthawi imodzi.
Mungodziwiratu! Poganizira momwe CSS imagwirira ntchito makanema ojambula, simungagwiritse ntchito margin
kapena translate
pa .offcanvas
chinthu. M'malo mwake, gwiritsani ntchito kalasi ngati chinthu chodzikulunga chodziyimira payokha.
prefers-reduced-motion
funso la media. Onani gawo
lochepetsedwa la zolemba zathu zofikira .
Zitsanzo
Zida za Offcanvas
Pansipa pali chitsanzo cha offcanvas chomwe chimawonetsedwa mwachisawawa (kudzera .show
pa .offcanvas
). Offcanvas imaphatikizapo kuthandizira mutu wokhala ndi batani lotseka ndi gulu losasankha lamagulu oyambira padding
. Tikukulimbikitsani kuti muphatikizepo mitu ya offcanvas ndikuchotsa zochita zilizonse ngati kuli kotheka, kapena mupereke choletsa.
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>
Chiwonetsero chamoyo
Gwiritsani ntchito mabatani omwe ali pansipa kuti muwonetse ndi kubisa chinthu cha offcanvas kudzera pa JavaScript chomwe chimasintha .show
kalasi pa chinthu ndi .offcanvas
kalasi.
.offcanvas
imabisa zomwe zili (zosakhazikika).offcanvas.show
zikuwonetsa zomwe zili
Mutha kugwiritsa ntchito ulalo wokhala ndi mawonekedwe href
, kapena batani lokhala ndi tanthauzo data-bs-target
. Muzochitika zonsezi, data-bs-toggle="offcanvas"
ndikofunikira.
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>
Kuyika
Palibe kuyika kokhazikika kwa zida zakunja, chifukwa chake muyenera kuwonjezera imodzi mwamakalasi osinthira pansipa;
.offcanvas-start
amayika chinsalu kumanzere kwa malo owonera (omwe ali pamwambapa).offcanvas-end
amayika zinsalu kumanja kwa malo owonera.offcanvas-top
amayika zinsalu pamwamba pa malo owonera.offcanvas-bottom
amayika zinsalu pansi pa malo owonera
Yesani pamwamba, kumanja, ndi zitsanzo zapansi pansipa.
Offcanvas pamwamba
<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 kumanja
<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 pansi
<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>
Kumbuyo
Kupukusa <body>
chinthucho kumayimitsidwa ngati chinsalu chakumbuyo ndi kumbuyo kwake zikuwonekera. Gwiritsani ntchito mawonekedwewo data-bs-scroll
kuti musinthe <body>
scrolling data-bs-backdrop
ndikusintha zakumbuyo.
Wakuda ndi scrolling
Yesani kusuntha tsamba lonse kuti muwone izi zikugwira ntchito.
Offcanvas yokhala ndi kumbuyo
.....
Kumbuyo ndi scrolling
Yesani kusuntha tsamba lonse kuti muwone izi zikugwira ntchito.
<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>
Kufikika
Popeza gulu la offcanvas mwalingaliro ndilokambirana, onetsetsani kuti aria-labelledby="..."
mwawonjezera -kutengera mutu wa offcanvas - ku .offcanvas
. Dziwani kuti simukuyenera kuwonjezera role="dialog"
popeza tidawonjezera kale kudzera pa JavaScript.
Sass
Zosintha
$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;
Kugwiritsa ntchito
Pulagi ya offcanvas imagwiritsa ntchito makalasi angapo ndi mawonekedwe kuti athe kunyamula zolemetsa:
.offcanvas
amabisa zomwe zili.offcanvas.show
zikuwonetsa zomwe zili.offcanvas-start
amabisa chinsalu kumanzere.offcanvas-end
amabisa chinsalu kumanja.offcanvas-bottom
amabisa offcanvas pansi
Onjezani batani lochotsa ndi mawonekedwe data-bs-dismiss="offcanvas"
, omwe amayambitsa magwiridwe antchito a JavaScript. Onetsetsani kuti mukugwiritsa ntchito <button>
chinthucho kuti muzichita bwino pazida zonse.
Kudzera muzochita za data
Sinthani
Onjezani data-bs-toggle="offcanvas"
ndi a data-bs-target
kapena href
ku chinthucho kuti muzitha kuwongolera chinthu chimodzi cha offcanvas. Malingaliro data-bs-target
amavomereza chosankha cha CSS kuti agwiritse ntchito. Onetsetsani kuti mwawonjezera kalasi offcanvas
ku chinthu cha offcanvas. Ngati mukufuna kuti isatseguke, onjezani kalasi yowonjezera show
.
Chotsani
Kuthamangitsidwa kumatha kutheka ndi lingaliro lomwe lili data
pa batani mkati mwa chinsalu monga momwe zasonyezedwera pansipa:
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
kapena pa batani kunja kwa chinsalu pogwiritsa ntchito data-bs-target
zomwe zili pansipa:
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Kudzera pa JavaScript
Yambitsani pamanja ndi:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Zosankha
Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-bs-
, monga mu data-bs-backdrop=""
.
Dzina | Mtundu | Zosasintha | Kufotokozera |
---|---|---|---|
backdrop |
boolean | true |
Ikani chithunzi chakumbuyo pathupi pomwe chinsalu chili chotsegula |
keyboard |
boolean | true |
Amatseka chinsalu pamene kiyi yothawa ikanikizidwa |
scroll |
boolean | false |
Lolani kuti thupi liziyenda pomwe chinsalu chili chotsegula |
Njira
Asynchronous njira ndi kusintha
Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .
Imatsegula zomwe muli nazo ngati chinthu chakunja. Imavomereza zomwe mungachite object
.
Mutha kupanga chitsanzo cha offcanvas ndi womanga, mwachitsanzo:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Njira | Kufotokozera |
---|---|
toggle |
Imatembenuza chinthu chakunja kuti chiwonetsedwe kapena kubisika. Imabwerera kwa woyimbirayo chinthu cha offcanvas chisanasonyezedwe kapena kubisika (ie chisanachitike shown.bs.offcanvas kapena hidden.bs.offcanvas chochitikacho). |
show |
Ikuwonetsa chinthu cha offcanvas. Imabwereranso kwa woyimbayo chinthu cha offcanvas chisanasonyezedwe (ie zisanachitike shown.bs.offcanvas ). |
hide |
Imabisa chinthu cha offcanvas. Imabwereranso kwa woyimbirayo chinthu cha offcanvas chisanabisike (ie zisanachitike hidden.bs.offcanvas ). |
getInstance |
Njira yosasunthika yomwe imakupatsani mwayi woti muthane ndi chithunzi cha offcanvas cholumikizidwa ndi chinthu cha DOM |
getOrCreateInstance |
Njira yosasunthika yomwe imakupatsani mwayi woti muthane ndi zochitika zakunja zolumikizidwa ndi chinthu cha DOM, kapena pangani china china ngati sichinayambike. |
Zochitika
Kalasi ya offcanvas ya Bootstrap imawulula zochitika zingapo zolumikizira magwiridwe antchito a offcanvas.
Mtundu wa chochitika | Kufotokozera |
---|---|
show.bs.offcanvas |
Chochitika ichi chimayaka nthawi yomweyo show njira yachitsanzo itayitanidwa. |
shown.bs.offcanvas |
Chochitikachi chimachotsedwa pamene chinthu cha offcanvas chawonetsedwa kwa wogwiritsa ntchito (chidikira kuti kusintha kwa CSS kumalize). |
hide.bs.offcanvas |
Chochitikachi chimathamangitsidwa nthawi yomweyo hide njirayo itayitanidwa. |
hidden.bs.offcanvas |
Chochitikachi chimachotsedwa pomwe chinthu cha offcanvas chabisidwa kwa wogwiritsa ntchito (chidikirira kuti kusintha kwa CSS kumalize). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})