Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
in English

Offcanvas

Sukurkite paslėptas šonines juostas savo projekte, kad galėtumėte naršyti, pirkinių krepšelius ir daugiau, naudodami keletą klasių ir mūsų „JavaScript“ papildinį.

Šiame puslapyje

Kaip tai veikia

„Offcanvas“ yra šoninės juostos komponentas, kurį galima perjungti naudojant „JavaScript“, kad jis būtų rodomas kairiajame, dešiniajame arba apatiniame peržiūros srities krašte. Mygtukai arba inkarai naudojami kaip aktyvikliai, kurie pridedami prie konkrečių jūsų perjungiamų elementų, o dataatributai naudojami „JavaScript“ iškviesti.

  • „Offcanvas“ dalijasi tuo pačiu „JavaScript“ kodu kaip ir modalai. Iš esmės jie yra gana panašūs, tačiau tai yra atskiri įskiepiai.
  • Panašiai kai kurie šaltinio Sass kintamieji offcanvas stiliams ir matmenims yra paveldimi iš modalo kintamųjų.
  • Kai rodoma, offcanvas apima numatytąjį foną, kurį galima spustelėti, kad paslėptumėte nedrobę.
  • Panašiai kaip ir modalai, vienu metu galima rodyti tik vieną drobę.

Galvas aukštyn! Atsižvelgiant į tai, kaip CSS apdoroja animacijas, negalite naudoti elemento marginarba translatejo . .offcanvasVietoj to naudokite klasę kaip nepriklausomą vyniojimo elementą.

Šio komponento animacijos efektas priklauso nuo prefers-reduced-motionmedijos užklausos. Žr . mūsų pritaikymo neįgaliesiems dokumentacijos skyrių „Sumažintas judėjimas“ .

Pavyzdžiai

Offcanvas komponentai

Žemiau pateikiamas offcanvas pavyzdys, kuris rodomas pagal numatytuosius nustatymus (per .showon .offcanvas). „Offcanvas“ apima antraštės su uždarymo mygtuku palaikymą ir pasirenkamą teksto klasę tam tikram pradiniam modeliui padding. Rekomenduojame, kai tik įmanoma, įtraukti antraštes „offcanvas“ su atmetimo veiksmais arba pateikti aiškų atmetimo veiksmą.

Offcanvas
„Offcanvas“ turinys pateikiamas čia. Čia galite įdėti beveik bet kurį „Bootstrap“ komponentą arba pasirinktinius elementus. 
<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>

Tiesioginė demonstracija

Naudokite toliau esančius mygtukus, kad rodytumėte ir paslėptumėte offcanvas elementą naudodami „JavaScript“, kuris perjungia .showklasę elemente su .offcanvasklase.

  • .offcanvasslepia turinį (numatytasis)
  • .offcanvas.showrodo turinį

Galite naudoti nuorodą su hrefatributu arba mygtuką su data-bs-targetatributu. Abiem atvejais data-bs-toggle="offcanvas"būtina.

Nuoroda su href
Offcanvas
Dalis teksto kaip rezervuota vieta. Realiame gyvenime jūs galite turėti elementus, kuriuos pasirinkote. Patinka, tekstas, vaizdai, sąrašai ir kt. 
<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>

Įdėjimas

Nėra numatytosios offcanvas komponentų paskirties vietos, todėl turite pridėti vieną iš toliau nurodytų modifikavimo klasių;

  • .offcanvas-startdeda drobę kairėje peržiūros srities pusėje (parodyta aukščiau)
  • .offcanvas-enddeda drobę peržiūros srities dešinėje
  • .offcanvas-topuždeda drobę peržiūros srities viršuje
  • .offcanvas-bottomuždeda drobę peržiūros srities apačioje

Išbandykite toliau pateiktus viršutinio, dešiniojo ir apatinio pavyzdžius.

Viršus nuo drobė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>
Offcanvas dešinėje
... 
<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>
Nedrobinis dugnas
... 
<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>

Fonas

Elemento slinkimas <body>išjungtas, kai matoma išorinė drobė ir jos fonas. Naudokite data-bs-scrollatributą, kad perjungtumėte <body>slinkimą ir data-bs-backdropfoną.

Spalvota su slinkimu

Pabandykite slinkti likusią puslapio dalį, kad pamatytumėte, kaip ši parinktis veikia.

Nedrobė su fonu

.....

Fonas su slinkimu

Pabandykite slinkti likusią puslapio dalį, kad pamatytumėte, kaip ši parinktis veikia.

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

Prieinamumas

Kadangi „offcanvas“ skydelis iš esmės yra modalinis dialogo langas, būtinai pridėkite aria-labelledby="..."– nurodant offcanvas pavadinimą – prie .offcanvas. Atminkite, kad jums nereikia pridėti, role="dialog"nes mes jau pridedame jį naudodami „JavaScript“.

Sass

Kintamieji

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

Naudojimas

„Offcanvas“ papildinys naudoja keletą klasių ir atributų, kad galėtų susidoroti su sunkiu kėlimu:

  • .offcanvasslepia turinį
  • .offcanvas.showrodo turinį
  • .offcanvas-startslepia drobę kairėje
  • .offcanvas-endslepia drobę dešinėje
  • .offcanvas-bottomslepia drobę apačioje

Pridėkite atsisakymo mygtuką su data-bs-dismiss="offcanvas"atributu, kuris suaktyvina „JavaScript“ funkciją. Būtinai naudokite <button>elementą su juo, kad tinkamai veiktų visuose įrenginiuose.

Per duomenų atributus

Perjungti

Pridėkite data-bs-toggle="offcanvas"ir a data-bs-targetarba hrefprie elemento, kad automatiškai priskirtumėte vieno offcanvas elemento valdymą. data-bs-targetAtributas priima CSS parinkiklį, kad būtų pritaikytas offcanvas . Būtinai pridėkite klasę offcanvasprie offcanvas elemento. Jei norite, kad jis būtų atidarytas pagal numatytuosius nustatymus, pridėkite papildomą klasę show.

Atsisakyti

Atleisti galima naudojant dataatributą ant drobės mygtuko, kaip parodyta toliau:

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

arba ant drobės ribų esančiame mygtuke , naudojant data-bs-targetkaip parodyta toliau:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Nors palaikomi abu būdai, kaip atsisakyti atviros drobės, atminkite, kad atsisakymas iš išorės neatitinka WAI-ARIA modalinio dialogo dizaino modelio . Darykite tai savo rizika.

Per JavaScript

Įgalinkite rankiniu būdu naudodami:

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

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-bs-, kaip ir data-bs-backdrop="".

vardas Tipas Numatytas apibūdinimas
backdrop loginis true Taikykite foną ant kūno, kai atvira drobė yra atidaryta
keyboard loginis true Paspaudus pabėgimo klavišą uždaroma išorinė drobė
scroll loginis false Leisti tekstą slinkti, kai atvira drobė yra atidaryta

Metodai

Asinchroniniai metodai ir perėjimai

Visi API metodai yra asinchroniniai ir pradeda perėjimą . Jie grįžta pas skambinantįjį, kai tik prasideda perėjimas, bet jam nepasibaigus . Be to, pereinamojo komponento metodo iškvietimas bus ignoruojamas .

Daugiau informacijos rasite mūsų JavaScript dokumentacijoje .

Suaktyvina turinį kaip išorinį elementą. Priima pasirenkamas parinktis object.

Galite sukurti offcanvas egzempliorių naudodami konstruktorių, pavyzdžiui:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metodas apibūdinimas
toggle Perjungia offcanvas elementą į rodomą arba paslėptą. Grįžta į skambinantįjį, kol iš tikrųjų nebuvo parodytas arba paslėptas elementas offcanvas (ty prieš įvykį shown.bs.offcanvasarba ).hidden.bs.offcanvas
show Rodo offcanvas elementą. Grįžta į skambinantįjį, kol iš tikrųjų nebuvo parodytas offcanvas elementas (ty prieš shown.bs.offcanvasįvykį).
hide Slepia offcanvas elementą. Grįžta į skambinantįjį, kol offcanvas elementas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.offcanvasįvykį).
getInstance Statinis metodas, leidžiantis gauti offcanvas egzempliorių, susietą su DOM elementu
getOrCreateInstance Statinis metodas, leidžiantis gauti offcanvas egzempliorių, susietą su DOM elementu, arba sukurti naują, jei jis nebuvo inicijuotas

Renginiai

„Bootstrap“ offcanvas klasė atskleidžia kelis įvykius, kad būtų galima prisijungti prie „offcanvas“ funkcijų.

Renginio tipas apibūdinimas
show.bs.offcanvas Šis įvykis suaktyvinamas iš karto, kai showiškviečiamas egzemplioriaus metodas.
shown.bs.offcanvas Šis įvykis suaktyvinamas, kai vartotojui matomas offcanvas elementas (lauks, kol bus baigti CSS perėjimai).
hide.bs.offcanvas Šis įvykis suaktyvinamas iš karto, kai hideiškviečiamas metodas.
hidden.bs.offcanvas Šis įvykis suaktyvinamas, kai offcanvas elementas buvo paslėptas nuo vartotojo (lauks, kol bus baigti CSS perėjimai). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})