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 adlı üçüncü taraf kitaplığı üzerine kuruludur . Popper.min.js dosyasını Bootstrap'ın JavaScript'inden önce eklediğinizden veya Popper içeren bootstrap.bundle.min.js
/ öğesini kullandığınızdan emin olun . bootstrap.bundle.js
Popper, 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 role
and aria-
özniteliklerinin hiçbirini beklemez (veya otomatik olarak eklemez) . Yazarların bu daha spesifik özellikleri kendilerinin dahil etmesi gerekecektir.
.dropdown-item
Ancak 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ü .dropdown
veya 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" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</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>
</div>
Ve <a>
elemanlarla:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<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>
</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-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-split
açı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-left
normal 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-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-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-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-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-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
Talimatlar
açılan
.dropup
Ana öğ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-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-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
sağdan sola
.dropright
Ana öğ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-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-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
sol
.dropleft
Ana öğ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-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">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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>
Menü öğeleri
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" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<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">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Menü hizalama
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-right
a'ya ekle .dropdown-menu
açılır menüyü sağa hizalayın.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" 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>
Duyarlı hizalama
Duyarlı hizalamayı kullanmak istiyorsanız, data-display="static"
özniteliği ekleyerek dinamik konumlandırmayı devre dışı bırakın ve duyarlı varyasyon sınıflarını kullanın.
Açılır menüyü verilen veya daha büyük kesme noktasıyla sağa hizalamak için ekleyin .dropdown-menu{-sm|-md|-lg|-xl}-right
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-lg-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>
Açılır menüyü verilen kesme noktası veya daha büyük bir değerle sola hizalamak için .dropdown-menu-right
ve ekleyin .dropdown-menu{-sm|-md|-lg|-xl}-left
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<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>
data-display="static"
Gezinti çubuklarında Popper kullanılmadığından, gezinme çubuklarındaki açılır düğmelere bir nitelik eklemeniz gerekmediğini unutmayın.
Menü içeriği
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-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</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-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Açılır seçenekler
Açılır listenin konumunu değiştirmek için data-offset
veya öğesini kullanın .data-reference
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
Offset
</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>
</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" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
<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>
</div>
kullanım
Veri öznitelikleri veya JavaScript aracılığıyla, açılır eklenti, .show
sınıfı üst öğe üzerinde değiştirerek gizli içeriği (açılır menüler) değiştirir .dropdown-menu
. 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.
$.noop
)
mouseover
iş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ş
mouseover
iş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 type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</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. Ofseti belirlemek için bir fonksiyon kullanıldığında, ilk argümanı olarak ofset verilerini içeren bir nesne ile çağrılır. İşlev, aynı yapıya sahip bir nesne döndürmelidir. Tetikleyici öğe DOM düğümü, ikinci argüman olarak iletilir. Daha fazla bilgi için Popper'ın 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'ın 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'ın ö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'ın ReferenceObject belgelerine bakın . |
Görüntüle | sicim | 'dinamik' | Varsayılan olarak, dinamik konumlandırma için Popper kullanıyoruz. ile devre dışı bırakın static . |
popperConfig | boş | nesne | hükümsüz | Bootstrap'in varsayılan Popper yapılandırmasını değiştirmek için, Popper'ın yapılandırmasına bakın |
boundary
dışında herhangi bir değere ayarlandığında 'scrollParent'
, stilin kaba position: static
uygulandığı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('show') |
Belirli bir gezinme çubuğunun veya sekmeli gezinmenin açılır menüsünü gösterir. |
$().dropdown('hide') |
Belirli bir gezinme çubuğunun veya sekmeli gezinmenin açılır menüsünü gizler. |
$().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 relatedTarget
değeri, geçiş yapan bağlantı öğesi olan bir özelliğe sahiptir. hide.bs.dropdown
ve hidden.bs.dropdown
olayları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...
})