Offcanvas
Ibni sidebars moħbija fil-proġett tiegħek għan-navigazzjoni, shopping carts, u aktar bi ftit klassijiet u l-plugin JavaScript tagħna.
Kif taħdem
Offcanvas huwa komponent tal-istrixxa tal-ġenb li jista' jinbidel permezz ta' JavaScript biex jidher mit-tarf tax-xellug, tal-lemin jew ta' isfel tal-viewport. Buttuni jew ankri jintużaw bħala triggers li huma mehmuża ma 'elementi speċifiċi li taqleb, u data
attributi jintużaw biex jinvokaw JavaScript tagħna.
- Offcanvas jaqsam xi wħud mill-istess kodiċi JavaScript bħall-modali. Kunċettwalment, huma pjuttost simili, iżda huma plugins separati.
- Bl-istess mod, xi varjabbli Sass tas-sors għall-istili u d-dimensjonijiet ta 'offcanvas jintirtu mill-varjabbli tal-modal.
- Meta jintwera, offcanvas jinkludi sfond default li jista' jiġi kklikkjat biex jaħbi l-offcanvas.
- Simili għall-modali, offcanvas wieħed biss jista' jintwera kull darba.
Irjus up! Minħabba kif is-CSS jimmaniġġja l-animazzjonijiet, ma tistax tuża margin
jew translate
fuq .offcanvas
element. Minflok, uża l-klassi bħala element indipendenti tat-tgeżwir.
prefers-reduced-motion
-mistoqsija tal-midja. Ara t-
taqsima tal-mozzjoni mnaqqsa tad-dokumentazzjoni tagħna dwar l-aċċessibbiltà .
Eżempji
Komponenti offcanvas
Hawn taħt hemm eżempju offcanvas li jidher awtomatikament (permezz ta' .show
fuq .offcanvas
). Offcanvas jinkludi appoġġ għal header b'buttuna mill-qrib u klassi tal-ġisem fakultattiva għal xi inizjali padding
. Nissuġġerixxu li tinkludi headers offcanvas b'azzjonijiet ta' ċaħda kull meta jkun possibbli, jew tipprovdi azzjoni ta' ċaħda espliċita.
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 live
Uża l-buttuni hawn taħt biex turi u taħbi element offcanvas permezz ta' JavaScript li jbiddel il- .show
klassi fuq element mal- .offcanvas
klassi.
.offcanvas
jaħbi l-kontenut (default).offcanvas.show
juri kontenut
Tista' tuża link bl- href
attribut, jew buttuna bl- data-bs-target
attribut. Fiż-żewġ każijiet, data-bs-toggle="offcanvas"
huwa meħtieġ.
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>
Pjazzament
M'hemm l-ebda tqegħid default għall-komponenti offcanvas, għalhekk trid iżżid waħda mill-klassijiet modifikaturi hawn taħt;
.offcanvas-start
ipoġġi barra l-kanvas fuq ix-xellug tal-faċċata (muri hawn fuq).offcanvas-end
ipoġġi offcanvas fuq il-lemin tal-viewport.offcanvas-top
ipoġġi offcanvas fuq il-quċċata tal-viewport.offcanvas-bottom
ipoġġi offcanvas fil-qiegħ tal-viewport
Ipprova l-eżempji ta 'fuq, tal-lemin u ta' isfel hawn taħt.
Fuq offcanvas
<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 dritt
<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 qiegħ
<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>
Sfond
L-iskrolljar tal- <body>
element huwa diżattivat meta offcanvas u l-isfond tiegħu jkunu viżibbli. Uża l- data-bs-scroll
attribut biex taqleb l <body>
-iskrolljar u data-bs-backdrop
biex taqleb l-isfond.
Kkulurita bi scrolling
Ipprova skrollja l-bqija tal-paġna biex tara din l-għażla fl-azzjoni.
Offcanvas bi sfond
.....
Sfond bi scrolling
Ipprova skrollja l-bqija tal-paġna biex tara din l-għażla fl-azzjoni.
<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>
Aċċessibilità
Peress li l-panel offcanvas huwa kunċettwalment dialog modali, kun żgur li żżid aria-labelledby="..."
—b'referenza għat-titlu offcanvas—ma' .offcanvas
. Innota li m'għandekx bżonn iżżid role="dialog"
peress li aħna diġà nżiduha permezz ta' JavaScript.
Sass
Varjabbli
$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;
Użu
Il-plugin offcanvas juża ftit klassijiet u attributi biex jimmaniġġja l-irfigħ tqil:
.offcanvas
jaħbi l-kontenut.offcanvas.show
juri l-kontenut.offcanvas-start
jaħbi l-offcanvas fuq ix-xellug.offcanvas-end
jaħbi l-offcanvas fuq il-lemin.offcanvas-bottom
jaħbi l-offcanvas fil-qiegħ
Żid buttuna tkeċċi bl- data-bs-dismiss="offcanvas"
attribut, li tixpruna l-funzjonalità JavaScript. Kun żgur li tuża l- <button>
element miegħu għal imġieba xierqa fl-apparati kollha.
Via attributi tad-data
Żid data-bs-toggle="offcanvas"
u a data-bs-target
jew href
mal-element biex awtomatikament tassenja l-kontroll ta 'element offcanvas wieħed. L- data-bs-target
attribut jaċċetta selettur CSS biex japplika l-offcanvas għalih. Kun żgur li żżid il-klassi offcanvas
mal-element offcanvas. Jekk tixtieq li tiftaħ awtomatikament, żid il-klassi addizzjonali show
.
Via JavaScript
Ippermetti manwalment ma':
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Għażliet
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-bs-
, bħal f' data-bs-backdrop=""
.
Isem | Tip | Default | Deskrizzjoni |
---|---|---|---|
backdrop |
boolean | true |
Applika sfond fuq il-ġisem waqt li l-offcanvas ikun miftuħ |
keyboard |
boolean | true |
Jagħlaq il-offcanvas meta tagħfas iċ-ċavetta tal-ħarba |
scroll |
boolean | false |
Ħalli l-iskrolljar tal-ġisem waqt li l-offcanvas ikun miftuħ |
Metodi
Metodi asinkroniċi u tranżizzjonijiet
Il-metodi kollha tal-API huma asinkroniċi u jibdew transizzjoni . Jirritornaw għand min iċempel hekk kif tinbeda t-tranżizzjoni iżda qabel ma tispiċċa . Barra minn hekk, sejħa ta' metodu fuq komponent ta' tranżizzjoni se tiġi injorata .
Ara d-dokumentazzjoni JavaScript tagħna għal aktar informazzjoni .
Jattiva l-kontenut tiegħek bħala element offcanvas. Jaċċetta għażliet fakultattivi object
.
Tista' toħloq istanza offcanvas mal-kostruttur, pereżempju:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metodu | Deskrizzjoni |
---|---|
toggle |
Jiddawwar element barra mill-kanvas biex jintwera jew moħbi. Jirritorna lil min iċempel qabel ma l-element offcanvas fil-fatt ġie muri jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.offcanvas jew ).hidden.bs.offcanvas |
show |
Juri element offcanvas. Jirritorna lil min iċempel qabel ma l-element offcanvas fil-fatt intwera (jiġifieri qabel ma shown.bs.offcanvas jseħħ l-avveniment). |
hide |
Jaħbi element offcanvas. Jirritorna lil min iċempel qabel ma l-element offcanvas fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.offcanvas jseħħ l-avveniment). |
getInstance |
Metodu statiku li jippermettilek tikseb l-istanza offcanvas assoċjata ma 'element DOM |
getOrCreateInstance |
Metodu statiku li jippermettilek li tikseb l-istanza offcanvas assoċjata ma 'element DOM, jew toħloq waħda ġdida f'każ li ma kienx inizjalizzat |
Avvenimenti
Il-klassi offcanvas ta 'Bootstrap tesponi ftit avvenimenti biex tgħaqqad il-funzjonalità offcanvas.
Tip ta' avveniment | Deskrizzjoni |
---|---|
show.bs.offcanvas |
Dan l-avveniment jispara immedjatament meta show jissejjaħ il-metodu tal-istanza. |
shown.bs.offcanvas |
Dan l-avveniment jiġi sparat meta element offcanvas ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew). |
hide.bs.offcanvas |
Dan l-avveniment jiġi sparat immedjatament meta l- hide metodu jkun ġie msejjaħ. |
hidden.bs.offcanvas |
Dan l-avveniment jiġi sparat meta element offcanvas ikun ġie moħbi mill-utent (se jistenna li jitlestew it-tranżizzjonijiet CSS). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})