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.

Fuq din il-paġ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 dataattributi 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 marginjew translatefuq .offcanvaselement. Minflok, uża l-klassi bħala element indipendenti tat-tgeżwir.

L-effett ta 'animazzjoni ta' dan il-komponent jiddependi fuq il 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' .showfuq .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.

Il-kontenut għall-offcanvas imur hawn. Tista 'tpoġġi kważi kull komponent Bootstrap jew elementi tad-dwana hawn.

<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- .showklassi fuq element mal- .offcanvasklassi.

.offcanvasjaħbi l-kontenut (default)
.offcanvas.showjuri kontenut

Tista' tuża link bl- hrefattribut, jew buttuna bl- data-bs-targetattribut. Fiż-żewġ każijiet, data-bs-toggle="offcanvas"huwa meħtieġ.

Rabta ma href

Xi test bħala placeholder. Fil-ħajja reali jista' jkollok l-elementi li għażilt. Bħal, test, stampi, listi, eċċ.

<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-startipoġġi barra l-kanvas fuq ix-xellug tal-faċċata (muri hawn fuq)
.offcanvas-endipoġġi offcanvas fuq il-lemin tal-viewport
.offcanvas-topipoġġi offcanvas fuq il-quċċata tal-viewport
.offcanvas-bottomipoġġi offcanvas fil-qiegħ tal-viewport

Ipprova l-eżempji ta 'fuq, tal-lemin u ta' isfel hawn taħt.

...

<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>

...

<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>

...

<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-scrollattribut biex taqleb l <body>-iskrolljar u data-bs-backdropbiex taqleb l-isfond.

Ipprova skrollja l-bqija tal-paġna biex tara din l-għażla fl-azzjoni.

.....

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:

.offcanvasjaħbi l-kontenut
.offcanvas.showjuri l-kontenut
.offcanvas-startjaħbi l-offcanvas fuq ix-xellug
.offcanvas-endjaħbi l-offcanvas fuq il-lemin
.offcanvas-bottomjaħ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-targetjew hrefmal-element biex awtomatikament tassenja l-kontroll ta 'element offcanvas wieħed. L- data-bs-targetattribut jaċċetta selettur CSS biex japplika l-offcanvas għalih. Kun żgur li żżid il-klassi offcanvasmal-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...
})

Offcanvas

Kif taħdem

Eżempji

Komponenti offcanvas

Offcanvas

Demo live

Offcanvas

Pjazzament

Fuq offcanvas

Offcanvas dritt

Offcanvas qiegħ

Sfond

Kkulurita bi scrolling

Offcanvas bi sfond

Sfond bi scrolling

Aċċessibilità

Sass

Varjabbli

Użu

Via attributi tad-data

Via JavaScript

Għażliet

Metodi

Metodi asinkroniċi u tranżizzjonijiet

Avvenimenti