Offcanvas
Adeiladwch fariau ochr cudd yn eich prosiect ar gyfer llywio, certiau siopa, a mwy gydag ychydig o ddosbarthiadau a'n ategyn JavaScript.
Sut mae'n gweithio
Mae Offcanvas yn gydran bar ochr y gellir ei thoglo trwy JavaScript i ymddangos o ymyl chwith, dde neu waelod y porth gwylio. Defnyddir botymau neu angorau fel sbardunau sydd ynghlwm wrth elfennau penodol y byddwch yn eu toglo, a data
defnyddir priodoleddau i ddefnyddio ein JavaScript.
- Mae Offcanvas yn rhannu rhywfaint o'r un cod JavaScript â moddau. Yn gysyniadol, maent yn eithaf tebyg, ond maent yn ategion ar wahân.
- Yn yr un modd, mae rhai newidynnau ffynhonnell Sass ar gyfer arddulliau a dimensiynau offcanvas yn cael eu hetifeddu o newidynnau'r moddol.
- Pan gaiff ei ddangos, mae offcanvas yn cynnwys cefndir rhagosodedig y gellir ei glicio i guddio'r offcanvas.
- Yn debyg i foddau, dim ond un allgynfas y gellir ei ddangos ar y tro.
Pennau i fyny! O ystyried sut mae CSS yn trin animeiddiadau, ni allwch ddefnyddio margin
nac translate
ar .offcanvas
elfen. Yn lle hynny, defnyddiwch y dosbarth fel elfen lapio annibynnol.
prefers-reduced-motion
ymholiad y cyfryngau. Gweler
adran cynnig gostyngol ein dogfennaeth hygyrchedd .
Enghreifftiau
Cydrannau oddi ar gynfas
Isod mae enghraifft offcanvas a ddangosir yn ddiofyn (trwy .show
ymlaen .offcanvas
). Mae Offcanvas yn cynnwys cefnogaeth ar gyfer pennawd gyda botwm cau a dosbarth corff dewisol ar gyfer rhai cychwynnol padding
. Rydym yn awgrymu eich bod yn cynnwys penawdau oddi ar y gynfas gyda chamau diswyddo lle bynnag y bo modd, neu'n darparu gweithred ddiswyddo benodol.
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 byw
Defnyddiwch y botymau isod i ddangos a chuddio elfen offcanvas trwy JavaScript sy'n toglo'r .show
dosbarth ar elfen gyda'r .offcanvas
dosbarth.
.offcanvas
yn cuddio cynnwys (diofyn).offcanvas.show
yn dangos cynnwys
Gallwch ddefnyddio dolen gyda'r href
priodoledd, neu botwm gyda'r data-bs-target
priodoledd. Yn y ddau achos, data-bs-toggle="offcanvas"
mae'n ofynnol.
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>
Lleoliad
Nid oes lleoliad rhagosodedig ar gyfer cydrannau offcanvas, felly mae'n rhaid i chi ychwanegu un o'r dosbarthiadau addasu isod;
.offcanvas-start
yn gosod oddi ar y cynfas ar ochr chwith y porth gwylio (a ddangosir uchod).offcanvas-end
yn gosod oddi ar y cynfas ar ochr dde'r olygfan.offcanvas-top
yn gosod oddi ar y cynfas ar ben y porth gwylio.offcanvas-bottom
yn gosod oddi ar y cynfas ar waelod y porth gwylio
Rhowch gynnig ar yr enghreifftiau uchaf, dde a gwaelod isod.
Top oddi ar y cynfas
<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 dde
<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>
gwaelod oddi ar y cynfas
<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>
Cefndir
Mae sgrolio'r <body>
elfen wedi'i analluogi pan fydd allcanvas a'i gefndir yn weladwy. Defnyddiwch y data-bs-scroll
priodoledd i doglo <body>
sgrolio ac data-bs-backdrop
i doglo'r cefndir.
Wedi'i liwio â sgrolio
Ceisiwch sgrolio gweddill y dudalen i weld yr opsiwn hwn ar waith.
Offcanvas gyda chefndir
.....
Wedi'i gefnu â sgrolio
Ceisiwch sgrolio gweddill y dudalen i weld yr opsiwn hwn ar waith.
<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>
Hygyrchedd
Gan mai deialog moddol yw'r panel offcanvas yn gysyniadol, gwnewch yn siŵr eich bod yn ychwanegu aria-labelledby="..."
—gan gyfeirio at deitl y cynfas—at .offcanvas
. Sylwch nad oes angen i chi ychwanegu role="dialog"
gan ein bod eisoes yn ei ychwanegu trwy JavaScript.
Sass
Newidynnau
$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;
Defnydd
Mae'r ategyn offcanvas yn defnyddio ychydig o ddosbarthiadau a phriodoleddau i drin y codi trwm:
.offcanvas
yn cuddio'r cynnwys.offcanvas.show
yn dangos y cynnwys.offcanvas-start
yn cuddio'r oddi ar y cynfas ar y chwith.offcanvas-end
yn cuddio'r oddi ar y cynfas ar y dde.offcanvas-bottom
yn cuddio'r offcanvas ar y gwaelod
Ychwanegu botwm diswyddo gyda'r data-bs-dismiss="offcanvas"
priodoledd, sy'n sbarduno ymarferoldeb JavaScript. Byddwch yn siwr i ddefnyddio'r <button>
elfen ag ef ar gyfer ymddygiad priodol ar draws pob dyfais.
Trwy briodoleddau data
Ychwanegu data-bs-toggle="offcanvas"
a data-bs-target
neu href
at yr elfen i aseinio rheolaeth o un elfen oddi ar y cynfas yn awtomatig. Mae'r data-bs-target
briodwedd yn derbyn dewisydd CSS i gymhwyso'r offcanvas iddo. Gwnewch yn siŵr eich bod chi'n ychwanegu'r dosbarth offcanvas
at yr elfen offcanvas. Os hoffech iddo agor diofyn, ychwanegwch y dosbarth ychwanegol show
.
Trwy JavaScript
Galluogi â llaw gyda:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Opsiynau
Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-bs-
, fel yn data-bs-backdrop=""
.
Enw | Math | Diofyn | Disgrifiad |
---|---|---|---|
backdrop |
boolaidd | true |
Rhowch gefndir ar y corff tra bod oddi ar y cynfas ar agor |
keyboard |
boolaidd | true |
Yn cau'r allcanvas pan fydd allwedd dianc yn cael ei wasgu |
scroll |
boolaidd | false |
Caniatáu i'r corff sgrolio tra bod y cynfas ar agor |
Dulliau
Dulliau a thrawsnewidiadau anghydamserol
Mae pob dull API yn asyncronaidd ac yn dechrau cyfnod pontio . Maen nhw'n dychwelyd at y galwr cyn gynted ag y bydd y cyfnod pontio wedi dechrau ond cyn iddo ddod i ben . Yn ogystal, bydd galwad dull ar gydran trawsnewid yn cael ei anwybyddu .
Yn actifadu'ch cynnwys fel elfen offcanvas. Yn derbyn opsiwn dewisol object
.
Gallwch greu enghraifft oddi ar gynfas gyda'r lluniwr, er enghraifft:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Dull | Disgrifiad |
---|---|
toggle |
Toglo elfen oddi ar gynfas i'w dangos neu ei chuddio. Yn dychwelyd i'r galwr cyn i'r elfen offcanvas gael ei dangos neu ei chuddio (hy cyn i'r digwyddiad shown.bs.offcanvas neu'r hidden.bs.offcanvas digwyddiad ddigwydd). |
show |
Yn dangos elfen oddi ar y cynfas. Yn dychwelyd i'r galwr cyn i'r elfen offcanvas gael ei dangos mewn gwirionedd (hy cyn i'r shown.bs.offcanvas digwyddiad ddigwydd). |
hide |
Yn cuddio elfen allcanvas. Yn dychwelyd i'r galwr cyn i'r elfen offcanvas gael ei chuddio mewn gwirionedd (hy cyn i'r hidden.bs.offcanvas digwyddiad ddigwydd). |
getInstance |
Dull statig sy'n eich galluogi i gael yr enghraifft oddi ar y cynfas yn gysylltiedig ag elfen DOM |
getOrCreateInstance |
Dull statig sy'n eich galluogi i gael yr enghraifft oddi ar y cynfas yn gysylltiedig ag elfen DOM, neu greu un newydd rhag ofn na chafodd ei gychwyn |
Digwyddiadau
Mae dosbarth allcanvas Bootstrap yn datgelu rhai digwyddiadau i'w cysylltu ag ymarferoldeb allcanvas.
Math o ddigwyddiad | Disgrifiad |
---|---|
show.bs.offcanvas |
Mae'r digwyddiad hwn yn tanio ar unwaith pan show elwir y dull enghraifft. |
shown.bs.offcanvas |
This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). |
hide.bs.offcanvas |
This event is fired immediately when the hide method has been called. |
hidden.bs.offcanvas |
This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})