Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
in English

Jashtë kanavacë

Ndërtoni shirita anësor të fshehur në projektin tuaj për navigim, karrocat e blerjeve dhe më shumë me disa klasa dhe shtojcën tonë JavaScript.

Në këtë faqe

Si punon

Offcanvas është një komponent i shiritit anësor që mund të ndryshohet nëpërmjet JavaScript për t'u shfaqur nga skaji i majtë, i djathtë ose i poshtëm i portës së pamjes. Butonat ose ankorat përdoren si nxitës që janë bashkangjitur me elementë specifikë që ju ndërroni dhe dataatributet përdoren për të thirrur JavaScript-in tonë.

  • Offcanvas ndan disa nga të njëjtin kod JavaScript si modalet. Konceptualisht, ato janë mjaft të ngjashme, por janë shtojca të veçanta.
  • Në mënyrë të ngjashme, disa variabla burimore Sass për stilet dhe dimensionet e offcanvas janë trashëguar nga variablat e modalit.
  • Kur shfaqet, offcanvas përfshin një sfond të paracaktuar që mund të klikohet për të fshehur offcanvas.
  • Ngjashëm me modalet, vetëm një kanavacë mund të shfaqet në të njëjtën kohë.

Kokat lart! Duke pasur parasysh se si CSS trajton animacionet, nuk mund të përdorni marginose translatenë një .offcanvaselement. Në vend të kësaj, përdorni klasën si një element mbështjellës të pavarur.

Efekti i animacionit të këtij komponenti varet nga prefers-reduced-motionpyetja e medias. Shikoni seksionin e lëvizjes së reduktuar të dokumentacionit tonë të aksesueshmërisë .

Shembuj

Komponentët jashtë kanavacës

Më poshtë është një shembull offcanvas që shfaqet si parazgjedhje (nëpërmjet .show) .offcanvas. Offcanvas përfshin mbështetje për një kokë me një buton mbylljeje dhe një klasë fakultative të trupit për disa fillestare padding. Ne ju sugjerojmë që të përfshini titujt e "offcanvas" me veprimet e heqjes dorë sa herë që është e mundur, ose të ofroni një veprim të qartë heqjeje.

Jashtë kanavacë
Përmbajtja për offcanvas shkon këtu. Këtu mund të vendosni pothuajse çdo komponent Bootstrap ose elementë të personalizuar. 
<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>

Demoja e drejtpërdrejtë

Përdorni butonat më poshtë për të shfaqur dhe fshehur një element offcanvas nëpërmjet JavaScript që ndërron .showklasën në një element me .offcanvasklasën.

  • .offcanvasfsheh përmbajtjen (e parazgjedhur)
  • .offcanvas.showtregon përmbajtjen

Mund të përdorni një lidhje me hrefatributin ose një buton me data-bs-targetatributin. Në të dyja rastet, data-bs-toggle="offcanvas"kërkohet.

Lidhja me href
Jashtë kanavacë
Disa tekste si mbajtëse vendesh. Në jetën reale mund të keni elementet që keni zgjedhur. Pëlqimet, teksti, imazhet, listat, etj. 
<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>

Vendosja

Nuk ka asnjë vendosje të paracaktuar për komponentët offcanvas, kështu që duhet të shtoni një nga klasat e modifikuesve më poshtë;

  • .offcanvas-startvendos kanavacën në të majtë të portës së shikimit (treguar më lart)
  • .offcanvas-endvendos offcanvas në të djathtë të portës së shikimit
  • .offcanvas-topvendos offcanvas në krye të portës së shikimit
  • .offcanvas-bottomvendos offcanvas në fund të portës së shikimit

Provoni shembujt e sipërm, të djathtë dhe të poshtëm më poshtë.

Top jashtë kanavacës
... 
<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>
E drejtë jashtë kanavacë
... 
<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>
Fundi jashtë kanavacës
... 
<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>

Sfondi

Lëvizja e <body>elementit çaktivizohet kur një fotografi jashtë kanavacë dhe sfondi i tij janë të dukshëm. Përdorni data-bs-scrollatributin për të ndryshuar <body>lëvizjen dhe data-bs-backdroppër të ndryshuar sfondin.

Ngjyrosur me lëvizje

Provoni të lëvizni pjesën tjetër të faqes për të parë këtë opsion në veprim.

Jashtë kanavacë me sfond

.....

Sfondi me lëvizje

Provoni të lëvizni pjesën tjetër të faqes për të parë këtë opsion në veprim.

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

Aksesueshmëria

Meqenëse paneli offcanvas është konceptualisht një dialog modal, sigurohuni që të shtoni aria-labelledby="..."—duke iu referuar titullit offcanvas—në .offcanvas. Vini re se nuk keni nevojë të shtoni role="dialog"pasi ne tashmë e shtojmë atë përmes JavaScript.

Sass

Variablat

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

Përdorimi

Shtojca offcanvas përdor disa klasa dhe atribute për të trajtuar ngritjen e rëndë:

  • .offcanvasfsheh përmbajtjen
  • .offcanvas.showtregon përmbajtjen
  • .offcanvas-startfsheh kanavacën në të majtë
  • .offcanvas-endfsheh kanavacën në të djathtë
  • .offcanvas-bottomfsheh kanavacën në fund

Shto një buton heqjeje me data-bs-dismiss="offcanvas"atributin, i cili aktivizon funksionalitetin JavaScript. Sigurohuni që të përdorni <button>elementin me të për sjelljen e duhur në të gjitha pajisjet.

Nëpërmjet atributeve të të dhënave

Ndrysho

Shto data-bs-toggle="offcanvas"dhe një data-bs-targetose hrefte elementi për të caktuar automatikisht kontrollin e një elementi offcanvas. Atributi data-bs-targetpranon një përzgjedhës CSS për të aplikuar offcanvas. Sigurohuni që të shtoni klasën offcanvasnë elementin offcanvas. Nëse dëshironi që të hapet si parazgjedhje, shtoni klasën shtesë show.

Largoje

Largimi mund të arrihet me dataatributin në një buton brenda kanavacës, siç tregohet më poshtë:

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

ose në një buton jashtë kanavacës duke përdorur data-bs-targetsiç tregohet më poshtë:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Ndërsa të dyja mënyrat për të hequr një offcanvas mbështeten, mbani në mend se heqja nga jashtë një offcanvas nuk përputhet me modelin e dizajnit të dialogut modal WAI-ARIA . Bëjeni këtë në rrezikun tuaj.

Përmes JavaScript

Aktivizo manualisht me:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-bs-, si në data-bs-backdrop="".

Emri Lloji E paracaktuar Përshkrim
backdrop logjike true Aplikoni një sfond në trup ndërsa offcanvas është i hapur
keyboard logjike true Mbyll offcanvas kur shtypet tasti i arratisjes
scroll logjike false Lejo lëvizjen e trupit ndërkohë që kavanozi është i hapur

Metodat

Metodat dhe tranzicionet asinkrone

Të gjitha metodat API janë asinkrone dhe fillojnë një tranzicion . Ata kthehen te thirrësi sapo të fillojë tranzicioni, por para se të përfundojë . Përveç kësaj, një thirrje metodë në një komponent në tranzicion do të injorohet .

Shikoni dokumentacionin tonë JavaScript për më shumë informacion .

Aktivizon përmbajtjen tuaj si një element offcanvas. Pranon një opsion opsional object.

Mund të krijoni një shembull offcanvas me konstruktorin, për shembull:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metoda Përshkrim
toggle Ndryshon një element offcanvas në të shfaqur ose të fshehur. Kthehet te thirrësi përpara se elementi offcanvas të jetë shfaqur ose fshehur (dmth. përpara se të ndodhë ngjarja shown.bs.offcanvasose ).hidden.bs.offcanvas
show Shfaq një element offcanvas. Kthehet te thirrësi përpara se të shfaqet në të vërtetë elementi offcanvas (dmth. përpara se shown.bs.offcanvasngjarja të ndodhë).
hide Fsheh një element offcanvas. Kthehet te thirrësi përpara se elementi offcanvas të jetë fshehur në të vërtetë (dmth. përpara se hidden.bs.offcanvasngjarja të ndodhë).
getInstance Metoda statike e cila ju lejon të merrni shembullin offcanvas të lidhur me një element DOM
getOrCreateInstance Metoda statike që ju lejon të merrni shembullin offcanvas të lidhur me një element DOM, ose të krijoni një të ri në rast se nuk ishte inicializuar

Ngjarjet

Klasa offcanvas e Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin offcanvas.

Lloji i ngjarjes Përshkrim
show.bs.offcanvas Kjo ngjarje ndizet menjëherë kur showthirret metoda e shembullit.
shown.bs.offcanvas Kjo ngjarje aktivizohet kur një element offcanvas është bërë i dukshëm për përdoruesin (do të presë që kalimet CSS të përfundojnë).
hide.bs.offcanvas Kjo ngjarje aktivizohet menjëherë kur hidemetoda është thirrur.
hidden.bs.offcanvas Kjo ngjarje aktivizohet kur një element offcanvas është fshehur nga përdoruesi (do të presë që kalimet CSS të përfundojnë). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})