tuval dışı
Birkaç sınıf ve JavaScript eklentimizle gezinme, alışveriş sepetleri ve daha fazlası için projenize gizli kenar çubukları oluşturun.
Nasıl çalışır
Offcanvas, görünümün sol, sağ veya alt kenarından görünmesi için JavaScript aracılığıyla değiştirilebilen bir kenar çubuğu bileşenidir. Düğmeler veya çapalar, değiştirdiğiniz belirli öğelere eklenen tetikleyiciler olarak kullanılır ve data
nitelikler JavaScript'imizi çağırmak için kullanılır.
- Offcanvas, modals ile aynı JavaScript kodunun bir kısmını paylaşır. Kavramsal olarak oldukça benzerler, ancak bunlar ayrı eklentilerdir.
- Benzer şekilde, tuval dışı stilleri ve boyutları için bazı kaynak Sass değişkenleri, kipin değişkenlerinden miras alınır.
- Gösterildiğinde, tuval dışı, tuval dışını gizlemek için tıklanabilen varsayılan bir arka plan içerir.
- Modallara benzer şekilde, aynı anda yalnızca bir tuval dışı gösterilebilir.
Önüne bak! CSS'nin animasyonları nasıl işlediği göz önüne alındığında , bir öğede margin
veya öğesini kullanamazsınız . Bunun yerine, sınıfı bağımsız bir sarma öğesi olarak kullanın.translate
.offcanvas
prefers-reduced-motion
ortam sorgusuna bağlıdır. Erişilebilirlik belgelerimizin azaltılmış hareket bölümüne bakın
.
Örnekler
Tuval dışı bileşenler
Aşağıda, varsayılan olarak gösterilen bir tuval dışı örnek bulunmaktadır (üzerinden .show
on .offcanvas
). Offcanvas, kapat düğmesi olan bir başlık desteği ve bazı başlangıçlar için isteğe bağlı bir gövde sınıfı içerir padding
. Mümkün olduğunda, kapatma eylemleriyle birlikte tuval dışı başlıklar eklemenizi veya açık bir kapatma eylemi sağlamanızı öneririz.
tuval dışı
<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>
Canlı demo
.show
Bir öğe üzerindeki sınıfı sınıfla değiştiren JavaScript aracılığıyla bir tuval dışı öğeyi göstermek ve gizlemek için aşağıdaki düğmeleri kullanın .offcanvas
.
.offcanvas
içeriği gizler (varsayılan).offcanvas.show
içeriği gösterir
Öznitelik içeren bir bağlantı href
veya öznitelik içeren bir düğme kullanabilirsiniz data-bs-target
. Her iki durumda data-bs-toggle="offcanvas"
da gereklidir.
tuval dışı
<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>
Atama
Tuval dışı bileşenler için varsayılan bir yerleşim yoktur, bu nedenle aşağıdaki değiştirici sınıflardan birini eklemelisiniz;
.offcanvas-start
tuvalin dışına, görünümün soluna yerleştirir (yukarıda gösterilmiştir).offcanvas-end
tuval dışını görünümün sağına yerleştirir.offcanvas-top
tuval dışını görünümün en üstüne yerleştirir.offcanvas-bottom
tuval dışını görünümün altına yerleştirir
Aşağıdaki üst, sağ ve alt örnekleri deneyin.
tuval üstü
<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>
tuval dışı sağ
<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 alt
<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>
zemin
Bir tuval <body>
dışı ve arka planı görünür olduğunda öğenin kaydırılması devre dışı bırakılır. Kaydırma arasında geçiş yapmak ve arka planı değiştirmek için data-bs-scroll
özniteliği kullanın .<body>
data-bs-backdrop
Kaydırma ile renklendirilmiş
Bu seçeneği çalışırken görmek için sayfanın geri kalanını kaydırmayı deneyin.
Arka planda tuval dışı
.....
Kaydırma ile arka planda
Bu seçeneği çalışırken görmek için sayfanın geri kalanını kaydırmayı deneyin.
<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>
Ulaşılabilirlik
Tuval dışı paneli kavramsal olarak kalıcı bir iletişim kutusu olduğundan aria-labelledby="..."
, tuval dışı başlığına atıfta bulunarak - öğesine eklediğinizden emin olun .offcanvas
. role="dialog"
JavaScript aracılığıyla zaten eklediğimiz için eklemeniz gerekmediğini unutmayın .
küstah
Değişkenler
$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;
kullanım
Offcanvas eklentisi, ağır kaldırmayı halletmek için birkaç sınıf ve özellik kullanır:
.offcanvas
içeriği gizler.offcanvas.show
içeriği gösterir.offcanvas-start
soldaki tuvali gizler.offcanvas-end
sağdaki tuvali gizler.offcanvas-bottom
alttaki tuvali gizler
data-bs-dismiss="offcanvas"
JavaScript işlevini tetikleyen özniteliğe sahip bir kapatma düğmesi ekleyin . <button>
Tüm cihazlarda uygun davranış için öğeyi onunla birlikte kullandığınızdan emin olun .
Veri öznitelikleri aracılığıyla
Bir tuval dışı öğenin kontrolünü otomatik olarak atamak için öğeye data-bs-toggle="offcanvas"
ve a data-bs-target
veya öğesini ekleyin . Öznitelik, tuval dışını uygulamak için bir CSS seçiciyi kabul eder href
. Sınıfı tuval dışı öğeye data-bs-target
eklediğinizden emin olun . offcanvas
Varsayılan olarak açılmasını istiyorsanız, ek sınıfı ekleyin show
.
JavaScript aracılığıyla
Şunlarla manuel olarak etkinleştirin:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Seçenekler
Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-bs-
gibi ekleyin data-bs-backdrop=""
.
İsim | Tip | Varsayılan | Tanım |
---|---|---|---|
backdrop |
boole | true |
Offcanvas açıkken vücuda bir fon uygulayın |
keyboard |
boole | true |
Kaçış tuşuna basıldığında tuval dışını kapatır |
scroll |
boole | false |
Tuval dışı açıkken gövde kaydırmaya izin ver |
yöntemler
Asenkron yöntemler ve geçişler
Tüm API yöntemleri eşzamansızdır ve bir geçiş başlatır . Geçiş başlar başlamaz ancak bitmeden arayan kişiye geri dönerler . Ek olarak, geçiş yapan bir bileşen üzerindeki bir yöntem çağrısı yoksayılacaktır .
İçeriğinizi tuval dışı bir öğe olarak etkinleştirir. İsteğe bağlı seçenekleri kabul eder object
.
Yapıcı ile bir tuval dışı örneği oluşturabilirsiniz, örneğin:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Yöntem | Tanım |
---|---|
toggle |
Bir tuval dışı öğeyi gösterilen veya gizli olarak değiştirir. Arayana, tuval dışı öğe fiilen gösterilmeden veya gizlenmeden önce (yani shown.bs.offcanvas veya hidden.bs.offcanvas olayı gerçekleşmeden önce) döner. |
show |
Bir tuval dışı öğe gösterir. Kanvas dışı öğe fiilen gösterilmeden önce (yani shown.bs.offcanvas olay meydana gelmeden önce) arayana geri döner. |
hide |
Bir tuval dışı öğeyi gizler. Arayana, tuval dışı öğe fiilen gizlenmeden önce (yani hidden.bs.offcanvas olay gerçekleşmeden önce) döner. |
getInstance |
Bir DOM öğesiyle ilişkili tuval dışı örneği almanıza olanak tanıyan statik yöntem |
getOrCreateInstance |
Bir DOM öğesiyle ilişkili tuval dışı örneği almanıza veya başlatılmamış olması durumunda yeni bir tane oluşturmanıza olanak tanıyan statik yöntem |
Olaylar
Bootstrap'in tuval dışı sınıfı, tuval dışı işlevselliğe bağlanmak için birkaç olayı ortaya çıkarır.
Etkinlik tipi | Tanım |
---|---|
show.bs.offcanvas |
Bu olay, show örnek yöntemi çağrıldığında hemen tetiklenir. |
shown.bs.offcanvas |
Bu olay, tuval dışı bir öğe kullanıcıya görünür hale getirildiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler). |
hide.bs.offcanvas |
hide Bu olay, yöntem çağrıldığında hemen tetiklenir . |
hidden.bs.offcanvas |
Bu olay, tuval dışı bir öğe kullanıcıdan gizlendiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})