Aftrekkies

Wissel kontekstuele oorlegsels vir die vertoon van lyste skakels en meer met die Bootstrap-aftrek-inprop.

Oorsig

Aftrekkies is wisselbare, kontekstuele oorlegsels vir die vertoon van lyste skakels en meer. Hulle word interaktief gemaak met die ingeslote Bootstrap-aftreklys JavaScript-inprop. Hulle word gewissel deur te klik, nie deur te beweeg nie; dit is ' n doelbewuste ontwerpbesluit.

Dropdowns is gebou op 'n derdeparty-biblioteek, Popper.js , wat dinamiese posisionering en kykpoort-opsporing bied. Maak seker dat jy popper.min.js voor Bootstrap se JavaScript insluit of gebruik bootstrap.bundle.min.js/ bootstrap.bundle.jswat Popper.js bevat. Popper.js word nie gebruik om aftrekkies in navigasiebalke te posisioneer nie, aangesien dinamiese posisionering nie vereis word nie.

As jy ons JavaScript vanaf die bron bou, vereisutil.js dit .

Toeganklikheid

Die WAI ARIA - standaard definieer 'n werklike role="menu"legstuk , maar dit is spesifiek vir toepassingagtige spyskaarte wat aksies of funksies aktiveer. ARIA -kieslyste kan slegs kieslys-items, bokskieslysitems, radioknoppie-kieslysitems, radioknoppiegroepe en subkieslyste bevat.

Bootstrap se aftreklys, aan die ander kant, is ontwerp om generies te wees en van toepassing op 'n verskeidenheid situasies en opmaakstrukture. Dit is byvoorbeeld moontlik om aftreklys te skep wat bykomende invoere en vormkontroles bevat, soos soekvelde of aanmeldvorms. Om hierdie rede verwag Bootstrap nie (en voeg ook nie outomaties by) enige van die roleen aria-kenmerke wat nodig is vir ware ARIA- spyskaarte nie. Skrywers sal hierdie meer spesifieke eienskappe self moet insluit.

Bootstrap voeg egter ingeboude ondersteuning by vir die meeste standaard sleutelbordkieslysinteraksies, soos die vermoë om deur individuele .dropdown-itemelemente te beweeg deur die wysersleutels te gebruik en die spyskaart met die ESCsleutel toe te maak.

Voorbeelde

Draai die aftreklys se skakelaar (jou knoppie of skakel) en die aftreklys binne .dropdown, of 'n ander element wat verklaar position: relative;. Dropdowns kan geaktiveer word vanaf <a>of <button>elemente om beter by jou potensiële behoeftes te pas.

Enkele knoppie

Enige enkele .btnkan verander word in 'n aftrek-skakelaar met 'n paar opmaakveranderinge. Hier is hoe jy hulle met enige van die <button>elemente kan laat werk:

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

En met <a>elemente:

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

Die beste deel is dat jy dit ook met enige knoppievariant kan doen:

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

Verdeel knoppie

Skep eweneens verdeelknoppie-aftrekkies met feitlik dieselfde opmaak as enkelknoppie-aftrekkies, maar met die byvoeging van .dropdown-toggle-splitvir behoorlike spasiëring rondom die aftreklys.

Ons gebruik hierdie ekstra klas om die horisontale paddingaan weerskante van die karet met 25% te verminder en verwyder die margin-leftwat bygevoeg is vir gereelde knoppie-aftrekkies. Daardie ekstra veranderinge hou die karet gesentreer in die verdeelknoppie en bied 'n meer toepaslike grootte trefarea langs die hoofknoppie.

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

Grootte

Knoppie-aftrekkies werk met knoppies van alle groottes, insluitend verstek- en verdeel-aftrekkiesknoppies.

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

Aanwysings

Dropup

Sneller aftrekkieslyste bo elemente deur by .dropupdie ouerelement by te voeg.

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

Dropright

Sneller aftrekkieslys aan die regterkant van die elemente deur by .droprightdie ouerelement te voeg.

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

Dropleft

Sneller aftrekkieslys aan die linkerkant van die elemente deur by .dropleftdie ouerelement te voeg.

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

Histories moes die inhoud van die aftreklys skakels wees, maar dit is nie meer die geval met v4 nie. Nou kan jy opsioneel <button>elemente in jou aftreklys gebruik in plaas van net <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>

Jy kan ook nie-interaktiewe dropdown items skep met .dropdown-item-text. Stileer gerus verder met pasgemaakte CSS of tekshulpmiddels.

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

Aktief

Voeg .activeby items in die aftreklys om hulle as aktief te styl .

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

Gestrem

Voeg .disabledby items in die aftreklys om dit as gedeaktiveer te styl .

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

By verstek word 'n aftreklys outomaties 100% van bo en langs die linkerkant van sy ouer geposisioneer. Voeg .dropdown-menu-rightby 'n .dropdown-menuna regs-belyn die aftreklys.

Let op! Aftrekkies word geposisioneer danksy Popper.js (behalwe wanneer dit in 'n navigasiebalk vervat is).

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

Opskrifte

Voeg 'n kopskrif by om afdelings van handelinge in enige aftreklys te benoem.

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

Verdelers

Skei groepe verwante spyskaartitems met 'n verdeler.

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

Teks

Plaas enige vryvorm teks binne 'n aftreklys met teks en gebruik spasiëring nutsprogramme . Let daarop dat jy waarskynlik bykomende groottestyle sal benodig om die spyskaartwydte te beperk.

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

Vorms

Plaas 'n vorm in 'n aftrekkieslys, of maak dit in 'n aftreklys, en gebruik marge- of opvullingshulpmiddels om dit die negatiewe spasie te gee wat u benodig.

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

Gebruik data-offsetof data-referenceom die ligging van die aftreklys te verander.

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

Gebruik

.showVia data-kenmerke of JavaScript skakel die aftrek-inprop verborge inhoud (aftrekkieslyste) deur die klas op die ouerlysitem te wissel . Daar data-toggle="dropdown"word op die kenmerk staatgemaak vir die sluiting van aftreklyste op 'n toepassingsvlak, so dit is 'n goeie idee om dit altyd te gebruik.

Op touch-geaktiveerde toestelle, die opening van 'n aftreklys voeg leë ( $.noop) mouseoverhanteerders by die onmiddellike kinders van die <body>element. Hierdie weliswaar lelike hack is nodig om 'n eienaardigheid in iOS se gebeurtenisafvaardiging te omseil , wat andersins sou verhoed dat 'n tik op enige plek buite die aftreklys die kode aktiveer wat die aftreklys toemaak. Sodra die aftreklys gesluit is, word hierdie bykomende leë mouseoverhanteerders verwyder.

Via data-eienskappe

Voeg data-toggle="dropdown"by 'n skakel of knoppie om 'n aftreklys te wissel.

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

Via JavaScript

Bel die aftreklys via JavaScript:

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

`data-toggle="dropdown"`steeds benodig

Ongeag of jy jou aftreklys via JavaScript oproep of eerder die data-api gebruik, data-toggle="dropdown"moet altyd teenwoordig wees op die aftreklys se sneller-element.

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-offset="".

Naam	Tik	Verstek	Beskrywing
verreken	nommer \| tou \| funksie	0	Verskuiwing van die aftreklys relatief tot sy teiken. Vir meer inligting verwys na Popper.js se offset docs .
flip	boolean	waar	Laat Dropdown toe om te draai in die geval van 'n oorvleueling op die verwysingselement. Vir meer inligting verwys na Popper.js se flip docs .
grens	tou \| element	'scrollParent'	Oorloop beperkingsgrens van die aftreklys. Aanvaar die waardes van `'viewport'`, `'window'`, `'scrollParent'`, of 'n HTMLElement-verwysing (slegs JavaScript). Vir meer inligting, verwys na Popper.js se preventOverflow-dokumente .
verwysing	tou \| element	'wissel'	Verwysingselement van die aftreklys. Aanvaar die waardes van `'toggle'`, `'parent'`, of 'n HTMLElement-verwysing. Vir meer inligting verwys na Popper.js se referenceObject docs .
vertoon	string	'dinamies'	By verstek gebruik ons Popper.js vir dinamiese posisionering. Deaktiveer dit met `static`.

Let op wanneer boundaryop enige ander waarde as gestel 'scrollParent'is, word die styl position: staticop die .dropdownhouer toegepas.

Metodes

Metode	Beskrywing
`$().dropdown('toggle')`	Wissel die aftreklys van 'n gegewe navigasiebalk of navigasie met oortjies.
`$().dropdown('update')`	Dateer die posisie van 'n element se aftreklys op.
`$().dropdown('dispose')`	Vernietig 'n element se aftreklys.

Gebeurtenisse

Alle aftrek-gebeurtenisse word afgevuur op die .dropdown-menuse ouerelement en het 'n relatedTargeteienskap, waarvan die waarde die wissel-ankerelement is. hide.bs.dropdownen hidden.bs.dropdowngebeurtenisse het 'n clickEventeienskap (slegs wanneer die oorspronklike gebeurtenistipe click) is wat 'n gebeurtenisobjek vir die klikgebeurtenis bevat.

Gebeurtenis	Beskrywing
`show.bs.dropdown`	Hierdie gebeurtenis begin onmiddellik wanneer die wys-instansie-metode geroep word.
`shown.bs.dropdown`	Hierdie gebeurtenis word afgevuur wanneer die aftreklys vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi).
`hide.bs.dropdown`	Hierdie gebeurtenis word onmiddellik afgevuur wanneer die versteek instansie metode geroep is.
`hidden.bs.dropdown`	Hierdie gebeurtenis word afgevuur wanneer die aftreklys klaar vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi).

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

Aftrekkies

Oorsig

Toeganklikheid

Voorbeelde

Enkele knoppie

Verdeel knoppie

Grootte

Aanwysings

Dropup

Dropright

Dropleft

Spyskaart-items

Aktief

Gestrem

Spyskaartbelyning

Spyskaart inhoud

Opskrifte

Verdelers

Teks

Vorms

Gebruik

Via data-eienskappe

Via JavaScript

`data-toggle="dropdown"`steeds benodig

Opsies

Metodes

Gebeurtenisse

Aftrekkies

Oorsig

Toeganklikheid

Voorbeelde

Enkele knoppie

Verdeel knoppie

Grootte

Aanwysings

Dropup

Dropright

Dropleft

Spyskaart-items

Aktief

Gestrem

Spyskaartbelyning

Spyskaart inhoud

Opskrifte

Aftrekopskrif

Verdelers

Teks

Vorms

Aftreklys opsies

Gebruik

Via data-eienskappe

Via JavaScript

data-toggle="dropdown"steeds benodig

Opsies

Metodes

Gebeurtenisse

`data-toggle="dropdown"`steeds benodig