Dropdowns

Ndrysho mbivendosjet kontekstuale për shfaqjen e listave të lidhjeve dhe më shumë me shtojcën me lëshim Bootstrap.

Vështrim i përgjithshëm

Dropdowns janë mbivendosje të ndërrueshme, kontekstuale për shfaqjen e listave të lidhjeve dhe më shumë. Ato janë bërë ndërvepruese me shtojcën e përfshirë JavaScript me zbritje Bootstrap. Ato ndërrohen duke klikuar, jo duke qëndruar pezull; ky është një vendim i qëllimshëm i projektimit.

Dropdowns janë ndërtuar në një bibliotekë të palës së tretë, Popper.js , e cila ofron pozicionim dinamik dhe zbulim të pamjes. Sigurohuni që të përfshini popper.min.js përpara JavaScript-it të Bootstrap ose përdorni bootstrap.bundle.min.js/ bootstrap.bundle.jsqë përmban Popper.js. Popper.js nuk përdoret për të pozicionuar skedarët me zbritje në shiritat e navigimit, megjithëse nuk kërkohet pozicionimi dinamik.

Nëse po ndërtoni JavaScript-in tonë nga burimi, ai kërkonutil.js .

Aksesueshmëria

Standardi WAI ARIA role="menu" përcakton një miniaplikacion aktual , por kjo është specifike për menytë e ngjashme me aplikacionet që aktivizojnë veprime ose funksione. Menytë ARIA mund të përmbajnë vetëm artikujt e menysë, artikujt e menysë së kutisë së kontrollit, artikujt e menysë së butonave të radios, grupet e butonave të radios dhe nën-menytë.

Nga ana tjetër, pikat e lëshimit të Bootstrap janë krijuar për të qenë të përgjithshme dhe të zbatueshme për një sërë situatash dhe strukturash shënjimi. Për shembull, është e mundur të krijohen skedarë që përmbajnë hyrje shtesë dhe kontrolle të formularit, të tilla si fushat e kërkimit ose formularët e hyrjes. Për këtë arsye, Bootstrap nuk pret (as nuk shton automatikisht) asnjë nga atributet roledhe atributet e kërkuara për menutë aria-e vërteta ARIA . Autorët do të duhet të përfshijnë vetë këto atribute më specifike.

Megjithatë, Bootstrap shton mbështetje të integruar për shumicën e ndërveprimeve standarde të menysë së tastierës, të tilla si aftësia për të lëvizur nëpër .dropdown-itemelementë individualë duke përdorur çelësat e kursorit dhe për të mbyllur menunë me ESCtastin.

Shembuj

Mbështilleni çelësin e menysë rënëse (butonin ose lidhjen tuaj) dhe menynë rënëse brenda .dropdown, ose një element tjetër që deklaron position: relative;. Dropdowns mund të shkaktohen nga <a>ose <button>elemente për t'iu përshtatur më mirë nevojave tuaja të mundshme.

Zbritje me një buton të vetëm

Çdo këngë .btnmund të shndërrohet në një ndërrim me rënie me disa ndryshime shënimi. Ja se si mund t'i vendosni ato në punë me secilin <button>element:

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

Dhe me <a>elemente:

<div class="dropdown show">
  <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>

Pjesa më e mirë është që ju mund ta bëni këtë me çdo variant të butonit, gjithashtu:

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

Zbritje të butonave të ndarjes

Në mënyrë të ngjashme, krijoni zbritje të butonave të ndarjes me pothuajse të njëjtin shënim si ato me një buton të vetëm, por me shtimin e .dropdown-toggle-splitpër ndarjen e duhur rreth skeletit rënës.

Ne e përdorim këtë klasë shtesë për të reduktuar horizontalin paddingnë të dyja anët e kartës me 25% dhe për të hequr atë margin-leftqë shtohet për zbritjet e butonave të rregullt. Këto ndryshime shtesë e mbajnë kutinë të përqendruar në butonin e ndarjes dhe sigurojnë një zonë goditjeje me madhësi më të përshtatshme pranë butonit kryesor.

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

Përmasat

Lëshimet e butonave funksionojnë me butona të të gjitha madhësive, duke përfshirë butonat e paracaktuar dhe të ndarë.

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

Variacion në rënie

Aktivizoni menytë rënëse sipër elementeve duke shtuar .dropupte elementi prind.

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

Variacion i pikës

Aktivizoni menytë rënëse në të djathtë të elementeve duke shtuar .droprightte elementi prind.

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

Variacion i pikës

Aktivizoni menytë rënëse në të majtë të elementeve duke shtuar .dropleftte elementi prind.

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

Historikisht, përmbajtja e menusë rënëse duhet të ishte lidhje, por kjo nuk është më rasti me v4. Tani mund të përdorni opsionalisht <button>elementë në listën tuaj rënëse në vend të vetëm <a>s.

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

Si parazgjedhje, një meny rënëse pozicionohet automatikisht 100% nga lart dhe përgjatë anës së majtë të prindit të saj. Shtoni .dropdown-menu-rightnë a .dropdown-menunë të djathtë, rreshtoni menunë rënëse.

Kokat lart! Dropdown pozicionohen falë Popper.js (përveç rasteve kur ato gjenden në një shirit navigimi).

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

Shtoni një kokë për të etiketuar seksionet e veprimeve në çdo meny rënëse.

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

Ndani grupet e artikujve të lidhur të menysë me një ndarës.

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

Vendosni një formular brenda një menyje rënëse, ose shndërrojeni atë në një meny rënëse dhe përdorni shërbimet e margjinës ose mbushjes për t'i dhënë asaj hapësirën negative që ju nevojitet.

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

Shtojini .activeartikujve në listën rënëse për t'i stiluar si aktivë .

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

Shtojini .disabledartikujve në listën rënëse për t'i stiluar si të paaftë .

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

Përdorimi

Nëpërmjet atributeve të të dhënave ose JavaScript-it, shtojca me drop-down ndryshon përmbajtjen e fshehur (menytë me zbritje) duke ndërruar .showklasën në artikullin prind të listës. Atributi data-toggle="dropdown"mbështetet për mbylljen e menyve rënëse në një nivel aplikacioni, kështu që është një ide e mirë ta përdorni gjithmonë atë.

Në pajisjet e aktivizuara me prekje, hapja e një menyje rënëse shton mbajtës të zbrazët ( $.noop) mouseoverfëmijëve të menjëhershëm të <body>elementit. Ky hak pa dyshim i shëmtuar është i nevojshëm për të zgjidhur një problem të çuditshëm në delegimin e ngjarjeve të iOS , i cili përndryshe do të parandalonte një trokitje kudo jashtë listës së lëshimit nga aktivizimi i kodit që mbyll listën me lëshim. Pasi të mbyllet menyja rënëse, këta mouseovermbajtës shtesë bosh hiqen.

Nëpërmjet atributeve të të dhënave

Shto data-toggle="dropdown"në një lidhje ose buton për të ndërruar një listë rënëse.

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

Përmes JavaScript

Thirrni skedarët e lëshimit përmes JavaScript:

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

`data-toggle="dropdown"`ende kërkohet

Pavarësisht nëse e telefononi listën tuaj të lëshimit përmes JavaScript ose në vend të kësaj përdorni data-api, data-toggle="dropdown"kërkohet që të jetë gjithmonë i pranishëm në elementin e aktivizimit të listës rënëse.

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-offset="".

Emri	Lloji	E paracaktuar	Përshkrim
kompensuar	numri \| varg \| funksionin	0	Kompensimi i zbritjes në lidhje me objektivin e tij. Për më shumë informacion referojuni dokumenteve offset të Popper.js .
rrokullisje	logjike	e vërtetë	Lejo që Dropdown të rrokulliset në rast të një mbivendosjeje në elementin e referencës. Për më shumë informacion referojuni dokumenteve rrotulluese të Popper.js .
kufiri	varg \| element	'scrollParent'	Kufiri i kufizimit të tejmbushjes së menysë rënëse. Pranon vlerat e `'viewport'`, `'window'`, `'scrollParent'`, ose një referencë HTMLElement (vetëm JavaScript). Për më shumë informacion, referojuni dokumenteve të preventOverflow të Popper.js .

Vini re kur boundaryvendoset në ndonjë vlerë tjetër përveç 'scrollParent', stili position: staticzbatohet në .dropdownkontejner.

Metodat

Metoda	Përshkrim
`$().dropdown('toggle')`	Ndryshon menynë rënëse të një navigimi të caktuar navigimi ose me skeda.
`$().dropdown('update')`	Përditëson pozicionin e menysë rënëse të një elementi.
`$().dropdown('dispose')`	Shkatërron listën e një elementi.

Ngjarjet

Të gjitha ngjarjet me rënie aktivizohen në .dropdown-menuelementin mëmë dhe kanë një relatedTargetveti, vlera e së cilës është elementi i ankorimit ndërrues.

Ngjarje	Përshkrim
`show.bs.dropdown`	Kjo ngjarje ndizet menjëherë kur thirret metoda e shembullit të shfaqjes.
`shown.bs.dropdown`	Kjo ngjarje aktivizohet kur menyja rënëse është bërë e dukshme për përdoruesin (do të presë që kalimet CSS të përfundojnë).
`hide.bs.dropdown`	Kjo ngjarje aktivizohet menjëherë kur është thirrur metoda e shembullit të fshehjes.
`hidden.bs.dropdown`	Kjo ngjarje aktivizohet kur fshirja e listës me zbritje ka përfunduar nga përdoruesi (do të presë që tranzicioni i CSS të përfundojë).

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

Dropdowns

Vështrim i përgjithshëm

Aksesueshmëria

Shembuj

Zbritje me një buton të vetëm

Zbritje të butonave të ndarjes

Përmasat

Variacion në rënie

Variacion i pikës

Variacion i pikës

Artikujt e menysë

Shtrirja e menysë

Titujt e menysë

Ndarësit e menysë

Format e menusë

Artikujt aktivë të menusë

Artikujt e menysë të çaktivizuar

Përdorimi

Nëpërmjet atributeve të të dhënave

Përmes JavaScript

`data-toggle="dropdown"`ende kërkohet

Opsione

Metodat

Ngjarjet

Dropdowns

Vështrim i përgjithshëm

Aksesueshmëria

Shembuj

Zbritje me një buton të vetëm

Zbritje të butonave të ndarjes

Përmasat

Variacion në rënie

Variacion i pikës

Variacion i pikës

Artikujt e menysë

Shtrirja e menysë

Titujt e menysë

Titulli me zbritje

Ndarësit e menysë

Format e menusë

Artikujt aktivë të menusë

Artikujt e menysë të çaktivizuar

Përdorimi

Nëpërmjet atributeve të të dhënave

Përmes JavaScript

data-toggle="dropdown"ende kërkohet

Opsione

Metodat

Ngjarjet

`data-toggle="dropdown"`ende kërkohet