Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
Check
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, viršutiniame 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
Čia pateikiamas „Offcanvas“ turinys. Čia galite įdėti beveik bet kurį „Bootstrap“ komponentą arba pasirinktinius elementus.
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>

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

Kūno slinkimas

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

Nedrobė su kūno slinkimu

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

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>

Kūno slinkimas ir fonas

Taip pat galite įjungti <body>slinkimą su matomu fonu.

Fonas su slinkimu

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

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>

Statinis fonas

Kai fonas nustatytas į statinį, išorinė drobė neužsidaro spustelėjus už jos ribų.

Offcanvas
Aš neuždarysiu, jei spustelėsite už manęs.
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>

Tamsi drobė

Pridėta 5.2.0 versijoje

Pakeiskite drobių išvaizdą naudodami paslaugų programas, kad geriau atitiktumėte jas įvairiuose kontekstuose, pvz., tamsios naršymo juostos. Čia mes pridedame .text-bg-darkprie .offcanvasir .btn-close-white, kad būtų .btn-closegalima tinkamai formuoti tamsią drobę. Jei turite išskleidžiamųjų meniu, taip pat apsvarstykite galimybę pridėti .dropdown-menu-darkprie .dropdown-menu.

Offcanvas

Čia patalpinkite offcanvas turinį.

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>

Atsakingas

Pridėta 5.2.0 versijoje

Reaguojančios „offcanvas“ klasės slepia turinį už peržiūros srities nuo nurodytos pertraukos taško ir žemyn. Virš šios pertraukos taško viduje esantis turinys veiks kaip įprasta. Pavyzdžiui, .offcanvas-lgslepia turinį offcanvas po lgpertraukos tašku, bet rodo turinį virš lūžio lgtaško.

Pakeiskite naršyklės dydį, kad būtų rodomas reaguojantis offcanvas perjungiklis.
Responsive offcanvas

Tai turinys, esantis .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>

Kiekvienam pertraukos taškui pasiekiamos interaktyvios „offcanvas“ klasės.

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

Į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
...
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 dešinėje
...
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>
Nedrobinis dugnas
...
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>

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

CSS

Kintamieji

Pridėta 5.2.0 versijoje

Kaip „Bootstrap“ besivystančio CSS kintamųjų metodo dalis, „offcanvas“ dabar naudoja vietinius CSS kintamuosius, .offcanvaskad pagerintų tinkinimą realiuoju laiku. CSS kintamųjų reikšmės nustatomos naudojant Sass, todėl Sass tinkinimas vis dar palaikomas.

  --#{$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 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-topslepia drobę viršuje
  • .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 drobės, atminkite, kad atmetimas iš išorės, neatitinka ARIA kūrimo praktikos vadovo dialogo (modalinio) modelio . Darykite tai savo rizika.

Per JavaScript

Įgalinti rankiniu būdu su:

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

Galimybės

Kadangi parinktis galima perduoti naudojant duomenų atributus arba „JavaScript“, galite pridėti parinkties pavadinimą prie data-bs-, kaip ir data-bs-animation="{value}". Perduodant parinktis per duomenų atributus , būtinai pakeiskite parinkties pavadinimo didžiosios raidės tipą iš „ camelCase “ į „ kebab-case “. Pavyzdžiui, naudokite data-bs-custom-class="beautifier"vietoj data-bs-customClass="beautifier".

Nuo 5.2.0 versijos „Bootstrap“ visi komponentai palaiko eksperimentinį rezervuotų duomenų atributą data-bs-config, kuriame galima laikyti paprastą komponento konfigūraciją kaip JSON eilutę. Kai elementas turi data-bs-config='{"delay":0, "title":123}'ir data-bs-title="456"atributus, galutinė titlereikšmė bus 456ir atskiri duomenų atributai nepaisys reikšmių, pateiktų data-bs-config. Be to, esamuose duomenų atributuose gali būti JSON reikšmės, pvz ., data-bs-delay='{"show":0,"hide":150}'.

vardas Tipas Numatytas apibūdinimas
backdrop boolean arba eilutęstatic true Taikykite foną ant kūno, kai atvira drobė yra atidaryta. Arba nurodykite staticfoną, kuris neuždaro drobės spustelėjus.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metodas apibūdinimas
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.
hide Slepia offcanvas elementą. Grįžta į skambinantįjį, kol offcanvas elementas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.offcanvasįvykį).
show Rodo offcanvas elementą. Grįžta į skambinantįjį, kol iš tikrųjų nebuvo parodytas offcanvas elementas (ty prieš shown.bs.offcanvasįvykį).
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

Renginiai

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

Renginio tipas apibūdinimas
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).
hidePrevented.bs.offcanvas Šis įvykis suaktyvinamas, kai rodomas offcanvas, rodomas jo fonas staticir atliekamas spustelėjimas už jos ribų. Įvykis taip pat suaktyvinamas, kai paspaudžiamas pabėgimo klavišas ir nustatyta keyboardparinktis false.
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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})