Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
Check
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ā, augšējā 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
Šeit ir pieejams saturs, kas paredzēts audeklam. Šeit varat ievietot gandrīz jebkuru Bootstrap komponentu vai pielāgotus 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>

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

Ķermeņa ritināšana

Elementa ritināšana <body>ir atspējota, ja ir redzams audekls un tā fons. Izmantojiet data-bs-scrollatribūtu, lai iespējotu <body>ritināšanu.

Offcanvas ar korpusa ritināšanu

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

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>

Ķermeņa ritināšana un fons

Varat arī iespējot <body>ritināšanu ar redzamu fonu.

Fons ar ritināšanu

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

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>

Statisks fons

Ja fona kolāža ir iestatīta uz statisku, noklikšķinot ārpus tā, offcanvas netiks aizvērts.

Offcanvas
Es neaizvēršu, ja noklikšķināsiet ārpus manis.
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>

Tumšs offcanvas

Pievienots v5.2.0

Mainiet offcanvases izskatu ar utilītprogrammām, lai tās labāk atbilstu dažādiem kontekstiem, piemēram, tumšām navigācijas joslām. Šeit mēs pievienojam .text-bg-darkun .offcanvas, .btn-close-whitelai .btn-closenodrošinātu pareizu veidošanu ar tumšu audeklu. Ja jums ir nolaižamās izvēlnes, apsveriet iespēju pievienot .dropdown-menu-darkarī .dropdown-menu.

Offcanvas

Šeit ievietojiet offcanvas saturu.

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>

Atsaucīgs

Pievienots v5.2.0

Adaptīvās offcanvas klases paslēpj saturu ārpus skata loga no noteikta pārtraukuma punkta un uz leju. Virs šī pārtraukuma punkta saturs darbosies kā parasti. Piemēram, .offcanvas-lgpaslēpj saturu ārpus audekla zem lgpārtraukuma punkta, bet parāda saturu virs lgpārtraukuma punkta.

Mainiet pārlūkprogrammas izmērus, lai parādītu adaptīvo offcanvas slēdzi.
Atsaucīgs offcanvas

Šis ir saturs sadaļā .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>

Katram pārtraukuma punktam ir pieejamas adaptīvas offcanvas klases.

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

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

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.

CSS

Mainīgie

Pievienots v5.2.0

Kā daļa no Bootstrap attīstošās CSS mainīgo pieejas, offcanvas tagad izmanto vietējos CSS mainīgos, .offcanvaslai uzlabotu reāllaika pielāgošanu. CSS mainīgo vērtības tiek iestatītas, izmantojot Sass, tāpēc joprojām tiek atbalstīta arī Sass pielāgošana.

  --#{$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 mainīgie

$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-toppaslēpj virspusē esošo audeklu
  • .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 ārpus kanvas neatbilst ARIA autorēšanas prakses rokasgrāmatas dialoga (modāla) modelim . Dariet to uz savu risku.

Izmantojot JavaScript

Iespējot manuāli, izmantojot:

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

Iespējas

Tā kā opcijas var nodot, izmantojot datu atribūtus vai JavaScript, varat pievienot opcijas nosaukumu data-bs-, piemēram, data-bs-animation="{value}". Nododot opcijas, izmantojot datu atribūtus , noteikti nomainiet opcijas nosaukuma reģistra veidu no “ camelCase ” uz “ kebab-case ”. Piemēram, data-bs-custom-class="beautifier"izmantojiet data-bs-customClass="beautifier".

Sākot ar versiju Bootstrap 5.2.0, visi komponenti atbalsta eksperimentālu rezervēto datu atribūtu data-bs-config, kurā var ievietot vienkāršu komponentu konfigurāciju kā JSON virkni. Ja elementam ir atribūti data-bs-config='{"delay":0, "title":123}'un data-bs-title="456", galīgā titlevērtība būs 456un atsevišķie datu atribūti ignorēs vērtības, kas norādītas data-bs-config. Turklāt esošie datu atribūti var ietvert JSON vērtības, piemēram, data-bs-delay='{"show":0,"hide":150}'.

Vārds Tips Noklusējums Apraksts
backdrop Būla vērtība vai virknestatic true Uzklājiet fonu uz ķermeņa, kamēr offcanvas ir atvērts. Vai arī norādiet staticfona kolāžu, kas, noklikšķinot, neaizver audeklu.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metode Apraksts
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.
hide Paslēpj offcanvas elementu. Atgriežas pie zvanītāja, pirms offcanvas elements ir faktiski paslēpts (ti, pirms 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).
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.offcanvasvai ).hidden.bs.offcanvas

Pasākumi

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

Pasākuma veids Apraksts
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).
hidePrevented.bs.offcanvas Šis notikums tiek aktivizēts, kad tiek parādīts ārpus kanvas, tā fons staticun tiek veikts klikšķis ārpus kanvas. Notikums tiek aktivizēts arī tad, kad tiek nospiests evakuācijas taustiņš un keyboardopcija ir iestatīta uz false.
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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})