Aqbeż għall-kontenut prinċipali Aqbeż għan-navigazzjoni tad-dokumenti
in English

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 l- dataattributi jintużaw biex jinvokaw il-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.

Offcanvas
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
Offcanvas
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-topiqiegħed 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.

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-scrollattribut biex taqleb l <body>-iskrolljar u data-bs-backdropbiex 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">Backdrop 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;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

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

Toggle

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

Tkeċċi

It-tkeċċija tista' tinkiseb bl- dataattribut fuq buttuna fi ħdan l-offcanvas kif muri hawn taħt:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

jew fuq buttuna barra l-offcanvas billi tuża data-bs-targetkif muri hawn taħt:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Filwaqt li ż-żewġ modi biex titkeċċa offcanvas huma appoġġjati, żomm f'moħħok li t-tkeċċija minn barra offcanvas ma taqbilx mal -mudell tad-disinn tad-djalogu modali WAI-ARIA . Agħmel dan bir-riskju tiegħek.

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.offcanvasjew ).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.offcanvasjseħħ 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.offcanvasjseħħ 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 kinitx inizjalizzata

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 showjissejjaħ 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- hidemetodu 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...
})