Cwympiadau

Toglo troshaenau cyd-destunol ar gyfer arddangos rhestrau o ddolenni a mwy gyda'r gwymplen Bootstrap.

Trosolwg

Mae cwymplenni yn droshaenau cyd-destunol y gellir eu toglo ar gyfer arddangos rhestrau o ddolenni a mwy. Fe'u gwneir yn rhyngweithiol gyda'r ategyn JavaScript cwymplen Bootstrap sydd wedi'i gynnwys. Cânt eu toglo trwy glicio, nid trwy hofran; penderfyniad dylunio bwriadol yw hwn .

Mae dropdowns wedi'u hadeiladu ar lyfrgell trydydd parti, Popper.js , sy'n darparu lleoliad deinamig a chanfod golygfannau. Gwnewch yn siŵr eich bod yn cynnwys popper.min.js cyn JavaScript Bootstrap neu defnyddiwch bootstrap.bundle.min.js/ bootstrap.bundle.jssy'n cynnwys Popper.js. Nid yw Popper.js yn cael ei ddefnyddio i osod cwymplenni mewn barrau llywio gan nad oes angen lleoli dynamig.

Os ydych chi'n adeiladu ein JavaScript o'r ffynhonnell, mae angenutil.js .

Hygyrchedd

Mae safon WAI ARIA yn diffinio role="menu"teclyn gwirioneddol , ond mae hyn yn benodol i fwydlenni tebyg i gymhwysiad sy'n sbarduno gweithredoedd neu swyddogaethau. Gall bwydlenni ARIA gynnwys eitemau dewislen yn unig, eitemau dewislen blwch ticio, eitemau dewislen botwm radio, grwpiau botwm radio, ac is-ddewislenni.

Ar y llaw arall, mae cwymplenni Bootstrap wedi'u cynllunio i fod yn generig ac yn berthnasol i amrywiaeth o sefyllfaoedd a strwythurau marcio. Er enghraifft, mae'n bosibl creu cwymplenni sy'n cynnwys mewnbynnau ychwanegol a rheolyddion ffurflen, megis meysydd chwilio neu ffurflenni mewngofnodi. Am y rheswm hwn, nid yw Bootstrap yn disgwyl (nac yn ychwanegu'n awtomatig) unrhyw un o'r nodweddion rolea'r aria-priodoleddau sydd eu hangen ar gyfer gwir fwydlenni ARIA . Bydd yn rhaid i awduron gynnwys y nodweddion mwy penodol hyn eu hunain.

Fodd bynnag, mae Bootstrap yn ychwanegu cefnogaeth adeiledig ar gyfer y rhan fwyaf o ryngweithiadau dewislen bysellfwrdd safonol, megis y gallu i symud trwy .dropdown-itemelfennau unigol gan ddefnyddio'r bysellau cyrchwr a chau'r ddewislen gyda'r ESCallwedd.

Enghreifftiau

Lapiwch dogl y gwymplen (eich botwm neu ddolen) a'r gwymplen o fewn .dropdown, neu elfen arall sy'n datgan position: relative;. Gall cwympiadau gael eu sbarduno o <a>neu <button>elfennau i gyd-fynd yn well â'ch anghenion posibl.

Botwm sengl

Gellir troi unrhyw sengl .btnyn dogl cwymplen gyda rhai newidiadau marcio. Dyma sut y gallwch chi eu rhoi ar waith gyda'r naill <button>elfen neu'r llall:

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

A chydag <a>elfennau:

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

Y rhan orau yw y gallwch chi wneud hyn gydag unrhyw amrywiad botwm hefyd:

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

Botwm hollti

Yn yr un modd, crëwch gwymplenni botwm hollt gyda bron yr un marcio i fyny â'r cwymplenni botwm sengl, ond gan ychwanegu .dropdown-toggle-splitbylchau priodol o amgylch y cwymplen.

Rydym yn defnyddio'r dosbarth ychwanegol hwn i leihau'r llorweddol paddingar y naill ochr a'r llall i'r caret 25% a chael gwared ar yr margin-leftun sy'n cael ei ychwanegu ar gyfer cwympiadau botwm rheolaidd. Mae'r newidiadau ychwanegol hynny yn cadw'r caret wedi'i ganoli yn y botwm hollti ac yn darparu ardal daro o faint mwy priodol wrth ymyl y prif botwm.

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

Maintioli

Mae cwymplenni botwm yn gweithio gyda botymau o bob maint, gan gynnwys botymau cwymplen rhagosodedig a hollt.

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

Cyfarwyddiadau

Dropup

Sbardun cwymplenni uwchben elfennau trwy ychwanegu .dropupat y rhiant elfen.

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

Sbardun dewislenni ar ochr dde'r elfennau drwy ychwanegu .droprightat y rhiant elfen.

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

Defnyn

Sbardun dewislenni ar ochr chwith yr elfennau drwy ychwanegu .dropleftat y rhiant elfen.

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

Yn hanesyddol roedd yn rhaid i gynnwys y gwymplen fod yn ddolenni, ond nid yw hynny'n wir bellach gyda v4. Nawr gallwch chi ddefnyddio <button>elfennau yn eich cwymplenni yn ddewisol yn lle dim ond <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>

Gallwch hefyd greu eitemau cwymplen nad ydynt yn rhyngweithiol gyda .dropdown-item-text. Mae croeso i chi steilio ymhellach gyda CSS personol neu gyfleustodau testun.

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

Actif

Ychwanegu .activeat eitemau yn y gwymplen i'w steilio fel rhai gweithredol .

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

Anabl

Ychwanegu .disabledat eitemau yn y gwymplen i'w steilio fel rhai anabl .

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

Yn ddiofyn, mae cwymplen yn cael ei gosod yn awtomatig 100% o'r brig ac ar hyd ochr chwith ei riant. Ychwanegu .dropdown-menu-rightat a .dropdown-menui'r dde alinio'r ddewislen.

Pennau i fyny! Mae cwymplenni wedi'u lleoli diolch i Popper.js (ac eithrio pan fyddant wedi'u cynnwys mewn bar llywio).

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

Penawdau

Ychwanegwch bennyn i labelu adrannau o gamau gweithredu mewn unrhyw gwymplen.

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

Rhanwyr

Gwahanwch grwpiau o eitemau bwydlen cysylltiedig gyda rhannwr.

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

Testun

Rhowch unrhyw destun rhydd mewn cwymplen gyda thestun a defnyddiwch gyfleustodau bylchu . Sylwch ei bod yn debygol y bydd angen arddulliau maint ychwanegol arnoch i gyfyngu ar lled y ddewislen.

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

Ffurflenni

Rhowch ffurflen o fewn cwymplen, neu gwnewch hi mewn cwymplen, a defnyddiwch gyfleustodau ymyl neu badin i roi'r gofod negyddol sydd ei angen arnoch.

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

Defnyddiwch data-offsetneu data-referencei newid lleoliad y gwymplen.

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

Defnydd

Trwy briodoleddau data neu JavaScript, mae'r ategyn cwymplen yn toglo cynnwys cudd (cwymplenni) trwy doglo'r .showdosbarth ar yr eitem rhestr rhieni. Dibynnir ar y data-toggle="dropdown"priodoledd ar gyfer cau dewislenni ar lefel cais, felly mae'n syniad da ei ddefnyddio bob amser.

Ar ddyfeisiau cyffyrddiad, mae agor cwymplen yn ychwanegu trinwyr gwag ( $.noop) mouseoverat blant uniongyrchol yr <body>elfen. Mae'r darnia hyll hwn yn angenrheidiol i weithio o amgylch quirk yn dirprwyo digwyddiad iOS , a fyddai fel arall yn atal tap yn unrhyw le y tu allan i'r gwymplen rhag sbarduno'r cod sy'n cau'r gwymplen. Unwaith y bydd y gwymplen wedi'i chau, caiff y mouseovertrinwyr gwag ychwanegol hyn eu dileu.

Trwy briodoleddau data

Ychwanegu data-toggle="dropdown"at ddolen neu fotwm i doglo cwymplen.

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

Trwy JavaScript

Ffoniwch y cwymplenni trwy JavaScript:

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

`data-toggle="dropdown"`dal yn ofynnol

Ni waeth a ydych chi'n ffonio'ch cwymplen trwy JavaScript neu yn lle hynny'n defnyddio'r data-api, data-toggle="dropdown"mae'n ofynnol bob amser i fod yn bresennol ar elfen sbardun y gwymplen.

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-offset="".

Enw	Math	Diofyn	Disgrifiad
gwrthbwyso	rhif \| llinyn \| swyddogaeth	0	Gwrthbwyso'r gwymplen o'i gymharu â'i darged. Am ragor o wybodaeth cyfeiriwch at ddogfennau gwrthbwyso Popper.js .
fflip	boolaidd	gwir	Caniatáu i Dropdown fflipio rhag ofn y bydd yr elfen gyfeirio yn gorgyffwrdd. Am ragor o wybodaeth cyfeiriwch at ddogfennau fflip Popper.js .
ffin	llinyn \| elfen	'Sgrolio Rhiant'	Ffin cyfyngiad gorlif y gwymplen. Yn derbyn gwerthoedd `'viewport'`, `'window'`, `'scrollParent'`, neu gyfeirnod HTMLElement (JavaScript yn unig). I gael rhagor o wybodaeth, cyfeiriwch at ddogfennau preventOverflow Popper.js .
cyfeiriad	llinyn \| elfen	'toglo'	Elfen gyfeirio o'r gwymplen. Yn derbyn gwerthoedd `'toggle'`, `'parent'`, neu gyfeirnod Elfen HTML. I gael rhagor o wybodaeth, cyfeiriwch at ddogfennau cyfeirioObject Popper.js .
arddangos	llinyn	'deinamig'	Yn ddiofyn, rydym yn defnyddio Popper.js ar gyfer lleoli deinamig. Analluoga hwn gyda `static`.

Sylwch pryd boundaryy caiff ei osod i unrhyw werth heblaw 'scrollParent', mae'r arddull position: staticyn cael ei gymhwyso i'r .dropdowncynhwysydd.

Dulliau

Dull	Disgrifiad
`$().dropdown('toggle')`	Toglo'r gwymplen o far llywio penodol neu dabl llywio.
`$().dropdown('update')`	Yn diweddaru lleoliad cwymplen elfen.
`$().dropdown('dispose')`	Yn dinistrio cwymplen elfen.

Digwyddiadau

Mae pob digwyddiad cwymplen yn cael ei danio at y .dropdown-menurhiant elfen ac mae ganddynt relatedTargeteiddo, y mae ei werth yn elfen angor toggling. hide.bs.dropdownac hidden.bs.dropdownmae gan ddigwyddiadau clickEventbriodwedd (dim ond pan fydd y math digwyddiad gwreiddiol yn click) sy'n cynnwys Gwrthrych Digwyddiad ar gyfer y digwyddiad clicio.

Digwyddiad	Disgrifiad
`show.bs.dropdown`	Mae'r digwyddiad hwn yn tanio ar unwaith pan elwir y dull enghraifft sioe.
`shown.bs.dropdown`	Mae'r digwyddiad hwn yn cael ei danio pan fydd y cwymplen wedi'i gwneud yn weladwy i'r defnyddiwr (bydd yn aros am drawsnewidiadau CSS, i'w cwblhau).
`hide.bs.dropdown`	Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y dull cuddfan wedi'i alw.
`hidden.bs.dropdown`	Mae'r digwyddiad hwn yn cael ei danio pan fydd y gwymplen wedi gorffen cael ei chuddio rhag y defnyddiwr (bydd yn aros am drawsnewidiadau CSS, i'w cwblhau).

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

Cwympiadau

Trosolwg

Hygyrchedd

Enghreifftiau

Botwm sengl

Botwm hollti

Maintioli

Cyfarwyddiadau

Dropup

Dropright

Defnyn

Eitemau ar y ddewislen

Actif

Anabl

Aliniad dewislen

Cynnwys y ddewislen

Penawdau

Rhanwyr

Testun

Ffurflenni

Defnydd

Trwy briodoleddau data

Trwy JavaScript

`data-toggle="dropdown"`dal yn ofynnol

Opsiynau

Dulliau

Digwyddiadau

Cwympiadau

Trosolwg

Hygyrchedd

Enghreifftiau

Botwm sengl

Botwm hollti

Maintioli

Cyfarwyddiadau

Dropup

Dropright

Defnyn

Eitemau ar y ddewislen

Actif

Anabl

Aliniad dewislen

Cynnwys y ddewislen

Penawdau

Pennawd cwymplen

Rhanwyr

Testun

Ffurflenni

Opsiynau cwymplen

Defnydd

Trwy briodoleddau data

Trwy JavaScript

data-toggle="dropdown"dal yn ofynnol

Opsiynau

Dulliau

Digwyddiadau

`data-toggle="dropdown"`dal yn ofynnol