Offcanvas
Theha maballo a patiloeng morerong oa hau bakeng sa ho sesa, likariki tsa ho reka, le tse ling ka litlelase tse 'maloa le plugin ea rona ea JavaScript.
Kamoo e sebetsang kateng
Offcanvas ke karolo e ka thōko e ka fetoloang ka JavaScript hore e hlahe ho tloha ka ho le letšehali, ka ho le letona kapa ka tlaase ho sebaka sa pono. Likonopo kapa li-ankora li sebelisoa e le lisebelisoa tse hoketsoeng linthong tse itseng tseo u li fetolang, 'me data
litšoaneleho li sebelisoa ho hohela JavaScript ea rona.
- Offcanvas e arolelana khoutu e tšoanang ea JavaScript joalo ka li-modal. Ka maikutlo, li tšoana hantle, empa ke li-plugins tse arohaneng.
- Ka mokhoa o ts'oanang, mefuta e meng ea mohloli oa Sass bakeng sa setaele le boholo ba offcanvas e futsitsoe ho tsoa mefuteng ea modal.
- Ha e bonts'oa, offcanvas e kenyelletsa sebopeho sa kamehla se ka tobetsoang ho pata offcanvas.
- Joalo ka li-modal, ho ka bonts'oa offcanvas e le 'ngoe feela ka nako.
Hlokomela! Ho latela hore na CSS e sebetsana joang le lipopae, u ke ke ua e sebelisa margin
kapa translate
holim'a .offcanvas
element. Ho e-na le hoo, sebelisa sehlopha e le ntho e ikemetseng ea ho phuthela.
prefers-reduced-motion
potso ea media. Sheba karolo e
fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .
Mehlala
Likarolo tsa Offcanvas
Ka tlase ke mohlala oa offcanvas o bonts'itsoeng ka ho sa feleng (ka .show
on .offcanvas
). Offcanvas e kenyelletsa tšehetso bakeng sa hlooho e nang le konopo e haufi le sehlopha sa boikhethelo sa 'mele bakeng sa sengoloa se itseng padding
. Re khothaletsa hore o kenyelletse lihlooho tsa offcanvas ka liketso tsa ho leleka neng kapa neng ha ho khonahala, kapa u fane ka ketso e hlakileng ea ho leleka.
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>
Pontšo e phelang
Sebelisa likonopo tse ka tlase ho bonts'a le ho pata karolo ea offcanvas ka JavaScript e fetolang .show
sehlopha ho element le .offcanvas
sehlopha.
.offcanvas
e pata litaba (ka ho sa feleng).offcanvas.show
e bontsha dikahare
U ka sebelisa sehokelo se nang le href
tšobotsi, kapa konopo e nang le data-bs-target
tšobotsi. Maemong ana ka bobeli, ho data-bs-toggle="offcanvas"
hlokahala.
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>
Ho beha
Ha ho na sebaka sa kamehla sa likarolo tsa offcanvas, kahoo o tlameha ho eketsa e 'ngoe ea lihlopha tsa ho fetola ka tlase;
.offcanvas-start
e beha ka ho le letšehali la boema-kepe (e bontšitsoeng ka holimo).offcanvas-end
e beha li-offcanvas ka ho le letona la boema-kepe.offcanvas-top
e beha li-offcanvas ka holim'a sebaka sa ho shebella.offcanvas-bottom
e beha li-offcanvas botlaaseng ba boema-kepe
Leka mehlala e ka holimo, e nepahetseng, le e ka tlaase mona ka tlase.
Offcanvas top
<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 hantle
<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 tlase
<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>
Ka morao
Ho tsamaisa <body>
element hoa tima ha offcanvas le bokamorao ba eona li bonahala. Sebelisa data-bs-scroll
tšobotsi ho fetola ho <body>
sisinyeha le data-bs-backdrop
ho fetola bokamorao.
E mebala e nang le ho phenya
Leka ho tsamaisetsa leqephe kaofela ho bona khetho ena e sebetsa.
Offcanvas e nang le bokamorao
.....
Ka morao ka ho tsamaisetsa
Leka ho tsamaisetsa leqephe kaofela ho bona khetho ena e sebetsa.
<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>
Ho fihlella
Kaha phanele ea offcanvas ka mokhoa o hlakileng ke puisano ea modal, etsa bonnete ba hore oa eketsa aria-labelledby="..."
- ho supa sehlooho sa offcanvas - ho .offcanvas
. Hlokomela hore ha ho hlokahale hore u kenye role="dialog"
kaha re se re e kentse ka JavaScript.
Sass
Lintho tse fapaneng
$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;
Tšebeliso
Plugin ea offcanvas e sebelisa lihlopha tse 'maloa le litšoaneleho ho sebetsana le ho phahamisa boima:
.offcanvas
e pata litaba.offcanvas.show
e bontsha dikahare.offcanvas-start
e pata sekoahelo ka letsohong le letšehali.offcanvas-end
e pata offcanvas ka ho le letona.offcanvas-bottom
e pata sekoahelo ka tlase
Kenya konopo ea ho qhala ka data-bs-dismiss="offcanvas"
tšobotsi, e hlahisang tšebetso ea JavaScript. Etsa bonnete ba hore o sebelisa <button>
element le eona bakeng sa boitšoaro bo nepahetseng ho lisebelisoa tsohle.
Ka litšobotsi tsa data
Eketsa data-bs-toggle="offcanvas"
le a data-bs-target
kapa href
ho element ho fana ka taolo ea karolo e le 'ngoe ea offcanvas. Tšobotsi e amohela khetho ea data-bs-target
CSS ho sebelisa offcanvas ho. Etsa bonnete ba hore o kenyelletsa sehlopha offcanvas
ho karolo ea offcanvas. Haeba u rata hore e bulehe ka mokhoa o tloaelehileng, eketsa sehlopha sa tlatsetso show
.
Ka JavaScript
Lumella ka letsoho ka:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Dikgetho
Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-bs-
, joalo ka data-bs-backdrop=""
.
Lebitso | Mofuta | Ea kamehla | Tlhaloso |
---|---|---|---|
backdrop |
boolean | true |
Sebetsa ka morao 'meleng ha offcanvas e butsoe |
keyboard |
boolean | true |
E koala offcanvas ha konopo ea escape e tobetsoa |
scroll |
boolean | false |
Lumella ho tsamaisa 'mele ha offcanvas e butsoe |
Mekhoa
Mekhoa ea Asynchronous le liphetoho
Mekhoa eohle ea API ha e- synchronous 'me e qala phetoho . Ba khutlela ho motho ea letselitseng hang ha phetoho e qala empa pele e fela . Ho feta moo, mohala oa mokhoa ho karolo ea phetoho o tla hlokomolohuoa .
Sheba litokomane tsa rona tsa JavaScript bakeng sa lintlha tse ling .
E kenya tšebetsong litaba tsa hau joalo ka karolo ea offcanvas. E amohela khetho ea boikhethelo object
.
O ka etsa mohlala oa offcanvas le sehahi, mohlala:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Mokhoa | Tlhaloso |
---|---|
toggle |
E fetolela karolo ea offcanvas hore e hlahe kapa e patiloe. E khutlela ho moletsi pele karolo ea offcanvas e bontšoa kapa e patiloe (ke hore pele ketsahalo shown.bs.offcanvas kapa hidden.bs.offcanvas ketsahalo e etsahala). |
show |
E bonts'a karolo ea offcanvas. E khutlela ho moletsi pele karolo ea offcanvas e bontšoa (ke hore pele shown.bs.offcanvas ketsahalo e etsahala). |
hide |
E pata karolo ea offcanvas. E khutlela ho moletsi pele karolo ea offcanvas e patiloe (ke hore pele hidden.bs.offcanvas ketsahalo e etsahala). |
getInstance |
Mokhoa o tsitsitseng o o lumellang ho fumana mohlala oa offcanvas o amanang le ntho ea DOM |
getOrCreateInstance |
Mokhoa o tsitsitseng o o lumellang ho fumana mohlala oa offcanvas o amanang le ntho ea DOM, kapa u thehe e ncha haeba e sa qalisoa |
Liketsahalo
Sehlopha sa offcanvas sa Bootstrap se pepesa liketsahalo tse 'maloa tsa ho hokahana le ts'ebetso ea offcanvas.
Mofuta oa ketsahalo | Tlhaloso |
---|---|
show.bs.offcanvas |
Ketsahalo ena e tuka hang hang ha show mokhoa oa mohlala o bitsoa. |
shown.bs.offcanvas |
Ketsahalo ena e ts'oaroa ha karolo ea offcanvas e se e bonahala ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). |
hide.bs.offcanvas |
Ketsahalo ena e lelekoa hang-hang ha hide mokhoa o bitsoa. |
hidden.bs.offcanvas |
Ketsahalo ena e ts'oaroa ha karolo ea offcanvas e patetsoe mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})