Esasy mazmuna geçiň Docs nawigasiýasyna geçiň
in English

Offcanvas

Nawigasiýa, söwda arabalary we başgalar üçin birnäçe synp we JavaScript plaginimiz bilen gizlin gapdal panelleri guruň.

Bu sahypada

Bu nähili işleýär

“Offcanvas”, görnüşiň çep, sag ýa-da aşaky gyrasyndan görünmek üçin JavaScript arkaly üýtgedilip bilinýän gapdal paneli. Düwmeler ýa-da labyrlar, üýtgeýän aýratyn elementlere birikdirilen triggerler hökmünde ulanylýar we dataJavaScript-i çagyrmak üçin atributlar ulanylýar.

  • Offcanvas, JavaScript kodlarynyň käbirini modal bilen paýlaşýar. Düşünjä boýunça, olar gaty meňzeýär, ýöne aýratyn pluginler.
  • Şonuň ýaly-da, offcanwanyň stilleri we ölçegleri üçin käbir çeşme Sass üýtgeýjileri modalyň üýtgeýjilerinden miras galypdyr.
  • Görkezilende, offcanwas offkanwalary gizlemek üçin basyp boljak adaty fon görnüşini öz içine alýar.
  • Modallara meňzeşlikde, bir gezekde diňe bir offcanwany görkezip bolýar.

Başlar! CSS-iň animasiýalary nähili işleýändigini göz öňünde tutup margin, translatebir .offcanvaselementi ulanyp bilmersiňiz. Munuň ýerine synpy garaşsyz örtük elementi hökmünde ulanyň.

Bu komponentiň animasiýa täsiri prefers-reduced-motionmedia talaplaryna baglydyr. Elýeterlilik resminamalarymyzyň azaldylan hereket bölümine serediň .

Mysallar

Offcanvas komponentleri

Aşakda deslapky görnüşde görkezilýär ( .showaçyk görnüşde .offcanvas). “Offcanvas” ýakyn düwme bilen sözbaşy üçin goldaw we käbir başlangyç üçin goşmaça beden synpyny öz içine alýar padding. Mümkin boldugyça işden aýyrmak hereketleri bilen offcanvas sözbaşylaryny goşmagyňyzy ýa-da aç-açan işden aýyrmagyňyzy maslahat berýäris.

Offcanvas
Offkanwalaryň mazmuny şu ýere gidýär. “Bootstrap” -yň islendik komponentini ýa-da ýörite elementlerini şu ýere ýerleşdirip bilersiňiz. 
<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>

Göni görkeziş

.showJavaScript-iň üsti bilen synpy bir element bilen synpy üýtgedýän offcanvas elementini görkezmek we gizlemek üçin aşakdaky düwmeleri ulanyň .offcanvas.

  • .offcanvasmazmuny gizleýär (default)
  • .offcanvas.showmazmunyny görkezýär

Sypat bilen hrefbaglanyşyk ýa-da atributly düwme ulanyp bilersiňiz data-bs-target. Iki ýagdaýda-da data-bs-toggle="offcanvas"talap edilýär.

Href bilen baglanyşyk
Offcanvas
Käbir tekst ýer eýesi hökmünde. Hakyky durmuşda saýlan elementleriňiz bolup biler. Halaýan, tekst, suratlar, sanawlar we ş.m. 
<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>

Acementerleşiş

Offcanvas komponentleri üçin deslapky ýerleşdirme ýok, şonuň üçin aşakda üýtgediji synplardan birini goşmaly;

  • .offcanvas-startgörüniş nokadynyň çep tarapynda offkanwalary ýerleşdirýär (ýokarda görkezilýär)
  • .offcanvas-endgörünişiň sag tarapynda offkanwalary ýerleşdirýär
  • .offcanvas-topoffkanwany görnüşiň üstünde goýýar
  • .offcanvas-bottomoffkanwalary görnüşiň aşagyna ýerleşdirýär

Aşakdaky ýokarky, sag we aşaky mysallary synap görüň.

Offcanvas ýokarsy
... 
<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 dogry
... 
<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 aşagy
... 
<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>

Yzky görnüş

<body>Offkanwas we onuň fonunda görünýän mahaly elementi aýlamak ýapylýar. Aýlawy üýtgetmek we fonda geçmek üçin data-bs-scrollatributdan peýdalanyň .<body>data-bs-backdrop

Aýlamak bilen reňkli

Bu opsiýany hereketde görmek üçin sahypanyň galan bölegini aýlap görüň.

Fon bilen Offcanvas

.....

Aýlamak bilen fon

Bu opsiýany hereketde görmek üçin sahypanyň galan bölegini aýlap görüň.

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

Elýeterlilik

“Offcanvas” paneli konseptual taýdan modal gepleşik bolany üçin, aria-labelledby="..."“offcanvas” adyna salgylanyp , goşuň .offcanvas. Goşmaly däldigiňize üns beriň, role="dialog"sebäbi eýýäm JavaScript arkaly goşýarys.

Sass

Üýtgeýjiler

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

Ulanylyşy

“Offcanvas” plugin agyr götermek üçin birnäçe synplary we häsiýetleri ulanýar:

  • .offcanvasmazmuny gizleýär
  • .offcanvas.showmazmunyny görkezýär
  • .offcanvas-startoffkanlary çepde gizleýär
  • .offcanvas-endoffkanlary sagda gizleýär
  • .offcanvas-bottomaşagyndaky offkanlary gizleýär

data-bs-dismiss="offcanvas"JavaScript-iň işlemegine itergi berýän atribut bilen işden çykarmak düwmesini goşuň . <button>Elementi ähli enjamlarda dogry alyp barmak üçin ulanmagy unutmaň .

Maglumat atributlary arkaly

Toggle

data-bs-toggle="offcanvas"Bir data-bs-targetoffcanvas hrefelementine awtomatiki gözegçilik etmek üçin elementi goşuň . Sypat data-bs-target, offcanwalary ulanmak üçin CSS saýlaýjysyny kabul edýär. Synpy offcanvasoffcanvas elementine goşuň. Adaty açylmagyny isleseňiz, goşmaça synp goşuň show.

Işden aýyrmak

Işden aýrylmak , aşakda görkezilişi ýaly , offkanwanyň içindäki düwmedäkidata atribut bilen gazanylyp bilner:

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

ýa-da aşakda görkezilişi ýaly offkanwanyň daşyndaky düwmede :data-bs-target

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Offkanwalary işden aýyrmagyň iki usuly hem goldanýan bolsa-da, offkanwanyň daşyndan işden çykarylmagyň WAI-ARIA modal gepleşik dizaýn görnüşine laýyk gelmeýändigini ýadyňyzdan çykarmaň . Muny öz töwekgelçiligiňiz bilen ediň.

JavaScript arkaly

El bilen işlediň:

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bs-bolşy ýaly goşuň data-bs-backdrop="".

Ady Görnüşi Bellenen Düşündiriş
backdrop boolean true Offkanwas açyk wagty bedeniňize fon çalyň
keyboard boolean true Gaçmak düwmesi basylanda offkanlary ýapýar
scroll boolean false Offcanwas açyk wagty bedeniň aýlanmagyna rugsat beriň

Usullar

Asynkron usullar we geçişler

APIhli API usullary asynkron bolup, geçişe başlaýar . Geçiş başlan badyna, ýöne gutarmanka jaň edijä gaýdyp gelýärler . Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .

Has giňişleýin maglumat üçin JavaScript resminamalarymyza serediň .

Mazmunyňyzy offcanvas elementi hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.

Konstruktor bilen offcanvas mysalyny döredip bilersiňiz, mysal üçin:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Usul Düşündiriş
toggle Görkezilen ýa-da gizlenýän offcanvas elementini açýar. Offcanvas elementi hakykatdanam görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.offcanvasýa-da hidden.bs.offcanvaswaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär.
show Offcanvas elementini görkezýär. Offcanvas elementi görkezilmänkä (ýagny shown.bs.offcanvaswaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär.
hide Offcanvas elementini gizleýär. Offcanvas elementi aslynda gizlenmänkä (ýagny hidden.bs.offcanvaswaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär.
getInstance DOM elementi bilen baglanyşykly offcanvas mysalyny almaga mümkinçilik berýän statiki usul
getOrCreateInstance DOM elementi bilen baglanyşykly offcanvas mysalyny almaga ýa-da başlamadyk ýagdaýynda täzesini döretmäge mümkinçilik berýän statiki usul.

Wakalar

“Bootstrap” -yň “offcanvas” synpy, “offcanvas” -yň işlemegi üçin birnäçe wakany paş edýär.

Çäräniň görnüşi Düşündiriş
show.bs.offcanvas showBu waka mysal usuly çagyrylanda derrew ýanýar .
shown.bs.offcanvas Bu waka, “offcanvas” elementi ulanyja görünen mahaly atylýar (CSS geçişleriniň tamamlanmagyna garaşýar).
hide.bs.offcanvas hideBu waka usul çagyrylanda derrew atylýar .
hidden.bs.offcanvas Bu waka, ulanyjydan offcanvas elementi gizlenende (CSS geçişleriniň tamamlanmagyna garaşýar) atylýar. 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})