Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
in English

Offcanvas

Izveidojiet slēptās sānjoslas savā projektā navigācijai, iepirkumu groziem un citām iespējām, izmantojot dažas nodarbības un mūsu JavaScript spraudni.

Šajā lapā

Kā tas strādā

Offcanvas ir sānjoslas komponents, kuru var pārslēgt, izmantojot JavaScript, lai tas tiktu parādīts skata loga kreisajā, labajā vai apakšējā malā. Pogas vai enkuri tiek izmantoti kā aktivizētāji, kas ir pievienoti konkrētiem elementiem, kurus pārslēdzat, un dataatribūti tiek izmantoti, lai izsauktu mūsu JavaScript.

  • Offcanvas koplieto daļu no tā paša JavaScript koda kā modāļiem. Konceptuāli tie ir diezgan līdzīgi, taču tie ir atsevišķi spraudņi.
  • Tāpat daži avota Sass mainīgie offcanvas stiliem un izmēriem tiek mantoti no modāla mainīgajiem.
  • Kad tiek rādīts, offcanvas ietver noklusējuma fonu, uz kura var noklikšķināt, lai paslēptu offcanvas.
  • Līdzīgi kā modāļiem, vienlaikus var parādīt tikai vienu offcanvu.

Uzmanību! Ņemot vērā to, kā CSS apstrādā animācijas, jūs nevarat izmantot marginvai translateuz .offcanvaselementa. Tā vietā izmantojiet klasi kā neatkarīgu iesaiņojuma elementu.

Šī komponenta animācijas efekts ir atkarīgs no prefers-reduced-motionmultivides vaicājuma. Skatiet mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .

Piemēri

Offcanvas komponenti

Tālāk ir parādīts piemērs ārpus kanvas, kas tiek rādīts pēc noklusējuma (izmantojot .showon .offcanvas). Offcanvas ietver atbalstu galvenei ar aizvēršanas pogu un izvēles pamatklasi dažiem sākotnējiem padding. Iesakām, kad vien iespējams, iekļaut offcanvas galvenes ar noraidīšanas darbībām vai sniegt skaidru noraidīšanas darbību.

Offcanvas
Saturs offcanvas ir šeit. Šeit varat ievietot gandrīz jebkuru Bootstrap komponentu vai pielāgotus 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>

Demo tiešraidē

Izmantojiet tālāk esošās pogas, lai rādītu un paslēptu offcanvas elementu, izmantojot JavaScript, kas pārslēdz .showklasi elementā ar .offcanvasklasi.

  • .offcanvasslēpj saturu (noklusējums)
  • .offcanvas.showparāda saturu

Varat izmantot saiti ar hrefatribūtu vai pogu ar data-bs-targetatribūtu. Abos gadījumos data-bs-toggle="offcanvas"ir nepieciešams.

Saite ar href
Offcanvas
Dažs teksts kā vietturis. Reālajā dzīvē jums var būt jūsu izvēlētie elementi. Patīk, teksts, attēli, saraksti utt. 
<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>

Izvietojums

Offcanvas komponentiem nav noklusējuma izvietojuma, tāpēc jums ir jāpievieno viena no tālāk norādītajām modifikatoru klasēm;

  • .offcanvas-startnovieto offcanvas skata loga kreisajā pusē (parādīts iepriekš)
  • .offcanvas-endnovieto offcanvas skata loga labajā pusē
  • .offcanvas-topnovieto offcanvas skatu loga augšpusē
  • .offcanvas-bottomnovieto offcanvas skata loga apakšā

Izmēģiniet augšējo, labo un apakšējo piemēru tālāk.

Offcanvas tops
... 
<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 tiesības
... 
<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>
Offcanvas apakšdaļa
... 
<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>

Fons

Elementa ritināšana <body>ir atspējota, ja ir redzams audekls un tā fons. Izmantojiet data-bs-scrollatribūtu, lai pārslēgtu <body>ritināšanu un data-bs-backdropfona kolāžu.

Krāsota ar ritināšanu

Mēģiniet ritināt pārējo lapu, lai redzētu šīs opcijas darbību.

Offcanvas ar fonu

.....

Fons ar ritināšanu

Mēģiniet ritināt pārējo lapu, lai redzētu šīs opcijas darbību.

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

Pieejamība

Tā kā offcanvas panelis konceptuāli ir modāls dialoglodziņš, noteikti pievienojiet aria-labelledby="..."— atsaucoties uz offcanvas nosaukumu — .offcanvas. Ņemiet vērā, ka jums nav jāpievieno, role="dialog"jo mēs to jau pievienojam, izmantojot JavaScript.

Sass

Mainīgie lielumi

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

Lietošana

Spraudnis Offcanvas izmanto dažas klases un atribūtus, lai veiktu smagumu celšanu:

  • .offcanvasslēpj saturu
  • .offcanvas.showparāda saturu
  • .offcanvas-startpaslēpj audekls kreisajā pusē
  • .offcanvas-endpaslēpj audekls labajā pusē
  • .offcanvas-bottompaslēpj audekls apakšā

Pievienojiet noraidīšanas pogu ar data-bs-dismiss="offcanvas"atribūtu, kas aktivizē JavaScript funkcionalitāti. Noteikti izmantojiet <button>elementu kopā ar to, lai nodrošinātu pareizu darbību visās ierīcēs.

Izmantojot datu atribūtus

Pārslēgt

Pievienojiet elementam data-bs-toggle="offcanvas"un a data-bs-targetvai href, lai automātiski piešķirtu viena offcanvas elementa vadību. Atribūts data-bs-targetpieņem CSS atlasītāju, lai lietotu offcanvas. Noteikti pievienojiet klasi offcanvasoffcanvas elementam. Ja vēlaties, lai tas tiktu atvērts pēc noklusējuma, pievienojiet papildu klasi show.

Atlaist

Atlaišanu var panākt, izmantojot dataatribūtu uz pogas ārpus kanvas , kā parādīts tālāk:

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

vai uz pogas ārpus kanvas , izmantojot, data-bs-targetkā parādīts tālāk:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Lai gan tiek atbalstīti abi veidi, kā noraidīt audeklu, ņemiet vērā, ka noraidīšana no ārpuses neatbilst WAI-ARIA modālā dialoga noformējuma modelim . Dariet to uz savu risku.

Izmantojot JavaScript

Iespējot manuāli, izmantojot:

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

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-bs-, tāpat kā data-bs-backdrop="".

Vārds Tips Noklusējums Apraksts
backdrop Būla true Uzklājiet fonu uz ķermeņa, kamēr offcanvas ir atvērts
keyboard Būla true Kad tiek nospiests atkāpšanās taustiņš, tiek aizvērts offcanvas
scroll Būla false Atļaut pamatteksta ritināšanu, kamēr offcanvas ir atvērts

Metodes

Asinhronās metodes un pārejas

Visas API metodes ir asinhronas un sāk pāreju . Viņi atgriežas pie zvanītāja, tiklīdz ir sākta pāreja, bet pirms tās beigām . Turklāt pārejas komponenta metodes izsaukums tiks ignorēts .

Plašāku informāciju skatiet mūsu JavaScript dokumentācijā .

Aktivizē jūsu saturu kā offcanvas elementu. Pieņem izvēles opcijas object.

Varat izveidot offcanvas gadījumu, izmantojot konstruktoru, piemēram:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metode Apraksts
toggle Pārslēdz offcanvas elementu uz parādītu vai paslēptu. Atgriežas pie zvanītāja, pirms offcanvas elements ir faktiski parādīts vai paslēpts (ti, pirms shown.bs.offcanvasvai hidden.bs.offcanvasnotikuma).
show Rāda offcanvas elementu. Atgriežas pie zvanītāja, pirms ir faktiski parādīts offcanvas elements (ti, pirms shown.bs.offcanvasnotikuma).
hide Paslēpj offcanvas elementu. Atgriežas pie zvanītāja, pirms offcanvas elements ir faktiski paslēpts (ti, pirms hidden.bs.offcanvasnotikuma).
getInstance Statiskā metode, kas ļauj iegūt offcanvas gadījumu, kas saistīts ar DOM elementu
getOrCreateInstance Statiskā metode, kas ļauj iegūt offcanvas gadījumu, kas saistīts ar DOM elementu, vai izveidot jaunu, ja tas nav inicializēts.

Pasākumi

Bootstrap offcanvas klase atklāj dažus notikumus, lai piesaistītu offcanvas funkcionalitāti.

Pasākuma veids Apraksts
show.bs.offcanvas Šis notikums tiek aktivizēts nekavējoties, kad showtiek izsaukta instances metode.
shown.bs.offcanvas Šis notikums tiek aktivizēts, kad lietotājam ir padarīts redzams offcanvas elements (pagaidīs, līdz tiks pabeigtas CSS pārejas).
hide.bs.offcanvas Šis notikums tiek aktivizēts nekavējoties, kad hidemetode ir izsaukta.
hidden.bs.offcanvas Šis notikums tiek aktivizēts, kad lietotājam ir paslēpts offcanvas elements (tiks gaidīts, līdz tiks pabeigtas CSS pārejas). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})