Droim anuas

Scoránaigh forleagain comhthéacsúla chun liostaí nasc agus tuilleadh a thaispeáint leis an mbreiseán anuas Bootstrap.

Forbhreathnú

Is forleagan comhthéacsúla in-scoránaithe iad anuas chun liostaí nasc agus go leor eile a thaispeáint. Déantar iad idirghníomhach leis an mbreiseán JavaScript anuas Bootstrap atá san áireamh. Déantar iad a scoránaigh trí chliceáil, ní trí hovering; is cinneadh deartha d'aon ghnó é seo.

Tógtar dropdowns ar leabharlann tríú páirtí, Popper.js , a sholáthraíonn suíomh dinimiciúil agus braite radhairc. Bí cinnte popper.min.js a chur san áireamh roimh JavaScript Bootstrap nó úsáid bootstrap.bundle.min.js/ bootstrap.bundle.jsina bhfuil Popper.js. Ní úsáidtear Popper.js chun anuas a shuíomh sna barraí nascleanúna ach mar ní gá suíomh dinimiciúil a dhéanamh.

Má tá ár JavaScript á thógáil agat ón bhfoinse, teastaíonnutil.js .

Inrochtaineacht

Sainmhíníonn caighdeán WAI ARIA role="menu" giuirléid iarbhír , ach baineann sé seo go sonrach le biachláir cosúil le feidhmchláir a spreagann gníomhartha nó feidhmeanna. Ní féidir ach míreanna roghchláir, míreanna roghchláir ticbhosca, míreanna roghchláir cnaipe raidió, grúpaí cnaipí raidió, agus fo-roghchláir a bheith i mbiachláir ARIA .

Ar an láimh eile, tá dropdowns Bootstrap deartha le bheith cineálach agus infheidhme ar éagsúlacht cásanna agus struchtúir marcála. Mar shampla, is féidir anuas a chruthú ina bhfuil ionchuir bhreise agus rialuithe foirme, mar réimsí cuardaigh nó foirmeacha logáil isteach. Ar an ábhar sin, ní bhíonn Bootstrap ag súil le (ná cuireann sé leis go huathoibríoch) le haon cheann de na roleagus na aria-tréithe a theastaíonn le haghaidh fíor- roghchláir ARIA . Beidh ar na húdair na tréithe níos sainiúla seo a chur san áireamh iad féin.

Mar sin féin, cuireann Bootstrap tacaíocht ionsuite le haghaidh an chuid is mó de na hidirghníomhaíochtaí caighdeánach roghchlár méarchláir, mar shampla an cumas bogadh trí .dropdown-itemeilimintí aonair ag baint úsáide as na heochracha cúrsóra agus an roghchlár a dhúnadh leis an ESCeochair.

Samplaí

Wrap an scoránaigh anuas (do cnaipe nó nasc) agus an roghchlár anuas laistigh de .dropdown, nó eilimint eile a dhearbhaíonn position: relative;. Is féidir titim anuas a spreagadh ó <a>nó <button>eilimintí a d’oirfeadh níos fearr do do riachtanais ionchasacha.

Cnaipe singil

Is féidir aon singil .btna iompú ina scorán anuas le roinnt athruithe marcála. Seo mar is féidir leat iad a chur ag obair le ceachtar den dá <button>eilimint:

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

Agus le <a>heilimintí:

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

Is é an chuid is fearr gur féidir leat é seo a dhéanamh le haon malairt cnaipe, freisin:

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

Cnaipe Scoilte

Ar an gcaoi chéanna, cruthaigh anuas ar chnaipí scoilte a bhfuil an mharcáil chéanna acu beagnach agus anuas ar chnaipí anuas, ach .dropdown-toggle-splitcuir isteach spásáil cheart timpeall ar an gcúram anuas.

Bainimid úsáid as an rang breise seo chun an cothrománach paddingar gach taobh den airíoch a laghdú 25% agus bainimid an ceann margin-lefta chuirtear leis le haghaidh anuas cnaipe rialta. Coinníonn na hathruithe breise sin an cúramóir dírithe ar an gcnaipe scoilte agus soláthraíonn siad limistéar buailte de mhéid níos oiriúnaí in aice leis an bpríomhchnaipe.

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

Sizing

Oibríonn dropdowns cnaipe le cnaipí de gach méid, lena n-áirítear réamhshocraithe agus cnaipí anuas scoilte.

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

Treoracha

Buail isteach

Truicear roghchláir anuas os cionn eilimintí trí chur .dropupleis an máthaireilimint.

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

Truicear roghchláir anuas ar thaobh na láimhe deise de na heilimintí trí chur .droprightleis an máthaireilimint.

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

Drochleathach

Truicear roghchláir anuas ar thaobh na láimhe clé de na heilimintí trí chur .dropleftleis an máthaireilimint.

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

Go stairiúil níor mhór naisc a bheith in ábhar an roghchláir anuas , ach ní mar sin atá an scéal a thuilleadh le v4. <button>Anois is féidir leat eilimintí a úsáid go roghnach i do liostaí anuas seachas díreach <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>

Is féidir leat míreanna anuas neamh-idirghníomhacha a chruthú le .dropdown-item-text. Ná bíodh drogall ort tuilleadh stíle a dhéanamh le CSS saincheaptha nó le fóntais téacs.

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

Gníomhach

Cuir .activele míreanna sa roghchlár anuas chun iad a stíliú mar ghníomhach .

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

Faoi mhíchumas

Cuir .disabledle míreanna sa anuas chun iad a stíliú mar dhaoine díchumasaithe .

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

De réir réamhshocraithe, tá roghchlár anuas suite go huathoibríoch 100% ón mbarr agus ar an taobh clé dá thuismitheoir. Cuir .dropdown-menu-rightle a .dropdown-menuar dheis ailíniú an roghchlár anuas.

Cinnirí suas! Tá dropdowns suite a bhuíochas do Popper.js (ach amháin nuair a bhíonn siad i mbarra nascleanúna).

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

Ceanntásca

Cuir ceanntásc leis chun codanna de ghníomhartha a lipéadú in aon roghchlár anuas.

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

Roinnteoirí

Grúpaí ar leith de mhíreanna roghchláir gaolmhara le roinnteoir.

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

Téacs

Cuir téacs saorfhoirme ar bith laistigh de roghchlár anuas le téacs agus bain úsáid as fóntais spásála . Tabhair faoi deara gur dócha go mbeidh stíleanna breise méide uait chun leithead an roghchláir a shrianadh.

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

Foirmeacha

Cuir foirm laistigh de roghchlár anuas, nó cuir isteach i roghchlár anuas í, agus úsáid fóntais corrlaigh nó stuála chun an spás diúltach atá uait a thabhairt dó.

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

Úsáid data-offsetnó data-referencechun suíomh an anuas a athrú.

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

Úsáid

Trí shaintréithe sonraí nó JavaScript, scorálann an breiseán anuas ábhar i bhfolach (roghchláir anuas) tríd an .showrang a scoránaigh ar mhír liosta na dtuismitheoirí. Bítear ag brath ar an data-toggle="dropdown"tréith chun roghchláir anuas a dhúnadh ag leibhéal feidhmchláir, mar sin is smaoineamh maith é a úsáid i gcónaí.

Ar ghléasanna tadhaill-chumasaithe, cuireann oscailt anuas láimhseálaithe folamh ( $.noop) le leanaí díreacha na heiliminte. Tá an hack seo atá gránna admhaigh riachtanach chun oibriú timpeall ar chorraíl i dtoscaireacht imeachta iOS , rud a chuirfeadh cosc ar sconna áit ar bith lasmuigh den anuas as an gcód a dhúnann an anuas a spreagadh. Nuair a dhúntar an anuas, baintear na láimhseálaithe breise folamh seo.mouseover<body>mouseover

Trí tréithe sonraí

Cuir data-toggle="dropdown"le nasc nó cnaipe chun anuas a scoránaigh.

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

Trí JavaScript

Cuir glaoch ar na anuas trí JavaScript:

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

`data-toggle="dropdown"`fós ag teastáil

Is cuma cé acu a ghlaonn tú ar do anuas trí JavaScript nó ina ionad sin go n-úsáideann tú an data-api, ní mór duit data-toggle="dropdown"a bheith i láthair i gcónaí ar eilimint truicir an anuas.

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-offset="".

Ainm	Cineál	Réamhshocrú	Cur síos
fhritháireamh	uimhir \| teaghrán \| feidhm	0	Fritháireamh an anuas i gcoibhneas lena sprioc. Le haghaidh tuilleadh faisnéise déan tagairt do dhoiciméid fhritháireamh Popper.js .
smeach	Boole	fíor	Ceadaigh Dropdown a smeach i gcás forluí ar an eilimint tagartha. Le haghaidh tuilleadh eolais féach ar dhoiciméid smeach Popper.js .
teorainn	teaghrán \| eilimint	'scrollParent'	Teorainn shrianta thar maoil an roghchláir anuas. Glacann sé le luachanna `'viewport'`, `'window'`, `'scrollParent'`, nó tagairt HTMLElement (JavaScript amháin). Le haghaidh tuilleadh faisnéise déan tagairt do dhoiciméid preventOverflow Popper.js .
tagairt	teaghrán \| eilimint	'scoránaigh'	Gné thagartha den roghchlár anuas. Glacann sé le luachanna `'toggle'`, `'parent'`, nó tagairt HTMLElement. Le haghaidh tuilleadh faisnéise déan tagairt do dhoiciméid tagarthaObject Popper.js .
taispeáint	teaghrán	'dinimiciúil'	De réir réamhshocraithe, úsáidimid Popper.js le haghaidh suíomh dinimiciúil. Díchumasaigh é seo le `static`.

Tabhair faoi deara nuair boundarya shocraítear ar aon luach seachas 'scrollParent', cuirtear an stíl position: statici bhfeidhm ar an .dropdowngcoimeádán.

Modhanna

Modh	Cur síos
`$().dropdown('toggle')`	Scoránaigh an roghchlár anuas de bharra nascleanúna nó nascleanúna cluaisíní tugtha.
`$().dropdown('update')`	Nuashonraítear suíomh anuas gné.
`$().dropdown('dispose')`	Scriosann sé anuas eilimint.

Imeachtaí

Déantar na himeachtaí anuas go léir a bhriseadh ag an .dropdown-menumáthaireilimint agus tá relatedTargetmaoin acu, arb é a luach an eilimint ancaire scoránaithe. hide.bs.dropdownagus hidden.bs.dropdowntá clickEventairí ag imeachtaí (ach amháin nuair is é an cineál imeachta bunaidh click) ina bhfuil Réad Imeachta don imeacht cliceáil.

Imeacht	Cur síos
`show.bs.dropdown`	Teann an teagmhas seo láithreach nuair a ghlaoitear an modh ásc taispeána.
`shown.bs.dropdown`	Tá an teagmhas seo bréan nuair a bheidh an anuas infheicthe ag an úsáideoir (fanacht le haghaidh aistrithe CSS, le cur i gcrích).
`hide.bs.dropdown`	Cuirtear an teagmhas seo ar ceal láithreach nuair a ghlaoitear an modh um shampla seithí.
`hidden.bs.dropdown`	Tá an teagmhas seo bréan nuair a bheidh an anuas críochnaithe a bheith i bhfolach ar an úsáideoir (fanacht le haghaidh aistrithe CSS, a chur i gcrích).

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

Droim anuas

Forbhreathnú

Inrochtaineacht

Samplaí

Cnaipe singil

Cnaipe Scoilte

Sizing

Treoracha

Buail isteach

Dropright

Drochleathach

Míreanna roghchláir

Gníomhach

Faoi mhíchumas

Ailíniú roghchlár

Ábhar an roghchláir

Ceanntásca

Roinnteoirí

Téacs

Foirmeacha

Úsáid

Trí tréithe sonraí

Trí JavaScript

`data-toggle="dropdown"`fós ag teastáil

Roghanna

Modhanna

Imeachtaí

Droim anuas

Forbhreathnú

Inrochtaineacht

Samplaí

Cnaipe singil

Cnaipe Scoilte

Sizing

Treoracha

Buail isteach

Dropright

Drochleathach

Míreanna roghchláir

Gníomhach

Faoi mhíchumas

Ailíniú roghchlár

Ábhar an roghchláir

Ceanntásca

Ceanntásc anuas

Roinnteoirí

Téacs

Foirmeacha

Roghanna anuas

Úsáid

Trí tréithe sonraí

Trí JavaScript

data-toggle="dropdown"fós ag teastáil

Roghanna

Modhanna

Imeachtaí

`data-toggle="dropdown"`fós ag teastáil