Offcanvas
Nawigasiýa, söwda arabalary we başgalar üçin birnäçe synp we JavaScript plaginimiz bilen gizlin gapdal panelleri guruň.
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 data
JavaScript-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
, translate
bir .offcanvas
elementi ulanyp bilmersiňiz. Munuň ýerine synpy garaşsyz örtük elementi hökmünde ulanyň.
prefers-reduced-motion
media talaplaryna baglydyr. Elýeterlilik resminamalarymyzyň azaldylan hereket bölümine serediň
.
Mysallar
Offcanvas komponentleri
Aşakda deslapky görnüşde görkezilýär ( .show
aç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 boşatmak hereketleri bilen offcanvas sözbaşylaryny goşmagyňyzy ýa-da aç-açan işden aýyrmagyňyzy maslahat berýäris.
Offcanvas
<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ş
.show
JavaScript-iň üsti bilen synpy bir element bilen synpy üýtgedýän offcanvas elementini görkezmek we gizlemek üçin aşakdaky düwmeleri ulanyň .offcanvas
.
.offcanvas
mazmuny gizleýär (default).offcanvas.show
mazmunyny görkezýär
Sypat bilen href
baglanyşyk ýa-da atributly düwme ulanyp bilersiňiz data-bs-target
. Iki ýagdaýda-da data-bs-toggle="offcanvas"
talap edilýär.
Offcanvas
<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-start
görüniş nokadynyň çep tarapynda offkanwalary ýerleşdirýär (ýokarda görkezilýär).offcanvas-end
görünişiň sag tarapynda offkanwalary ýerleşdirýär.offcanvas-top
offkanwany görnüşiň üstünde goýýar.offcanvas-bottom
offkanwalary 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-scroll
atributdan 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">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>
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;
Ulanylyşy
“Offcanvas” plugin agyr götermek üçin birnäçe synplary we häsiýetleri ulanýar:
.offcanvas
mazmuny gizleýär.offcanvas.show
mazmunyny görkezýär.offcanvas-start
offkanlary çepde gizleýär.offcanvas-end
offkanlary sagda gizleýär.offcanvas-bottom
aş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
data-bs-toggle="offcanvas"
Bir data-bs-target
offcanvas href
elementine awtomatiki gözegçilik etmek üçin elementi goşuň . Sypat data-bs-target
, offcanwalary ulanmak üçin CSS saýlaýjysyny kabul edýär. Synpy offcanvas
offcanvas elementine goşuň. Adaty açylmagyny isleseňiz, goşmaça synp goşuň show
.
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.offcanvas waka ýü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.offcanvas waka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. |
hide |
Offcanvas elementini gizleýär. Offcanvas elementi aslynda gizlenmänkä (ýagny hidden.bs.offcanvas waka ýü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 |
show Bu 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 |
hide Bu waka usul çagyrylanda derrew atylýar . |
hidden.bs.offcanvas |
Bu waka, offcanvas elementi ulanyjydan gizlenende (CSS geçişleriniň tamamlanmagyna garaşýar) atylýar. |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})