Source

Išskleidžiamieji meniu

Perjunkite kontekstines perdangas, kad būtų rodomi nuorodų sąrašai ir daugiau, naudodami Bootstrap išskleidžiamąjį papildinį.

Apžvalga

Išskleidžiamuosius meniu galima perjungti, kontekstinės perdangos, skirtos nuorodų sąrašams rodyti ir kt. Jie yra interaktyvūs naudojant įtrauktą „Bootstrap“ išskleidžiamąjį „JavaScript“ papildinį. Jie perjungiami spustelėjus, o ne užvedus pelės žymeklį; tai tyčinis dizaino sprendimas.

Išskleidžiamieji meniu sukurti remiantis trečiosios šalies biblioteka Popper.js , kuri suteikia dinamišką padėties nustatymą ir peržiūros srities aptikimą. Prieš „Bootstrap JavaScript“ būtinai įtraukite popper.min.js arba naudokite bootstrap.bundle.min.js/ bootstrap.bundle.jskuriame yra Popper.js. Popper.js nėra naudojamas naršymo juostose išdėstyti išskleidžiamuosius meniu, tačiau dinaminis padėties nustatymas nereikalingas.

Jei kuriate „JavaScript“ iš šaltinio, tam reikiautil.js .

Prieinamumas

WAI ARIA standartas apibrėžia tikrąjį valdiklį role="menu" , tačiau tai būdinga į programą panašiems meniu, kurie suaktyvina veiksmus arba funkcijas. ARIA meniu gali būti tik meniu elementai, žymės langelio meniu elementai, akutinio mygtuko meniu elementai, radijo mygtukų grupės ir antriniai meniu.

Kita vertus, „Bootstrap“ išskleidžiamieji meniu yra sukurti taip, kad būtų bendri ir pritaikyti įvairioms situacijoms bei žymėjimo struktūroms. Pavyzdžiui, galima sukurti išskleidžiamuosius meniu, kuriuose yra papildomų įvesties ir formų valdiklių, tokių kaip paieškos laukai arba prisijungimo formos. Dėl šios priežasties Bootstrap nesitiki (ir automatiškai neprideda) jokių roleir aria-atributų, reikalingų tikriems ARIA meniu. Autoriai turės patys įtraukti šiuos konkretesnius atributus.

Tačiau „Bootstrap“ prideda įmontuotą daugelio standartinių klaviatūros meniu sąveikų palaikymą, pvz., galimybę naršyti per atskirus .dropdown-itemelementus naudojant žymeklio klavišus ir uždaryti meniu ESCmygtuku.

Pavyzdžiai

Apvyniokite išskleidžiamojo meniu jungiklį (savo mygtuką arba nuorodą) ir išskleidžiamąjį meniu .dropdownarba kitą elementą, kuris deklaruoja position: relative;. Išskleidžiamuosius meniu galima suaktyvinti iš <a>arba <button>elementų, kurie geriau atitiktų jūsų galimus poreikius.

Vienas mygtukas

Bet kuris singlas .btngali būti paverstas išskleidžiamuoju jungikliu su tam tikrais žymėjimo pakeitimais. Štai kaip galite juos pritaikyti darbui su bet <button>kuriais elementais:

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

Ir su <a>elementais:

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

Geriausia tai, kad tai galite padaryti naudodami bet kurį mygtuko variantą:

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

Split mygtukas

Panašiai sukurkite padalintų mygtukų išskleidžiamuosius meniu su beveik tokiais pačiais žymėjimais kaip ir vieno mygtuko išskleidžiamieji meniu, tačiau .dropdown-toggle-splitpridėkite tinkamą tarpą aplink išskleidžiamąjį meniu.

Naudojame šią papildomą klasę, kad sumažintume horizontalią padėtį paddingabiejose dėklo pusėse 25 % ir pašalintume tai margin-left, kas pridedama prie įprastų mygtukų išskleidžiamųjų meniu. Dėl šių papildomų pakeitimų taškas yra padalijimo mygtuko centre ir šalia pagrindinio mygtuko pateikiama tinkamesnio dydžio smūgio sritis.

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

Dydžio nustatymas

Mygtukų išskleidžiamieji meniu veikia su visų dydžių mygtukais, įskaitant numatytuosius ir padalintus išskleidžiamuosius mygtukus.

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

Kryptys

Nukritimas

Suaktyvinkite išskleidžiamuosius meniu virš elementų pridėdami .dropupprie pagrindinio elemento.

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

Suaktyvinkite išskleidžiamuosius meniu elementų dešinėje pridėdami .droprightprie pagrindinio elemento.

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

Suaktyvinkite išskleidžiamuosius meniu elementų kairėje, pridėdami .dropleftprie pagrindinio elemento.

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

Istoriškai išskleidžiamojo meniu turinys turėjo būti nuorodos, bet 4 v. versijoje tai nebėra. Dabar galite pasirinktinai naudoti <button>elementus išskleidžiamuosiuose meniu, o ne tik <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>

Taip pat galite sukurti neinteraktyvius išskleidžiamuosius elementus naudodami .dropdown-item-text. Nedvejodami kurkite stilių naudodami pasirinktines CSS arba teksto priemones.

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

Aktyvus

Pridėkite .activeprie elementų išskleidžiamajame meniu, kad jie būtų aktyvūs .

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

Išjungta

Pridėkite .disabledprie elementų išskleidžiamajame meniu, kad jie būtų išjungti .

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

Pagal numatytuosius nustatymus išskleidžiamasis meniu automatiškai pateikiamas 100 % iš viršaus ir išilgai kairiosios pirminio puslapio pusės. Pridėti .dropdown-menu-rightprie a .dropdown-menuį dešinę išlygiuoti išskleidžiamąjį meniu.

Galvas aukštyn! Išskleidžiamieji meniu yra išdėstyti naudojant Popper.js (išskyrus atvejus, kai jie yra naršymo juostoje).

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

Antraštės

Pridėkite antraštę prie veiksmų sekcijų žymėjimo bet kuriame išskleidžiamajame meniu.

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

Skirstytuvai

Atskirkite susijusių meniu elementų grupes skirstytuvu.

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

Tekstas

Įdėkite bet kokį laisvos formos tekstą į išskleidžiamąjį meniu su tekstu ir naudokite tarpų priemones . Atminkite, kad norint apriboti meniu plotį, greičiausiai reikės papildomų dydžio stilių.

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

Formos

Įdėkite formą į išskleidžiamąjį meniu arba paverskite ją išskleidžiamuoju meniu ir naudokite paraštės arba užpildymo priemones , kad suteiktumėte jai reikalingą neigiamą erdvę.

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

Naudokite data-offsetarba data-referencenorėdami pakeisti išskleidžiamojo meniu vietą.

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

Naudojimas

Naudodamas duomenų atributus arba „JavaScript“, išskleidžiamasis papildinys perjungia paslėptą turinį (išskleidžiamuosius meniu), perjungdamas .showklasę pirminio sąrašo elemente. Atributas naudojamas data-toggle="dropdown"uždarant išskleidžiamuosius meniu programos lygiu, todėl verta jį naudoti visada.

Įrenginiuose, kuriuose įgalintas jutiklinis, atidarius išskleidžiamąjį meniu , prie tiesioginių elemento antrinių elementų pridedamos tuščios ( $.noop) tvarkyklės . Šis, žinoma, bjaurus įsilaužimas yra būtinas norint išspręsti „iOS“ įvykių delegavimo keistenybę , kuri kitu atveju neleistų palietus bet kurioje išskleidžiamojo meniu ribų suaktyvinti kodą, kuris uždaro išskleidžiamąjį meniu. Kai išskleidžiamasis meniu uždaromas, šios papildomos tuščios tvarkyklės pašalinamos.mouseover<body>mouseover

Per duomenų atributus

Pridėkite data-toggle="dropdown"prie nuorodos arba mygtuko, kad perjungtumėte išskleidžiamąjį meniu.

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

Per JavaScript

Iškvieskite išskleidžiamuosius meniu naudodami „JavaScript“:

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

`data-toggle="dropdown"`vis dar reikalingas

Nepriklausomai nuo to, ar iškviečiate išskleidžiamąjį meniu naudodami „JavaScript“, ar vietoj to naudojate duomenų API, data-toggle="dropdown"visada turi būti išskleidžiamojo meniu aktyviklio elemente.

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-offset="".

vardas	Tipas	Numatytas	apibūdinimas
kompensuoti	numeris \| styga \| funkcija	0	Išskleidžiamojo meniu poslinkis, palyginti su jo tikslu. Daugiau informacijos rasite Popper.js poslinkio dokumentuose .
apversti	loginis	tiesa	Leisti išskleidžiamajam meniu apversti, jei atskaitos elementas sutampa. Norėdami gauti daugiau informacijos, žr. Popper.js apverčiamus dokumentus .
riba	styga \| elementas	'scrollParent'	Išskleidžiamojo meniu perpildymo apribojimo riba. Priima , , arba HTMLElement nuorodos reikšmes `'viewport'`( `'window'`tik `'scrollParent'`JavaScript). Daugiau informacijos rasite Popper.js preventOverflow dokumentuose .
nuoroda	styga \| elementas	'perjungti'	Išskleidžiamojo meniu nuorodos elementas. Priima `'toggle'`, `'parent'`, arba HTMLElement nuorodos reikšmes. Daugiau informacijos rasite Popper.js nuorodojeObject docs .
ekranas	styga	'dinamiškas'	Pagal numatytuosius nustatymus dinaminei padėties nustatymui naudojame Popper.js. Išjunkite tai naudodami `static`.

Atkreipkite dėmesį, kai boundarynustatyta bet kuri kita reikšmė nei 'scrollParent', stilius position: statictaikomas .dropdownsudėtiniam rodiniui.

Metodai

Metodas	apibūdinimas
`$().dropdown('toggle')`	Perjungia tam tikros naršymo juostos arba skirtukų naršymo išskleidžiamąjį meniu.
`$().dropdown('update')`	Atnaujina elemento išskleidžiamojo meniu padėtį.
`$().dropdown('dispose')`	Sunaikina elemento išskleidžiamąjį meniu.

Renginiai

Visi išskleidžiamieji įvykiai suaktyvinami .dropdown-menupirminiame elemente ir turi relatedTargetypatybę, kurios vertė yra perjungimo prieraišo elementas. hide.bs.dropdownir hidden.bs.dropdownįvykiai turi clickEventypatybę (tik tada, kai pradinis įvykio tipas yra click), kurioje yra paspaudimo įvykio įvykio objektas.

Renginys	apibūdinimas
`show.bs.dropdown`	Šis įvykis suaktyvinamas iš karto, kai iškviečiamas rodyti egzempliorių metodas.
`shown.bs.dropdown`	Šis įvykis suaktyvinamas, kai išskleidžiamasis meniu tampa matomas vartotojui (lauks, kol bus atliktas CSS perėjimas).
`hide.bs.dropdown`	Šis įvykis suaktyvinamas iš karto, kai iškviečiamas slėpimo egzemplioriaus metodas.
`hidden.bs.dropdown`	Šis įvykis suaktyvinamas, kai išskleidžiamasis meniu baigiamas paslėpti nuo vartotojo (lauks, kol bus atlikti CSS perėjimai).

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

Išskleidžiamieji meniu

Apžvalga

Prieinamumas

Pavyzdžiai

Vienas mygtukas

Split mygtukas

Dydžio nustatymas

Kryptys

Nukritimas

Dropright

Dropleft

Meniu elementai

Aktyvus

Išjungta

Meniu derinimas

Meniu turinys

Antraštės

Skirstytuvai

Tekstas

Formos

Naudojimas

Per duomenų atributus

Per JavaScript

`data-toggle="dropdown"`vis dar reikalingas

Galimybės

Metodai

Renginiai

Išskleidžiamieji meniu

Apžvalga

Prieinamumas

Pavyzdžiai

Vienas mygtukas

Split mygtukas

Dydžio nustatymas

Kryptys

Nukritimas

Dropright

Dropleft

Meniu elementai

Aktyvus

Išjungta

Meniu derinimas

Meniu turinys

Antraštės

Išskleidžiamojo meniu antraštė

Skirstytuvai

Tekstas

Formos

Išskleidžiamojo meniu parinktys

Naudojimas

Per duomenų atributus

Per JavaScript

data-toggle="dropdown"vis dar reikalingas

Galimybės

Metodai

Renginiai

`data-toggle="dropdown"`vis dar reikalingas