Nje ya turubai
Unda pau zilizofichwa kwenye mradi wako kwa urambazaji, mikokoteni ya ununuzi, na zaidi ukitumia madarasa machache na programu-jalizi yetu ya JavaScript.
Inavyofanya kazi
Offcanvas ni sehemu ya upau wa kando ambayo inaweza kugeuzwa kupitia JavaScript ili kuonekana kutoka upande wa kushoto, kulia, au ukingo wa chini wa kituo cha kutazama. Vifungo au nanga hutumika kama vichochezi ambavyo vimeambatishwa kwa vipengele maalum unavyogeuza, na data
sifa hutumika kuomba JavaScript yetu.
- Offcanvas hushiriki baadhi ya msimbo sawa wa JavaScript kama moduli. Kwa kweli, zinafanana kabisa, lakini ni programu-jalizi tofauti.
- Vile vile, viambajengo vingine vya chanzo vya Sass vya mitindo na vipimo vya offcanvas vinarithiwa kutoka kwa vigeu vya modal.
- Inapoonyeshwa, offcanvas inajumuisha mandhari chaguomsingi ambayo inaweza kubofya ili kuficha offcanvas.
- Sawa na moduli, ni turubai moja pekee inayoweza kuonyeshwa kwa wakati mmoja.
Vichwa juu! Kwa kuzingatia jinsi CSS inavyoshughulikia uhuishaji, huwezi kutumia margin
au translate
kwenye .offcanvas
kipengele. Badala yake, tumia darasa kama nyenzo huru ya kufunga.
prefers-reduced-motion
hoja ya midia. Tazama
sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .
Mifano
Vipengele vya Offcanvas
Ifuatayo ni mfano wa offcanvas ambao unaonyeshwa kwa chaguo-msingi (kupitia .show
kwenye .offcanvas
). Offcanvas inajumuisha matumizi ya kichwa kilicho na kitufe cha kufunga na darasa la hiari la mwili kwa baadhi ya awali padding
. Tunapendekeza kwamba ujumuishe vichwa vya offcanvas na vitendo vya kuondoa kila inapowezekana, au utoe hatua ya wazi ya kukataa.
Nje ya turubai
<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>
Onyesho la moja kwa moja
Tumia vitufe vilivyo hapa chini ili kuonyesha na kuficha kipengele cha offcanvas kupitia JavaScript ambacho hugeuza .show
darasa kwenye kipengele na .offcanvas
darasa.
.offcanvas
huficha yaliyomo (chaguo-msingi).offcanvas.show
inaonyesha maudhui
Unaweza kutumia kiungo href
kilicho na sifa, au kitufe kilicho na data-bs-target
sifa. Katika visa vyote viwili, data-bs-toggle="offcanvas"
inahitajika.
Nje ya turubai
<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>
Uwekaji
Hakuna uwekaji chaguomsingi wa vijenzi vya offcanvas, kwa hivyo ni lazima uongeze mojawapo ya madarasa ya kurekebisha hapa chini;
.offcanvas-start
huweka turubai upande wa kushoto wa kituo cha kutazama (kilichoonyeshwa hapo juu).offcanvas-end
inaweka nje ya turubai upande wa kulia wa kituo cha kutazama.offcanvas-top
huweka nje ya turubai juu ya kituo cha kutazama.offcanvas-bottom
huweka turubai chini ya kituo cha kutazama
Jaribu mifano ya juu, kulia na ya chini hapa chini.
Juu ya turubai
<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 kulia
<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>
Chini ya turubai
<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>
Mandhari
Usogezaji wa <body>
kipengele huzimwa wakati turubai na mandhari yake yanapoonekana. Tumia data-bs-scroll
sifa kugeuza <body>
kusogeza na data-bs-backdrop
kugeuza mandhari.
Imepakwa rangi na kusongesha
Jaribu kusogeza sehemu iliyobaki ya ukurasa ili kuona chaguo hili likiendelea.
Offcanvas na mandhari
.....
Imewekwa nyuma kwa kusogeza
Jaribu kusogeza sehemu iliyobaki ya ukurasa ili kuona chaguo hili likiendelea.
<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>
Ufikivu
Kwa kuwa kidirisha cha offcanvas kimawazo ni kidadisi cha mtindo, hakikisha kuwa aria-labelledby="..."
umeongeza - ukirejelea kichwa cha offcanvas - kwa .offcanvas
. Kumbuka kuwa huhitaji kuongeza role="dialog"
kwa kuwa tayari tunaiongeza kupitia JavaScript.
Sass
Vigezo
$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;
Matumizi
Programu-jalizi ya offcanvas hutumia madarasa na sifa chache kushughulikia unyanyuaji mzito:
.offcanvas
huficha yaliyomo.offcanvas.show
inaonyesha yaliyomo.offcanvas-start
huficha turubai upande wa kushoto.offcanvas-end
huficha turubai upande wa kulia.offcanvas-bottom
huficha turubai chini
Ongeza kitufe cha kuondoa chenye data-bs-dismiss="offcanvas"
sifa, ambayo huanzisha utendaji wa JavaScript. Hakikisha umetumia <button>
kipengele nacho kwa tabia ifaayo kwenye vifaa vyote.
Kupitia sifa za data
Ongeza data-bs-toggle="offcanvas"
na a data-bs-target
au href
kwa kipengele ili kukabidhi kiotomatiki udhibiti wa kipengele kimoja cha nje ya turubai. Sifa data-bs-target
inakubali kiteuzi cha CSS cha kutumia turubai. Hakikisha umeongeza darasa offcanvas
kwenye kipengele cha offcanvas. Ikiwa ungependa ifungue chaguomsingi, ongeza darasa la ziada show
.
Kupitia JavaScript
Washa wewe mwenyewe na:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Chaguo
Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-bs-
, kama katika data-bs-backdrop=""
.
Jina | Aina | Chaguomsingi | Maelezo |
---|---|---|---|
backdrop |
boolean | true |
Tumia mandhari kwenye mwili wakati offcanvas imefunguliwa |
keyboard |
boolean | true |
Hufunga turubai wakati kitufe cha Escape kinapobozwa |
scroll |
boolean | false |
Ruhusu usogezaji wa mwili wakati offcanvas imefunguliwa |
Mbinu
Njia za Asynchronous na mabadiliko
Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .
Huwasha maudhui yako kama kipengele cha nje ya turubai. Inakubali chaguo za hiari object
.
Unaweza kuunda mfano wa offcanvas na mjenzi, kwa mfano:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Njia | Maelezo |
---|---|
toggle |
Hugeuza kipengele cha offcanvas kuonyeshwa au kufichwa. Hurejesha kwa anayepiga kabla kipengele cha offcanvas hakijaonyeshwa au kufichwa (yaani kabla ya tukio shown.bs.offcanvas au hidden.bs.offcanvas tukio). |
show |
Inaonyesha kipengele cha offcanvas. Hurejesha kwa anayepiga kabla kipengele cha offcanvas hakijaonyeshwa (yaani kabla ya shown.bs.offcanvas tukio kutokea). |
hide |
Huficha kipengele cha offcanvas. Hurejesha kwa anayepiga kabla kipengele cha offcanvas hakijafichwa (yaani kabla ya hidden.bs.offcanvas tukio kutokea). |
getInstance |
Njia tuli ambayo hukuruhusu kupata mfano wa offcanvas unaohusishwa na kipengee cha DOM |
getOrCreateInstance |
Njia tuli ambayo hukuruhusu kupata mfano wa offcanvas unaohusishwa na kipengee cha DOM, au kuunda mpya ikiwa haikuanzishwa. |
Matukio
Darasa la offcanvas la Bootstrap linafichua matukio machache ya kuunganisha kwenye utendaji wa offcanvas.
Aina ya tukio | Maelezo |
---|---|
show.bs.offcanvas |
Tukio hili huwaka mara moja wakati show njia ya mfano inaitwa. |
shown.bs.offcanvas |
Tukio hili linafutwa wakati kipengele cha offcanvas kimefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika). |
hide.bs.offcanvas |
Tukio hili linafukuzwa mara moja wakati hide njia imeitwa. |
hidden.bs.offcanvas |
Tukio hili linafutwa wakati kipengele cha offcanvas kimefichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})