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

Čia pateikiamas „Offcanvas“ turinys. Č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

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.

...

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

...

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

...

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

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

.....

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">Backdroped 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;

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

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.

Per JavaScript

Įgalinti rankiniu būdu su:

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.offcanvas`arba ).`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 keletą įvykių, kad būtų galima prisijungti prie „offcanvas“ funkcijų.

Renginio tipas	apibūdinimas
`show.bs.offcanvas`	Šis įvykis suaktyvinamas iš karto, kai `show`iš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 `hide`iš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...
})

Offcanvas

Kaip tai veikia

Pavyzdžiai

Offcanvas komponentai

Offcanvas

Tiesioginė demonstracija

Offcanvas

Įdėjimas

Viršus nuo drobės

Offcanvas dešinėje

Nedrobinis dugnas

Fonas

Spalvota su slinkimu

Nedrobė su fonu

Fonas su slinkimu

Prieinamumas

Sass

Kintamieji

Naudojimas

Per duomenų atributus

Per JavaScript

Galimybės

Metodai

Asinchroniniai metodai ir perėjimai

Renginiai