Fara í aðalefni Farðu í skjalaleiðsögn
Check
in English

Offcanvas

Byggðu faldar hliðarstikur inn í verkefnið þitt fyrir siglingar, innkaupakörfur og fleira með nokkrum flokkum og JavaScript viðbótinni okkar.

Á þessari síðu

Hvernig það virkar

Offcanvas er hliðarstikuhluti sem hægt er að skipta um með JavaScript til að birtast frá vinstri, hægri, efstu eða neðri brún útsýnisgluggans. Hnappar eða akkeri eru notuð sem kveikjar sem eru tengdir tilteknum þáttum sem þú skiptir um og dataeiginleikar eru notaðir til að kalla fram JavaScript okkar.

  • Offcanvas deilir sumum af sama JavaScript kóða og modals. Hugmyndalega eru þau nokkuð lík, en þau eru aðskilin viðbætur.
  • Að sama skapi eru sumar Sass breytur upprunalega fyrir stíla og víddir offcanvas erft frá breytum modalsins.
  • Þegar það er sýnt inniheldur offcanvas sjálfgefna bakgrunn sem hægt er að smella á til að fela offcanvas.
  • Svipað og með formúlum er aðeins hægt að sýna einn offcanvas í einu.

Höfuð upp! Í ljósi þess hvernig CSS meðhöndlar hreyfimyndir geturðu ekki notað margineða translateá .offcanvasfrumefni. Í staðinn skaltu nota bekkinn sem sjálfstæðan umbúðaþátt.

Hreyfiáhrif þessa íhluts eru háð prefers-reduced-motionmiðlunarfyrirspurninni. Sjá kaflann um minni hreyfingu í aðgengisskjölunum okkar .

Dæmi

Offcanvas íhlutir

Hér að neðan er dæmi utan striga sem er sjálfgefið sýnt (í gegnum .showá .offcanvas). Offcanvas inniheldur stuðning fyrir haus með lokunarhnappi og valfrjálsan líkamsflokk fyrir upphafsstafi padding. Við mælum með því að þú hafir offcanvas hausa með afvísunaraðgerðum þegar mögulegt er, eða gefðu upp skýra frávísunaraðgerð.

Offcanvas
Efni fyrir offcanvas fer hér. Þú getur sett nánast hvaða Bootstrap íhlut eða sérsniðna þætti hér.
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>

Sýning í beinni

Notaðu hnappana hér að neðan til að sýna og fela offcanvas frumefni í gegnum JavaScript sem skiptir .showbekknum á frumefni með .offcanvasbekknum.

  • .offcanvasfelur efni (sjálfgefið)
  • .offcanvas.showsýnir efni

Þú getur notað tengil með hrefeigindinni eða hnapp með data-bs-targeteigindinni. Í báðum tilvikum data-bs-toggle="offcanvas"er krafist.

Tengill við href
Offcanvas
Einhver texti sem staðgengill. Í raunveruleikanum geturðu haft þá þætti sem þú hefur valið. Eins og, texti, myndir, listar osfrv.
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>

Skrun líkama

Slökkt er á því að fletta frumefninu þegar offcanvas <body>og bakgrunnur hans er sýnilegur. Notaðu data-bs-scrolleigindina til að virkja <body>skrun.

Offcanvas með fleti yfir líkama

Prófaðu að fletta restinni af síðunni til að sjá þennan valkost í aðgerð.

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íkamsfletting og bakgrunnur

Þú getur líka virkjað <body>skrun með sýnilegu bakgrunni.

Bakgrunnur með því að fletta

Prófaðu að fletta restinni af síðunni til að sjá þennan valkost í aðgerð.

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>

Statískt bakgrunn

Þegar bakgrunnur er stilltur á kyrrstæður, lokast ekki striga þegar smellt er fyrir utan það.

Offcanvas
Ég mun ekki loka ef þú smellir fyrir utan mig.
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>

Dökkt utan striga

Bætt við í v5.2.0

Breyttu útliti offcanvases með tólum til að passa betur við mismunandi samhengi eins og dökkar navbars. Hér bætum .text-bg-darkvið við .offcanvasog .btn-close-whitevið .btn-closefyrir rétta stíl með dökkum offcanvas. Ef þú ert með fellilista innan, íhugaðu einnig að bæta .dropdown-menu-darkvið .dropdown-menu.

Offcanvas

Settu offcanvas efni hér.

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>

Móttækilegur

Bætt við í v5.2.0

Móttækir offcanvas flokkar fela efni utan útsýnisgluggans frá tilteknum brotpunkti og niður. Fyrir ofan þann brotpunkt mun innihaldið hegða sér eins og venjulega. Til dæmis .offcanvas-lgfelur efni í offcanvas fyrir neðan brotpunktinn lg, en sýnir innihaldið fyrir ofan lgbrotpunktinn.

Breyttu stærð vafrans þíns til að sýna móttækilega offcanvas rofann.
Móttækilegur offcanvas

Þetta er efni innan .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>

Móttækilegir offcanvas-tímar eru fáanlegir fyrir hvern brotpunkt.

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

Staðsetning

Það er engin sjálfgefin staðsetning fyrir íhluti utan striga, svo þú verður að bæta við einum af breytingaflokkunum hér að neðan.

  • .offcanvas-startsetur utan striga vinstra megin við útsýnisgluggann (sýnt hér að ofan)
  • .offcanvas-endsetur offcanvas hægra megin við útsýnisgáttina
  • .offcanvas-topsetur offcanvas efst á útsýnisglugganum
  • .offcanvas-bottomsetur offcanvas neðst á útsýnisglugganum

Prófaðu efstu, hægri og neðstu dæmin hér að neðan.

Offcanvas toppur
...
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>
Offcanvas hægri
...
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>
Botn úr striga
...
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>

Aðgengi

Þar sem offcanvas spjaldið er hugmyndafræðilega myndgluggi, vertu viss um að bæta við aria-labelledby="..."– með vísan í offcanvas titilinn – við .offcanvas. Athugaðu að þú þarft ekki að bæta role="dialog"því við þar sem við bætum því nú þegar við með JavaScript.

CSS

Breytur

Bætt við í v5.2.0

Sem hluti af CSS breytum í þróun Bootstrap, notar offcanvas nú staðbundnar CSS breytur á .offcanvastil að auka rauntíma aðlögun. Gildi fyrir CSS breyturnar eru stillt í gegnum Sass, þannig að Sass aðlögun er enn studd líka.

  --#{$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};

Sass breytur

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

Notkun

Offcanvas viðbótin notar nokkra flokka og eiginleika til að takast á við þungar lyftingar:

  • .offcanvasfelur innihaldið
  • .offcanvas.showsýnir innihaldið
  • .offcanvas-startfelur offcanvasið til vinstri
  • .offcanvas-endfelur offcanvasið til hægri
  • .offcanvas-topfelur offcanvasið efst
  • .offcanvas-bottomfelur offcanvasið neðst

Bættu við hafnahnappi með data-bs-dismiss="offcanvas"eigindinni, sem ræsir JavaScript virknina. Gakktu úr skugga um að þú notir <button>þáttinn með því til að hegðun sé rétt í öllum tækjum.

Í gegnum gagnaeiginleika

Skipta

Bættu við data-bs-toggle="offcanvas"og a data-bs-targeteða hrefvið þáttinn til að úthluta sjálfkrafa stjórn á einum þætti utan striga. Eigindin data-bs-targetsamþykkir CSS val til að nota offcanvas á. Vertu viss um að bæta bekknum offcanvasvið offcanvas þáttinn. Ef þú vilt að það opni sjálfgefið skaltu bæta við viðbótarflokknum show.

Segja frá

Brottvísun er hægt að ná með dataeigindinni á hnappi í offcanvas eins og sýnt er hér að neðan:

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

eða á hnapp fyrir utan offcanvas með því að nota data-bs-targeteins og sýnt er hér að neðan:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Þó að báðar leiðir til að hafna offcanvas séu studdar, hafðu í huga að það að vísa utan frá offcanvas passar ekki við ARIA Authoring Practices Guide gluggann (modal) mynstur . Gerðu þetta á eigin ábyrgð.

Með JavaScript

Virkja handvirkt með:

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

Valmöguleikar

Þar sem hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript geturðu bætt valkostsheiti við data-bs-, eins og í data-bs-animation="{value}". Gakktu úr skugga um að breyta tilfelli tegundar valmöguleikans úr " camelCase " í " kebab-case " þegar þú sendir valkostina í gegnum gagnaeiginleika. Notaðu til dæmis data-bs-custom-class="beautifier"í staðinn fyrir data-bs-customClass="beautifier".

Frá og með Bootstrap 5.2.0 styðja allir íhlutir tilrauna frátekinn gagnaeiginleika data-bs-configsem getur hýst einfalda íhlutastillingu sem JSON streng. Þegar eining hefur data-bs-config='{"delay":0, "title":123}'og eiginleika verður data-bs-title="456"lokagildið og aðskildu gagnaeiginirnar munu hnekkja gildum sem gefin eru á . Að auki geta núverandi gagnaeiginleikar hýst JSON gildi eins og .title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Nafn Tegund Sjálfgefið Lýsing
backdrop Boolean eða strengurinnstatic true Settu bakgrunn á líkamann á meðan offcanvas er opið. Að öðrum kosti, tilgreindu staticfyrir bakgrunn sem lokar ekki offcanvasinu þegar smellt er á það.
keyboard Boolean true Lokar offcanvas þegar ýtt er á escape takkann.
scroll Boolean false Leyfðu að fletta meginmáli á meðan offcanvas er opið.

Aðferðir

Ósamstilltar aðferðir og umskipti

Allar API aðferðir eru ósamstilltar og hefja umskipti . Þeir snúa aftur til þess sem hringir um leið og umskiptin eru hafin en áður en þeim lýkur . Að auki verður aðferðakall á umbreytingarhluta hunsað .

Sjá JavaScript skjölin okkar fyrir frekari upplýsingar .

Virkjar efnið þitt sem offcanvas þáttur. Samþykkir valfrjálsa valkosti object.

Þú getur búið til offcanvas dæmi með byggingaraðilanum, til dæmis:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Aðferð Lýsing
getInstance Statísk aðferð sem gerir þér kleift að fá offcanvas tilvikið tengt DOM frumefni.
getOrCreateInstance Statísk aðferð sem gerir þér kleift að fá offcanvas tilvikið tengt DOM frumefni, eða búa til nýjan ef það var ekki frumstillt.
hide Felur frumefni utan striga. Snýr aftur til þess sem hringir áður en offcanvas þátturinn hefur verið falinn (þ.e. áður en hidden.bs.offcanvasatburðurinn á sér stað).
show Sýnir frumefni utan striga. Fer aftur til þess sem hringir áður en offcanvas þátturinn hefur verið sýndur (þ.e. áður en shown.bs.offcanvasatburðurinn á sér stað).
toggle Skiptir um að sýna eða falinn þátt utan striga. Snýr aftur til þess sem hringir áður en offcanvas þátturinn hefur verið sýndur eða falinn (þ.e. áður en atburðurinn shown.bs.offcanvaseða hidden.bs.offcanvasá sér stað).

Viðburðir

Offcanvas flokkur Bootstrap afhjúpar nokkra atburði til að tengja við offcanvas virkni.

Tegund viðburðar Lýsing
hide.bs.offcanvas Þessi atburður er ræstur strax þegar hideaðferðin hefur verið kölluð.
hidden.bs.offcanvas Þessi atburður er ræstur þegar offcanvas þáttur hefur verið falinn fyrir notandanum (mun bíða eftir að CSS umbreytingum ljúki).
hidePrevented.bs.offcanvas Þessi atburður er ræstur þegar offcanvas er sýnt, bakgrunnur hans er staticog smellur fyrir utan offcanvas er framkvæmdur. Atburðurinn er einnig ræstur þegar ýtt er á escape takkann og keyboardvalkosturinn er stilltur á false.
show.bs.offcanvas Þessi atburður ræsir strax þegar showtilviksaðferðin er kölluð.
shown.bs.offcanvas Þessi atburður er ræstur þegar offcanvas þáttur hefur verið gerður sýnilegur notanda (mun bíða eftir að CSS umbreytingum ljúki). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})