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.

Íosluchtaigh cnaipe anuas amháin

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

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>

Scoilt anuas na cnaipí

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>

Athrú dropup

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>

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

Athrú dropleft

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>

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>

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>

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>

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>

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>

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>

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

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.

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í

Íosluchtaigh cnaipe anuas amháin

Scoilt anuas na cnaipí

Sizing

Athrú dropup

Athrú dropright

Athrú dropleft

Míreanna roghchláir

Ailíniú roghchlár

Ceanntásca roghchláir

Roinneoirí roghchláir

Foirmeacha roghchláir

Míreanna roghchlár gníomhacha

Míreanna roghchláir díchumasaithe

Úsáid

Trí tréithe sonraí

Trí JavaScript

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

Roghanna

Modhanna

Imeachtaí

Droim anuas

Forbhreathnú

Inrochtaineacht

Samplaí

Íosluchtaigh cnaipe anuas amháin

Scoilt anuas na cnaipí

Sizing

Athrú dropup

Athrú dropright

Athrú dropleft

Míreanna roghchláir

Ailíniú roghchlár

Ceanntásca roghchláir

Ceanntásc anuas

Roinneoirí roghchláir

Foirmeacha roghchláir

Míreanna roghchlár gníomhacha

Míreanna roghchláir díchumasaithe

Ú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