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.
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>
Burada gösterilen örnekler <ul>
, uygun olduğunda anlamsal öğeler kullanır, ancak özel işaretleme desteklenir.
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="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<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>
Ve <a>
elemanlarla:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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>
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-bs-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Small button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Karanlık açılır menüler
Bir karanlık gezinme çubuğuna veya .dropdown-menu-dark
mevcut bir .dropdown-menu
. Açılır öğelerde herhangi bir değişiklik yapılması gerekmez.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" 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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Ve onu bir gezinme çubuğunda kullanmak için koymak:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<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>
</li>
</ul>
</div>
</div>
</nav>
Talimatlar
sağdan sola
RTL'de Bootstrap kullanılırken yönergeler yansıtılır, yani .dropstart
sağ tarafta görünür.
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-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
sağdan sola
.dropend
Ana öğeye ekleyerek öğelerin sağındaki açılır menüleri tetikleyin .
<!-- Default dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary">
Split dropend
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
sol
.dropstart
Ana öğeye ekleyerek öğelerin solundaki açılır menüleri tetikleyin .
<!-- Default dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropstart button -->
<div class="btn-group">
<div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropstart</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>
Menü öğeleri
<a>
or <button>
öğelerini açılır öğeler olarak kullanabilirsiniz .
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</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.
<ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<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>
Aktif
Etkin olarak stil.active
vermek için açılır menüdeki öğelere ekleyin . Etkin durumu yardımcı teknolojilere aktarmak için, geçerli sayfanın veya bir kümedeki geçerli öğenin değerini kullanarak özniteliği kullanın.aria-current
page
true
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Engelli
Devre dışı bırakılmış olarak.disabled
biçimlendirmek için açılır menüdeki öğelere ekleyin .
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
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. Bunu yön .drop*
sınıfları ile değiştirebilirsiniz, ancak bunları ek değiştirici sınıflarla da kontrol edebilirsiniz.
.dropdown-menu-end
a'ya ekle .dropdown-menu
açılır menüyü sağa hizalayın. RTL'de Bootstrap kullanılırken yönergeler yansıtılır, yani .dropdown-menu-end
sol tarafta görünür.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu example
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Duyarlı hizalama
Duyarlı hizalamayı kullanmak istiyorsanız, data-bs-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|-xxl}-end
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Açılır menüyü verilen kesme noktası veya daha büyük bir değerle sola hizalamak için .dropdown-menu-end
ve ekleyin .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
data-bs-display="static"
Gezinti çubuklarında Popper kullanılmadığından, gezinme çubuklarındaki açılır düğmelere bir nitelik eklemeniz gerekmediğini unutmayın.
Hizalama seçenekleri
Yukarıda gösterilen seçeneklerin çoğunu alarak, tek bir yerde çeşitli açılır hizalama seçeneklerinin küçük bir mutfak lavabosu demosunu burada bulabilirsiniz.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned, right-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned, left-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
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.
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
Bölücüler
Bir bölücü ile ilgili menü öğelerinin ayrı grupları.
<ul class="dropdown-menu">
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
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="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-3">
<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="mb-3">
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="mb-3">
<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-bs-offset
veya öğesini kullanın .data-bs-reference
<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<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 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-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
Otomatik kapanma davranışı
Varsayılan olarak, açılır menünün içine veya dışına tıklandığında açılır menü kapatılır. autoClose
Açılır listenin bu davranışını değiştirmek için seçeneği kullanabilirsiniz .
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
küstah
Değişkenler
Tüm açılır listeler için değişkenler:
$dropdown-min-width: 10rem;
$dropdown-padding-x: 0;
$dropdown-padding-y: .5rem;
$dropdown-spacer: .125rem;
$dropdown-font-size: $font-size-base;
$dropdown-color: $body-color;
$dropdown-bg: $white;
$dropdown-border-color: rgba($black, .15);
$dropdown-border-radius: $border-radius;
$dropdown-border-width: $border-width;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg: $dropdown-border-color;
$dropdown-divider-margin-y: $spacer * .5;
$dropdown-box-shadow: $box-shadow;
$dropdown-link-color: $gray-900;
$dropdown-link-hover-color: shade-color($gray-900, 10%);
$dropdown-link-hover-bg: $gray-200;
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: $gray-500;
$dropdown-item-padding-y: $spacer * .25;
$dropdown-item-padding-x: $spacer;
$dropdown-header-color: $gray-600;
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;
Karanlık açılır liste için değişkenler :
$dropdown-dark-color: $gray-300;
$dropdown-dark-bg: $gray-800;
$dropdown-dark-border-color: $dropdown-border-color;
$dropdown-dark-divider-bg: $dropdown-divider-bg;
$dropdown-dark-box-shadow: null;
$dropdown-dark-link-color: $dropdown-dark-color;
$dropdown-dark-link-hover-color: $white;
$dropdown-dark-link-hover-bg: rgba($white, .15);
$dropdown-dark-link-active-color: $dropdown-link-active-color;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color: $gray-500;
Bir açılır listenin etkileşimini gösteren CSS tabanlı şapka işaretleri için değişkenler:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
karışımlar
Mixin'ler, CSS tabanlı şapkaları oluşturmak için kullanılır ve scss/mixins/_caret.scss
.
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret-end {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-start {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
}
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
display: inline-block;
margin-left: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@if $direction == down {
@include caret-down();
} @else if $direction == up {
@include caret-up();
} @else if $direction == end {
@include caret-end();
}
}
@if $direction == start {
&::after {
display: none;
}
&::before {
display: inline-block;
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@include caret-start();
}
}
&:empty::after {
margin-left: 0;
}
}
}
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-bs-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.
mouseover
en yakın alt öğelerine boş 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-bs-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-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
JavaScript aracılığıyla
JavaScript aracılığıyla açılır listeleri arayın:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-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-bs-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-bs-
gibi ekleyin data-bs-offset=""
. Seçenekleri veri öznitelikleri aracılığıyla geçirirken, seçenek adının case tipini camelCase'den kebab-case olarak değiştirdiğinizden emin olun. Örneğin, data-bs-autoClose="false"
kullanmak yerine data-bs-auto-close="false"
.
İsim | Tip | Varsayılan | Tanım |
---|---|---|---|
boundary |
dize | eleman | 'clippingParents' |
Açılır menünün taşma kısıtlaması sınırı (yalnızca Popper'ın önlemeOverflow değiştiricisi için geçerlidir). Varsayılan olarak 'clippingParents' bir HTMLElement referansını kabul eder ve kabul edebilir (yalnızca JavaScript aracılığıyla). Daha fazla bilgi için Popper'ınDetectOverflow belgelerine bakın . |
reference |
dize | eleman | nesne | 'toggle' |
Açılır menünün referans öğesi. Bir HTMLElement başvurusunun veya sağlayan bir nesnenin 'toggle' , , değerlerini kabul eder . Daha fazla bilgi için Popper'ın yapıcı belgelerine ve sanal ö��e belgelerine bakın .'parent' getBoundingClientRect |
display |
sicim | 'dynamic' |
Varsayılan olarak, dinamik konumlandırma için Popper kullanıyoruz. ile devre dışı bırakın static . |
offset |
dizi | dize | işlev | [0, 2] |
Açılan listenin hedefine göre ofseti. Aşağıdaki gibi virgülle ayrılmış değerlerle veri özniteliklerinde bir dize iletebilirsiniz: Ofseti belirlemek için bir fonksiyon kullanıldığında, ilk argümanı olarak popper yerleşimini, referansı ve popper rect'lerini içeren bir nesne ile çağrılır. Tetikleyici öğe DOM düğümü, ikinci argüman olarak iletilir. İşlev, iki sayı içeren bir dizi döndürmelidir: . Daha fazla bilgi için Popper'ın ofset belgelerine bakın . |
autoClose |
boole | sicim | true |
Açılır listenin otomatik kapanma davranışını yapılandırın:
|
popperConfig |
boş | nesne | işlev | null |
Bootstrap'in varsayılan Popper yapılandırmasını değiştirmek için, Popper'ın yapılandırmasına bakın . Popper konfigürasyonunu oluşturmak için bir fonksiyon kullanıldığında, Bootstrap'in varsayılan Popper konfigürasyonunu içeren bir nesne ile çağrılır. Varsayılanı kendi yapılandırmanızla kullanmanıza ve birleştirmenize yardımcı olur. İşlev, Popper için bir yapılandırma nesnesi döndürmelidir. |
ile işlevi kullanmapopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
yöntemler
Yöntem | Tanım |
---|---|
toggle |
Belirli bir gezinme çubuğunun veya sekmeli gezinmenin açılır menüsünü değiştirir. |
show |
Belirli bir gezinme çubuğunun veya sekmeli gezinmenin açılır menüsünü gösterir. |
hide |
Belirli bir gezinme çubuğunun veya sekmeli gezinmenin açılır menüsünü gizler. |
update |
Bir öğenin açılır listesinin konumunu günceller. |
dispose |
Bir öğenin açılır menüsünü yok eder. (DOM öğesinde depolanan verileri kaldırır) |
getInstance |
Bir DOM öğesiyle ilişkili açılır örneği almanıza izin veren statik yöntem, bunu şu şekilde kullanabilirsiniz:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Bir DOM öğesiyle ilişkili açılır bir örnek döndüren veya başlatılmamış olması durumunda yeni bir tane oluşturan statik yöntem. Bunu şu şekilde kullanabilirsiniz:bootstrap.Dropdown.getOrCreateInstance(element) |
Olaylar
Tüm açılır liste olayları, geçiş öğesinde tetiklenir ve ardından kabarcıklanır. .dropdown-menu
Böylece, 'nin ana öğesine olay dinleyicileri de ekleyebilirsiniz . 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ü olduğunda ).click
Yöntem | Tanım |
---|---|
show.bs.dropdown |
Gösteri örneği yöntemi çağrıldığında hemen tetiklenir. |
shown.bs.dropdown |
Açılır menü kullanıcıya görünür hale getirildiğinde ve CSS geçişleri tamamlandığında tetiklenir. |
hide.bs.dropdown |
Örnek gizleme yöntemi çağrıldığında hemen tetiklenir. |
hidden.bs.dropdown |
Açılır listenin kullanıcıdan gizlenmesi bittiğinde ve CSS geçişleri tamamlandığında tetiklenir. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})