Source

Whakataka

Takahurihia nga whakakikorua horopaki mo te whakaatu i nga rarangi hononga me te maha atu me te Bootstrap takaiho monomai.

Tirohanga

Ka takahurihia nga whakahekenga, he whakakikorua horopaki mo te whakaatu i nga rarangi hononga me etahi atu. He mea tauwhitiwhiti me te whakauru Bootstrap takaiho mono JavaScript. Ka takahurihia ma te panui, kaua ma te whakaparo; he whakatau hoahoa tenei.

Ka hangaia nga whakahekenga ki runga i te whare pukapuka tuatoru, Popper.js , e whakarato ana i te tuunga hihiri me te tirohanga tirohanga. Kia mahara ki te whakauru i te popper.min.js i mua i te JavaScript a Bootstrap me te whakamahi bootstrap.bundle.min.js/ bootstrap.bundle.jskei roto Popper.js. Kare a Popper.js e whakamahia ana ki te tuu i nga takaiho i roto i nga pae whakatere ahakoa kaore e hiahiatia te tuunga hihiri.

Mena kei te hanga koe i to maatau JavaScript mai i te puna, meutil.js .

Te urunga

Ko te paerewa WAI ARIA role="menu" e tautuhi ana i tetahi widget tuuturu , engari he mea motuhake tenei ki nga tahua-a-tono e whakaohooho ana i nga mahi, i nga mahi ranei. Ka taea e nga tahua ARIA anake te whakauru i nga taonga tahua, nga taonga tahua pouakataki, nga taonga tahua patene reo irirangi, nga roopu paatene reo irirangi, me nga tahua-iti.

Ko nga whakahekenga a Bootstrap, i tetahi atu taha, he mea hoahoa kia whanui me te whai waahi ki nga momo ahuatanga me nga hanganga tohu. Hei tauira, ka taea te hanga i nga takaiho kei roto etahi atu whakaurunga me nga mana puka, penei i nga mara rapu me nga puka takiuru. Mo konei, kaore a Bootstrap e tatari (kaore ano e taapiri aunoa) tetahi o nga roleme nga aria-huanga e hiahiatia ana mo nga tahua ARIA pono. Me whakauru e nga kaituhi enei huanga ake ake.

Heoi, ka taapirihia e Bootstrap te tautoko i hangaia mo te nuinga o nga taunekeneke tahua papapātuhi paerewa, penei i te kaha ki te neke i roto i nga .dropdown-itemhuānga takitahi ma te whakamahi i nga kii pehu me te kati i te tahua me te ESCki.

Tauira

Takaia te takahuri o te takaiho (to patene, hono ranei) me te tahua takaiho ki roto .dropdown, tetahi atu huānga ranei e whakaatu ana position: relative;. Ka taea te whakaheke mai i nga huānga <a>ranei <button>kia pai ake ai to hiahia.

Patene kotahi

Ka .btntaea te huri ki te takahuri takahuri me etahi huringa tohu. Anei me pehea e taea ai e koe te mahi me nga <button>huānga e rua:

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

Me nga <a>huānga:

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

Ko te waahanga pai rawa atu ka taea e koe te mahi i tenei me nga momo paatene, ano:

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

Pātene wehe

Waihoki, hangahia nga takahanga patene ritua me te tohu rite tonu ki nga takahanga paatene kotahi, engari me te .dropdown-toggle-splittaapiri mo te mokowā tika huri noa i te kaata takaiho.

Ka whakamahia e matou tenei karaehe taapiri hei whakaiti i te whakapae paddingi tetahi taha o te kareti ma te 25% me te tango margin-lefti te taapiri mo te whakaheke i nga paatene. Ko enei huringa taapiri ka noho tonu te tiaki ki roto i te paatene wehe me te whakarato i te waahanga tika ake i te taha o te paatene matua.

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

Te rahinga

Ka mahi nga patene takaiho me nga paatene o nga rahi katoa, tae atu ki nga paatene takaiho taunoa me te wehea.

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

Nga tohutohu

Whakataka

Keu i nga tahua takaiho ki runga ake ma te taapiri atu .dropupki te huānga matua.

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

Whakataka

Keu i nga tahua takaiho kei te taha matau o nga huānga ma te taapiri atu .droprightki te huānga matua.

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

Mauī

Keu i nga tahua takaiho kei te taha maui o nga huānga ma te taapiri atu .dropleftki te huānga matua.

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

I nga wa o mua ko nga ihirangi tahua takaiho me hono, engari kua kore e pera me te v4. Inaianei ka taea e koe te whakamahi i <button>nga huānga i roto i o takaiho hei utu <a>s noa.

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

Ka taea hoki e koe te hanga i nga mea taka-iho-kore me te .dropdown-item-text. Kaua e pai ki te hanga taapiri me te CSS ritenga me nga taputapu tuhinga.

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

Hohe

Tāpirihia .activeki ngā tūemi kei te takaiho hei kāhua hei hohe .

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

Kua haua

Tāpirihia .disabledki ngā tūemi kei roto i te takaiho hei kāhua hei monokia .

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

Ma te taunoa, ka tuu aunoa he tahua takaiho 100% mai i runga me te taha maui o tona matua. Tāpirihia .dropdown-menu-rightki te .dropdown-menutaha matau tiaarohia te tahua takaiho.

Mahunga ake! Whakatakotohia te tuunga he mihi ki a Popper.js (haunga ina kei roto i te pae whakatere).

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

Pane

Tāpirihia he pane hei tapanga i nga waahanga o nga hohenga ki tetahi tahua takaiho.

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

Kaiwehewehe

Whakawehea nga roopu o nga mea tahua e pa ana ki te wehewehe.

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

Kuputuhi

Whakanohoia nga kupu tuhi noa ki roto i te tahua takaiho me nga tuhinga me te whakamahi i nga taputapu mokowhiti . Kia mahara ka hiahia koe ki etahi atu momo rahi hei aukati i te whanui tahua.

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

Puka

Hoatu he puka ki roto i te tahua takaiho, waiho ranei ki roto i te tahua takaiho, ka whakamahi i te tawhē, i nga taputapu padding ranei hei hoatu i te waahi kino e hiahia ana koe.

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

Whakamahia data-offset, data-referencehei huri ranei i te waahi o te takaiho.

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

Whakamahinga

Ma nga huanga raraunga, JavaScript ranei, ka takahurihia e te mono takaiho nga ihirangi huna (nga tahua takaiho) ma te takahuri i te .showkaraehe ki te rarangi matua. Ka whakawhirinakihia te data-toggle="dropdown"huanga mo te kati i nga tahua takaiho i te taumata tono, no reira he pai ki te whakamahi i nga wa katoa.

I runga i nga taputapu pa-whakahohe, te whakatuwhera i te takaiho ka taapirihia nga kaikawe ( $.noop) putua mouseoverki nga tamariki tonu o te <body>huānga. Ko tenei hack tino kino he mea tika ki te mahi i tetahi quirk i roto i te roopu huihuinga a iOS , ka kore e taea te paopao ki tetahi wahi i waho o te maturuturunga iho mai i te whakaoho i te waehere ka kati i te takaiho. Kia katia te takaiho, ka mouseovertangohia enei kaikawe putunga.

Ma nga huanga raraunga

Tāpirihia data-toggle="dropdown"ki tētahi hono, pātene rānei hei takahuri i te takaiho.

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

Ma te JavaScript

Karangatia nga takaiho ma te JavaScript:

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

`data-toggle="dropdown"`hiahiatia tonu

Ahakoa ka karanga koe i to takaiho ma te JavaScript, me whakamahi ranei i te raraunga-api, data-toggle="dropdown"me noho tonu koe ki te huānga whakaoho o te takaiho.

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-offset="".

Ingoa	Momo	Taunoa	Whakaahuatanga
whakatiki	tau \| aho \| mahi	0	Wehenga o te takaiho e pa ana ki tana whaainga. Mo etahi atu korero tirohia nga tuhinga a Popper.js .
takahuri	boolean	pono	Whakaaetia te Whakataka ki te huri i te mea kei te inaki te huānga tohutoro. Mo etahi atu korero tirohia nga tuhinga whakawhiti a Popper.js .
rohe	aho \| huānga	'scrollParent'	Te rohe herenga waipuke o te tahua takaiho. Ka whakaae ki nga uara o `'viewport'`, `'window'`, `'scrollParent'`, he tohutoro HTMLElement ranei (JavaScript anake). Mo etahi atu korero tirohia nga tuhinga a Popper.js preventOverflow .
tohutoro	aho \| huānga	'takahuri'	Huānga tohutoro o te tahua takaiho. Ka whakaae ki nga uara o `'toggle'`, `'parent'`, he tohutoro HTMLElement ranei. Mo etahi atu korero tirohia nga tuhinga a Popper.js referenceObject .
whakaatu	aho	'he hihiri'	Ma te taunoa, ka whakamahia e matou te Popper.js mo te tuunga hihiri. Monokia tenei ki te `static`.

Kia mahara ki te wa boundaryka tautuhia ki tetahi uara atu i 'scrollParent'te , ka tukuna te ahua position: staticki te .dropdownipu.

Nga tikanga

Tikanga	Whakaahuatanga
`$().dropdown('toggle')`	Ka takahuri i te tahua takaiho o te pae whakaterenga kua tohua, te whakatere ripa ranei.
`$().dropdown('update')`	He whakahōu i te tūnga o te takaiho o te huānga.
`$().dropdown('dispose')`	Ka whakakore i te takaiho o tetahi huānga.

Nga huihuinga

Ko nga takahanga taka-iho katoa ka panaia ki te .dropdown-menuhuānga matua o te me te whai relatedTargetrawa, ko tona uara ko te huānga punga takahuri. hide.bs.dropdownme hidden.bs.dropdownnga huihuinga he clickEventtaonga (anake ko te momo takahanga taketake click) kei roto he Ahanoa Takahanga mo te takahanga paato.

Takahanga	Whakaahuatanga
`show.bs.dropdown`	Ka pupuhi tonu tenei takahanga ina ka karangahia te aratuka tauira whakaatu.
`shown.bs.dropdown`	Ka pupuhihia tenei takahanga i te wa i kitea ai te takaiho ki te kaiwhakamahi (ka tatari mo nga whakawhitinga CSS, kia oti).
`hide.bs.dropdown`	Ka puhia tonutia tenei takahanga ina kua karangahia te aratuka huna.
`hidden.bs.dropdown`	Ka pupuhihia tenei kaupapa ka mutu te hunanga o te takaiho mai i te kaiwhakamahi (ka tatari mo nga whakawhitinga CSS, kia oti).

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

Whakataka

Tirohanga

Te urunga

Tauira

Patene kotahi

Pātene wehe

Te rahinga

Nga tohutohu

Whakataka

Whakataka

Mauī

Tuemi tahua

Hohe

Kua haua

Tirohanga tahua

Ihirangi tahua

Pane

Kaiwehewehe

Kuputuhi

Puka

Whakamahinga

Ma nga huanga raraunga

Ma te JavaScript

`data-toggle="dropdown"`hiahiatia tonu

Kōwhiringa

Nga tikanga

Nga huihuinga

Whakataka

Tirohanga

Te urunga

Tauira

Patene kotahi

Pātene wehe

Te rahinga

Nga tohutohu

Whakataka

Whakataka

Mauī

Tuemi tahua

Hohe

Kua haua

Tirohanga tahua

Ihirangi tahua

Pane

Pane takaiho

Kaiwehewehe

Kuputuhi

Puka

Kōwhiringa takaiho

Whakamahinga

Ma nga huanga raraunga

Ma te JavaScript

data-toggle="dropdown"hiahiatia tonu

Kōwhiringa

Nga tikanga

Nga huihuinga

`data-toggle="dropdown"`hiahiatia tonu