Ana içeriğe geç Dokümanlar navigasyonuna atla
in English

tuval dışı

Birkaç sınıf ve JavaScript eklentimizle gezinme, alışveriş sepetleri ve daha fazlası için projenize gizli kenar çubukları oluşturun.

Bu sayfada

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 datanitelikler 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 marginveya öğesini kullanamazsınız . Bunun yerine, sınıfı bağımsız bir sarma öğesi olarak kullanın.translate.offcanvas

Bu bileşenin animasyon efekti prefers-reduced-motionortam 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 .showon .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ışı
Offcanvas için içerik buraya gider. Hemen hemen tüm Bootstrap bileşenlerini veya özel öğelerini buraya yerleştirebilirsiniz. 
<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

.showBir öğ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.

  • .offcanvasiçeriği gizler (varsayılan)
  • .offcanvas.showiçeriği gösterir

Öznitelik içeren bir bağlantı hrefveya öznitelik içeren bir düğme kullanabilirsiniz data-bs-target. Her iki durumda data-bs-toggle="offcanvas"da gereklidir.

href ile bağlantı
tuval dışı
Yer tutucu olarak bazı metinler. Gerçek hayatta, seçtiğiniz öğelere sahip olabilirsiniz. Metin, resim, liste vb. 
<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-starttuvalin dışına, görünümün soluna yerleştirir (yukarıda gösterilmiştir)
  • .offcanvas-endtuval dışını görünümün sağına yerleştirir
  • .offcanvas-toptuval dışını görünümün en üstüne yerleştirir
  • .offcanvas-bottomtuval 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 zemin

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

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;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

kullanım

Offcanvas eklentisi, ağır kaldırmayı halletmek için birkaç sınıf ve özellik kullanır:

  • .offcanvasiçeriği gizler
  • .offcanvas.showiçeriği gösterir
  • .offcanvas-startsoldaki tuvali gizler
  • .offcanvas-endsağdaki tuvali gizler
  • .offcanvas-bottomalttaki 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

Aç/Kapat

Bir tuval dışı öğenin kontrolünü otomatik olarak atamak için öğeye data-bs-toggle="offcanvas"ve a data-bs-targetveya öğesini ekleyin . Öznitelik, tuval dışını uygulamak için bir CSS seçiciyi kabul eder href. Sınıfı tuval dışı öğeye data-bs-targeteklediğinizden emin olun . offcanvasVarsayılan olarak açılmasını istiyorsanız, ek sınıfı ekleyin show.

Azletmek

Görevden alma, aşağıda gösterildiği gibi tuval dışı içindekidata bir düğmedeki öznitelikle gerçekleştirilebilir :

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

veya aşağıda gösterildiği gibi tuval dışındakidata-bs-target bir düğmede :

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Bir tuval dışı kapatmanın her iki yolu da desteklenirken, tuval dışı bir dıştan çıkarmanın WAI-ARIA modal iletişim tasarım modeliyle eşleşmediğini unutmayın . Bunu kendi sorumluluğunuzda yapın.

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 .

Daha fazla bilgi için JavaScript belgelerimize bakın .

İç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.offcanvasveya hidden.bs.offcanvasolayı gerçekleşmeden önce) döner.
show Bir tuval dışı öğe gösterir. Kanvas dışı öğe fiilen gösterilmeden önce (yani shown.bs.offcanvasolay meydana gelmeden önce) arayana geri döner.
hide Bir tuval dışı öğeyi gizler. Arayana, tuval dışı öğe fiilen gizlenmeden önce (yani hidden.bs.offcanvasolay 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 hideBu 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...
})