açılır menüler

Bootstrap açılır eklentisi ile bağlantı listelerini ve daha fazlasını görüntülemek için bağlamsal bindirmeleri açın.

genel bakış

Açılır listeler, bağlantı listelerini ve daha fazlasını görüntülemek için değiştirilebilir, bağlamsal bindirmelerdir. Dahil edilen Bootstrap açılır JavaScript eklentisi ile etkileşimli hale getirilirler. Fareyle üzerine gelinerek değil, tıklatılarak değiştirilirler; bu kasıtlı bir tasarım kararıdır.

Açılır listeler , dinamik konumlandırma ve görünüm alanı algılaması sağlayan Popper.js adlı üçüncü taraf kitaplığı üzerine kuruludur. Popper.min.js dosyasını Bootstrap'ın JavaScript'inden önce eklediğinizden veya Popper.js içeren bootstrap.bundle.min.js/ öğesini kullandığınızdan emin olun . bootstrap.bundle.jsPopper.js, dinamik konumlandırma gerekli olmadığı için gezinme çubuklarındaki açılır menüleri konumlandırmak için kullanılmaz.

JavaScript'imiziutil.js kaynaktan oluşturuyorsanız, .

Ulaşılabilirlik

WAI ARIA standardı, gerçek bir pencere öğesi tanımlar , role="menu"ancak bu, eylemleri veya işlevleri tetikleyen uygulama benzeri menülere özeldir. ARIA menüleri yalnızca menü öğelerini, onay kutusu menü öğelerini, radyo düğmesi menü öğelerini, radyo düğmesi gruplarını ve alt menüleri içerebilir.

Bootstrap'in açılır listeleri ise genel olacak ve çeşitli durumlara ve işaretleme yapılarına uygulanabilir olacak şekilde tasarlanmıştır. Örneğin, arama alanları veya oturum açma formları gibi ek girdiler ve form kontrolleri içeren açılır menüler oluşturmak mümkündür. Bu nedenle Bootstrap, gerçek ARIA menüleri için gerekli roleand aria-özniteliklerinin hiçbirini beklemez (veya otomatik olarak eklemez) . Yazarların bu daha spesifik özellikleri kendilerinin dahil etmesi gerekecektir.

.dropdown-itemAncak Bootstrap , imleç tuşlarını kullanarak tek tek öğeler arasında hareket etme ve tuşla menüyü kapatma gibi çoğu standart klavye menüsü etkileşimi için yerleşik destek ekler ESC.

Örnekler

Açılır menünün geçişini (düğmeniz veya bağlantınız) ve içindeki açılır menüyü .dropdownveya bildiren başka bir öğeyi sarın position: relative;. Potansiyel ihtiyaçlarınıza daha iyi uyması için açılır öğeler <a>veya öğelerden tetiklenebilir .<button>

Tek düğme

Herhangi bir single .btn, bazı biçimlendirme değişiklikleriyle açılır bir geçişe dönüştürülebilir. Bunları her iki öğeyle de nasıl çalıştırabileceğiniz aşağıda açıklanmıştır <button>:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Ve <a>elemanlarla:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

En iyi yanı, bunu herhangi bir düğme varyantıyla da yapabilmenizdir:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Böl düğmesi

Benzer şekilde, tek düğmeli açılır menülerle hemen hemen aynı işaretlemeyle, ancak .dropdown-toggle-splitaçılır düzeltme işaretinin etrafına uygun boşluk eklenmesiyle bölünmüş düğme açılır listeleri oluşturun.

Bu ekstra sınıfı padding, düzeltme işaretinin her iki tarafındaki yatay çizgiyi %25 oranında azaltmak ve margin-leftnormal düğme açılır menüleri için eklenenleri kaldırmak için kullanıyoruz. Bu ekstra değişiklikler, düzeltme işaretini bölme düğmesinin ortasında tutar ve ana düğmenin yanında daha uygun boyutta bir vuruş alanı sağlar.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

boyutlandırma

Düğme açılır menüleri, varsayılan ve bölünmüş açılır düğmeler dahil olmak üzere tüm boyutlardaki düğmelerle çalışır.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Talimatlar

açılan

.dropupAna öğeye ekleyerek öğelerin üzerindeki açılır menüleri tetikleyin .

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

sağdan sola

.droprightAna öğeye ekleyerek öğelerin sağındaki açılır menüleri tetikleyin .

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

sol

.dropleftAna öğeye ekleyerek öğelerin solundaki açılır menüleri tetikleyin .

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Tarihsel olarak açılır menü içerikleri bağlantılar olmak zorundaydı , ancak artık v4'te durum böyle değil. Artık, açılır listelerinizde yalnızca s <button>yerine öğeleri isteğe bağlı olarak kullanabilirsiniz .<a>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

ile etkileşimli olmayan açılır öğeler de oluşturabilirsiniz .dropdown-item-text. Özel CSS veya metin yardımcı programları ile daha fazla stil vermekten çekinmeyin.

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

Aktif

Etkin olarak stil.active vermek için açılır menüdeki öğelere ekleyin .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Engelli

Devre dışı bırakılmış olarak.disabled biçimlendirmek için açılır menüdeki öğelere ekleyin .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Varsayılan olarak, bir açılır menü otomatik olarak üst öğesinin üst kısmından ve sol tarafında %100 olarak konumlandırılır. .dropdown-menu-righta'ya ekle .dropdown-menuaçılır menüyü sağa hizalayın.

Önüne bak! Açılır listeler Popper.js sayesinde konumlandırılır (bir gezinme çubuğunda bulunmaları dışında).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Başlıklar

Herhangi bir açılır menüde eylemlerin bölümlerini etiketlemek için bir başlık ekleyin.

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Bölücüler

Bir bölücü ile ilgili menü öğelerinin ayrı grupları.

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Metin

Herhangi bir serbest biçimli metni, metin içeren bir açılır menüye yerleştirin ve boşluk bırakma yardımcı programlarını kullanın . Menü genişliğini sınırlamak için muhtemelen ek boyutlandırma stillerine ihtiyacınız olacağını unutmayın.

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Formlar

Açılır menüye bir form koyun veya bir açılır menüye dönüştürün ve ihtiyacınız olan negatif alanı vermek için kenar boşluğu veya dolgu yardımcı programlarını kullanın.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Açılır listenin konumunu değiştirmek için data-offsetveya öğesini kullanın .data-reference

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

kullanım

.showVeri öznitelikleri veya JavaScript aracılığıyla, açılır eklenti, sınıfı üst liste öğesinde değiştirerek gizli içeriği (açılır menüler) değiştirir . Bu data-toggle="dropdown"öznitelik, uygulama düzeyinde açılır menüleri kapatmak için kullanılır, bu nedenle her zaman kullanmak iyi bir fikirdir.

Dokunmatik özellikli cihazlarda, bir açılır listenin açılması, öğenin en yakın alt öğelerine boş ( $.noop) mouseoverişleyiciler ekler <body>. Bu kuşkusuz çirkin hack, iOS'un olay delegasyonundaki bir tuhaflığı gidermek için gereklidir; aksi takdirde, açılır listenin dışındaki herhangi bir yere dokunmanın, açılır menüyü kapatan kodu tetiklemesini engeller. Açılır menü kapatıldığında, bu ek boş mouseoverişleyiciler kaldırılır.

Veri öznitelikleri aracılığıyla

data-toggle="dropdown"Bir açılır liste arasında geçiş yapmak için bir bağlantıya veya düğmeye ekleyin .

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

JavaScript aracılığıyla

JavaScript aracılığıyla açılır listeleri arayın:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`hala gerekli

Açılır listenizi JavaScript aracılığıyla aramanıza veya bunun yerine data-api'yi kullanmanıza bakılmaksızın, açılır data-toggle="dropdown"listenin tetikleyici öğesinde her zaman bulunması gerekir.

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-offset="".

İsim	Tip	Varsayılan	Tanım
telafi etmek	sayı \| dize \| işlev	0	Açılan listenin hedefine göre ofseti. Daha fazla bilgi için Popper.js'nin ofset belgelerine bakın .
çevirmek	boole	doğru	Referans öğesinde çakışma olması durumunda Açılır Menünün çevrilmesine izin verin. Daha fazla bilgi için Popper.js'nin flip docs'ına bakın .
sınır	dize \| eleman	'kaydırmaEbeveyn'	Açılır menünün taşma kısıtlaması sınırı. `'viewport'`, `'window'`, `'scrollParent'`, veya bir HTMLElement başvurusunun değerlerini kabul eder (yalnızca JavaScript). Daha fazla bilgi için Popper.js'nin önlemeOverflow belgelerine bakın .
referans	dize \| eleman	'geçiş'	Açılır menünün referans öğesi. `'toggle'`, `'parent'`, veya bir HTMLElement başvurusunun değerlerini kabul eder . Daha fazla bilgi için Popper.js'nin ReferenceObject belgelerine bakın .
Görüntüle	sicim	'dinamik'	Varsayılan olarak, dinamik konumlandırma için Popper.js kullanıyoruz. ile devre dışı bırakın `static`.

boundarydışında herhangi bir değere ayarlandığında 'scrollParent', stilin kaba position: staticuygulandığına dikkat edin ..dropdown

yöntemler

Yöntem	Tanım
`$().dropdown('toggle')`	Belirli bir gezinme çubuğunun veya sekmeli gezinmenin açılır menüsünü değiştirir.
`$().dropdown('update')`	Bir öğenin açılır listesinin konumunu günceller.
`$().dropdown('dispose')`	Bir öğenin açılır menüsünü yok eder.

Olaylar

Tüm açılır olaylar, .dropdown-menu'nin üst öğesinde tetiklenir ve relatedTargetdeğeri, geçiş yapan bağlantı öğesi olan bir özelliğe sahiptir. hide.bs.dropdownve hidden.bs.dropdownolayların , click olayı için bir Olay Nesnesi içeren bir clickEventözelliği vardır (yalnızca orijinal olay türü ).click

Etkinlik	Tanım
`show.bs.dropdown`	Bu olay, gösteri örneği yöntemi çağrıldığında hemen tetiklenir.
`shown.bs.dropdown`	Bu olay, açılır menü kullanıcıya görünür hale getirildiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler).
`hide.bs.dropdown`	Bu olay, örnek gizleme yöntemi çağrıldığında hemen tetiklenir.
`hidden.bs.dropdown`	Bu olay, açılır listenin kullanıcıdan gizlenmesi bittiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

açılır menüler

genel bakış

Ulaşılabilirlik

Örnekler

Tek düğme

Böl düğmesi

boyutlandırma

Talimatlar

açılan

sağdan sola

sol

Menü öğeleri

Aktif

Engelli

Menü hizalama

Menü içeriği

Başlıklar

Bölücüler

Metin

Formlar

kullanım

Veri öznitelikleri aracılığıyla

JavaScript aracılığıyla

`data-toggle="dropdown"`hala gerekli

Seçenekler

yöntemler

Olaylar

açılır menüler

genel bakış

Ulaşılabilirlik

Örnekler

Tek düğme

Böl düğmesi

boyutlandırma

Talimatlar

açılan

sağdan sola

sol

Menü öğeleri

Aktif

Engelli

Menü hizalama

Menü içeriği

Başlıklar

Açılır başlık

Bölücüler

Metin

Formlar

Açılır seçenekler

kullanım

Veri öznitelikleri aracılığıyla

JavaScript aracılığıyla

data-toggle="dropdown"hala gerekli

Seçenekler

yöntemler

Olaylar

`data-toggle="dropdown"`hala gerekli