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.

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

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.

...

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

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.

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

.....

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

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;

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

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.

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 notiek notikums `shown.bs.offcanvas`vai ).`hidden.bs.offcanvas`
`show`	Rāda offcanvas elementu. Atgriežas pie zvanītāja, pirms ir faktiski parādīts offcanvas elements (ti, pirms `shown.bs.offcanvas`notikuma).
`hide`	Paslēpj offcanvas elementu. Atgriežas pie zvanītāja, pirms offcanvas elements ir faktiski paslēpts (ti, pirms `hidden.bs.offcanvas`notikuma).
`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 `show`tiek 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 `hide`metode 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...
})

Offcanvas

Kā tas strādā

Piemēri

Offcanvas komponenti

Offcanvas

Demo tiešraidē

Offcanvas

Izvietojums

Offcanvas tops

Offcanvas tiesības

Offcanvas apakšdaļa

Fons

Krāsota ar ritināšanu

Offcanvas ar fonu

Fons ar ritināšanu

Pieejamība

Sass

Mainīgie lielumi

Lietošana

Izmantojot datu atribūtus

Izmantojot JavaScript

Iespējas

Metodes

Asinhronās metodes un pārejas

Pasākumi