Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
Check
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ë, i sipërm 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.
html 
<div class="offcanvas offcanvas-start show" 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" 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.
html 
<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

Lëvizja e trupit

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ë aktivizuar <body>lëvizjen.

Jashtë kanavacë me lëvizje trupore

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

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

Lëvizja e trupit dhe sfondi

Mund të aktivizoni gjithashtu <body>lëvizjen me një sfond të dukshëm.

Sfondi me lëvizje

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

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

Sfondi statik

Kur sfondi është caktuar në statik, kanavacë jashtë nuk do të mbyllet kur klikoni jashtë tij.

Jashtë kanavacë
Nuk do të mbyll nëse klikoni jashtë meje.
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Pëlhurë e errët

Shtuar në v5.2.0

Ndryshoni pamjen e kanavacave jashtë me programe ndihmëse për t'i përshtatur më mirë me kontekste të ndryshme si shiritat e errët navigimi. Këtu i shtojmë dhe .text-bg-darkpër stilimin e duhur me një kanavacë të errët. Nëse keni zbritje brenda, merrni parasysh gjithashtu të shtoni në ..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Jashtë kanavacë

Vendosni përmbajtjen offcanvas këtu.

html 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Të përgjegjshme

Shtuar në v5.2.0

Klasat reaguese offcanvas fshehin përmbajtjen jashtë portit të pamjes nga një pikë ndërprerjeje e caktuar dhe poshtë. Mbi atë pikë ndërprerjeje, përmbajtja brenda do të sillet si zakonisht. Për shembull, .offcanvas-lgfsheh përmbajtjen në një kanavacë jashtë pikës së ndërprerjes lg, por tregon përmbajtjen mbi pikën e lgndërprerjes.

Ndryshoni madhësinë e shfletuesit tuaj për të shfaqur ndryshimin e përgjegjshëm offcanvas.
Offcanvas reaguese

Kjo është përmbajtje brenda një .offcanvas-lg.

html 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Klasat e përgjegjshme offcanvas janë të disponueshme për çdo pikë ndërprerjeje.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

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ë
...
html 
<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
E drejtë jashtë kanavacë
...
html 
<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Fundi jashtë kanavacës
...
html 
<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </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.

CSS

Variablat

Shtuar në v5.2.0

Si pjesë e qasjes në zhvillim të variablave CSS të Bootstrap, offcanvas tani përdor variabla lokale CSS .offcanvaspër personalizim të përmirësuar në kohë reale. Vlerat për variablat CSS vendosen nëpërmjet Sass, kështu që personalizimi i Sass mbështetet gjithashtu.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Variablat Sass

$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-topfsheh kanavacën në krye
  • .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 dialogut (modal) të Udhëzuesit të Praktikave të Autorizimit ARIA . Bëjeni këtë në rrezikun tuaj.

Përmes JavaScript

Aktivizo manualisht me:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Opsione

Meqenëse opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript, ju mund të shtoni një emër opsioni në data-bs-, si në data-bs-animation="{value}". Sigurohuni që të ndryshoni llojin e rastit të emrit të opsionit nga “ CamelCase ” në “ kebab-case ” kur kaloni opsionet përmes atributeve të të dhënave. Për shembull, përdorni data-bs-custom-class="beautifier"në vend të data-bs-customClass="beautifier".

Që nga Bootstrap 5.2.0, të gjithë komponentët mbështesin një atribut eksperimental të të dhënave të rezervuara data-bs-configqë mund të vendosë konfigurimin e thjeshtë të komponentit si një varg JSON. Kur një element ka data-bs-config='{"delay":0, "title":123}'dhe data-bs-title="456"atribute, titlevlera përfundimtare do të jetë 456dhe atributet e veçanta të të dhënave do të zëvendësojnë vlerat e dhëna në data-bs-config. Përveç kësaj, atributet ekzistuese të të dhënave janë në gjendje të strehojnë vlera JSON si data-bs-delay='{"show":0,"hide":150}'.

Emri Lloji E paracaktuar Përshkrim
backdrop boolean ose vargunstatic true Aplikoni një sfond në trup ndërsa offcanvas është i hapur. Përndryshe, specifikoni staticpër një sfond që nuk e mbyll kanavacë kur klikon.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metoda Përshkrim
getInstance Metoda statike e cila ju lejon të merrni shembullin offcanvas të lidhur me një element DOM.
getOrCreateInstance Metoda statike e cila ju lejon të merrni shembullin offcanvas të lidhur me një element DOM, ose të krijoni një të ri në rast se nuk ishte inicializuar.
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ë).
show Shfaq një element offcanvas. Kthehet te thirrësi përpara se elementi offcanvas të jetë shfaqur në të vërtetë (dmth. përpara se shown.bs.offcanvasngjarja të ndodhë).
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

Ngjarjet

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

Lloji i ngjarjes Përshkrim
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ë).
hidePrevented.bs.offcanvas Kjo ngjarje aktivizohet kur shfaqet offcanvas, sfondi i saj është staticdhe një klikim jashtë offcanvas kryhet. Ngjarja ndizet gjithashtu kur shtypet tasti i ikjes dhe keyboardopsioni vendoset në false.
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ë). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})