Urmachiykuna

Contextual llanthukunata tikray t'inkikuna listakuna rikuchinapaq chaymanta aswan Bootstrap urayk'aq plugin kaqwan.

Hatun qhawariy

Urmachiykuna tikranapaq kanku, contextual llanthukuna t'inkikuna listakuna rikuchinapaq chaymanta aswan. Paykunaqa ruwasqa kanku interactivo kaqwan chaymanta Bootstrap urayk'aq JavaScript plugin kaqwan. Paykunaqa ñit’ispa t’ikrakunku, manataq kuyurichispachu; kayqa huk decisión intencional de diseño nisqa.

Urmachiykuna huk kimsa kaq biblioteca kaqpi ruwasqa kanku, Popper.js , mayqinchus kallpasapa churayta chaymanta qhaway punku tariyta qun. Aswan allinta popper.min.js kaqmanta churay manaraq Bootstrap JavaScript kaqmanta utaq bootstrap.bundle.min.js/ llamk'achiy bootstrap.bundle.jsmayqinchus Popper.js kaqta hap'in. Popper.js mana llamk'achkanchu urquykunata navbars kaqpi churanapaq ichaqa imaynachus dinamico churay mana mañasqachu.

Sichus JavaScriptniykumanta pukyuta ruwachkanki, chayta munanutil.js .

Accesibilidad nisqa

WAI ARIA kamachiy huk chiqa widget kaqmanta riqsichin , ichaqa kayqa ruwana-hina menúkuna ruwanapaq específico kaq mayqinkunachus ruwaykunata utaq ruwanakunata llamk'achinku. ARIA menúkuna menú elementokuna, cuadro de comprobación menú elementokuna, radio botón menú elementokuna, radio botón qutukuna chaymanta huch'uy menúkunalla kanman.role="menu"

Bootstrap kaqpa uraykachiyninkuna, wak ladumanta, ruwasqa kanku genérico kanankupaq chaymanta imaymana situacionkunaman chaymanta marka estructurakunaman ruwanapaq. Ejemplopaq, atikunmi ruwayta urayk'aqkuna mayqinkunachus yapa yaykuykunayuq chaymanta formulario kamachiykunayuq, maskana pampakuna utaq yaykuy formulariokuna hina. Kayrayku, Bootstrap mana suyanchu (nitaq kikinmanta yapanchu) mayqin rolechaymanta aria-atributokuna chiqa ARIA menúkunapaq mañasqa. Qillqaqkuna kikinku kay aswan específico atributokunata churananku kanqa.

Ichaqa, Bootstrap ruwasqa yanapakuyta yapan aswan estándar teclado menú tinkiykuna kaqpaq, kayhina sapalla .dropdown-itemelementokuna kuyuy atiy kay cursor llavekuna llamk'achispa chaymanta menú ESCllavewan wichq'ay.

Ejemplos

Uraykaqpa tikrayninta (botonniyki utaq t'inkiyki) chaymanta urayk'aq menú ukhupi .dropdown, utaq huk elemento willaq position: relative;. Dropdowns kaqmanta <a>utaq <button>elementokunamanta llamk'achisqa kanman aswan allinta tupananpaq atikuq necesidadniykiman.

Huklla botón

Ima .btnsapallapas huk urayk'aq tikrayman tikray atikun wakin marka tikraykunawan. Kaypi imaynatachus mayqin <button>elementokunawanpas llamk'achiyta atinki:

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

Y con <a>elementos:

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

Aswan allin kaqninqa kayta ruwayta atinki mayqin botón variante kaqwanpas, chaymanta:

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

Botón rakiy

Kikillantataq, rakisqa botón urayk'aqkunata ruway yaqa kikin markawan huklla botón urayk'aqkunawan, ichaqa yapasqawan .dropdown-toggle-splitallin espaciamientopaq urayk'aq caret muyuriqpi.

Kay yapasqa claseta llamk'achiyku horizontalta paddingiskaynin lado caret kaqpi 25% pisiyachinaykupaq chaymanta chaymanta chay margin-leftyapasqa sapa kuti botón urayk'achiqkunapaq hurquyku. Chay yapasqa tikraykunaqa caretta rakisqa botón kaqpi chawpichasqata waqaychanku chaymanta huk aswan allin sayayniyuq tupachiy áreata qun hatun botón kaqpa ladunpi.

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

Tamaño

Botón urayk'achiqkuna tukuy sayayniyuq botones kaqwan llamk'anku, ñawpaqmanta chaymanta rakisqa urayk'aq botones kaqwan.

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

Direcciones

Dropup

Tayta elementoman yapaspa elementokuna hawapi urayk'aq menúkunata .dropupllamk'achiy.

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

Derecho de gota

Tayta elementoman yapaspa elementokunap paña larunpi urayk'aq menúkunata llamk'achiy .dropright.

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

Gota

Tayta elementoman yapaspa elementokunap lluq'inpi urayk'aq menúkunata llamk'achiy .dropleft.

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

Históricamente urayk'aq menú contenidokuna t'inkikuna kanan karqan , ichaqa manaña chayhinachu v4 kaqwan. Kunanqa akllanamanta elementokunata llamk'achiyta atinki urayk'achiyniykikunapi s <button>nisqallamanta ranti .<a>

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

Mana tinkisqa urayk'achiqkunatapas ruwayta atinki .dropdown-item-text. Mana manchakuspa aswan estilo ruwaypaq ruwasqa CSS utaq qillqa yanapakuykunawan.

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

Kawsaq

.activeUraykachiypi kaq imakunaman yapay ruwasqa hina estilochanaykipaq .

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

Wañuchisqa

Mana atisqa hina estilochanaykipaq.disabled urayk'achiqpi kaq imakunaman yapay .

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

Ñawpaqmanta, huk urayk'aq menú kikinmanta churasqa 100% patamanta chaymanta tayta-mamanpa paña ladonpi. Hukman yapay .dropdown-menu-rightpañaman .dropdown-menuurayk’aq menú nisqapi chiqanchay.

¡Umakuna wichayman! Dropdowns Popper.js kaqman gracias nispa churasqa kanku (salvo mayk'aq huk navbar kaqpi tarikunku).

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

Umakuna

Ima urayk'aq menú kaqpipas ruwanakuna t'aqakunata etiquetananpaq huk umalliqta yapay.

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

Rakiqkuna

Huk rakiqwan tupaq menú nisqapi kaq huñukunata t'aqay.

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

Qillqa

Ima mana qullqiyuq qillqatapas huk urayk'aq menú ukhupi qillqawan churay chaymanta espaciamiento yanapakuykunata llamk'achiy . Reparay, yaqapaschá huk hatun sayay estilokunata necesitanki menú anchota hark'anaykipaq.

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

Formas

Huk formulariota huk urayk'aq menú ukhupi churay, utaq huk urayk'aq menú kaqman ruway, chaymanta margen utaq relleno yanapakuykunata llamk'achiy mana allin espaciota qunaykipaq munasqaykita.

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

Chayta servichikuy data-offsetmaypi data-referencekasqanmanta cambianaykipaq.

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

Uso

Willay atributokuna utaq JavaScript kaqnintakama, urayk'aq plugin pakasqa willayta (urquq menúkuna) tikran .showtayta lista kaqpi claseta tikraspa. Atributo data-toggle="dropdown"huk ruwana patapi urayk'aq menúkuna wichq'anapaq hapipakun, chayrayku allin yuyay sapa kuti llamk'achinapaq.

Llachpanapaq atichisqa dispositivokunapi, huk urayk'achiq kichayqa ch'usaq ( $.noop) hap'iqkuna elementopa mouseoverchaylla wawankunaman yapan. <body>Kay admitisqa millay hack necesario llamk'anapaq muyuriqpi huk quirk kaqpi iOS' evento delegación , mayqinchus wakhina hark'anman huk grifo maypipas hawa urayk'aqmanta kay código llamk'achiyta chaymanta chay urayk'ayta wichq'an. Huk kuti urayk'achiq wichq'asqa kaqtin, kay yapasqa ch'usaq mouseoverhap'iqkuna hurqusqa kanku.

Atributos de datos nisqawan

data-toggle="dropdown"Huk t'inkiman utaq ñit'inaman yapay huk urayk'achiqta tikranaykipaq.

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

JavaScript nisqawan

JavaScript nisqawan urayk'achiqkunata waqyay:

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

`data-toggle="dropdown"`kunankamapas mañasqaraqmi kachkan

Imayna kaptinpas sichus JavaScript kaqnintakama urayk'achisqayki waqyanki utaq aswanpas data-api kaqwan llamk'achkanki, data-toggle="dropdown"sapa kuti urayk'aqpa elemento desencadenante kaqpi kanan tiyan.

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-offset="".

Suti	Niraq	Ñawpaqchasqa	Willay
offset nisqa	yupay \| q'aytu \| ruway	0.	Desplazamiento de la desplegable relativo a su meta. Aswan willakuypaq qhaway Popper.js kaqpa offset docs .
kuyuchiy	boolean nisqa	chiqaq	Permitir Dropdown flip en caso de un superposición en el elemento de referencia. Aswan willakuypaq qhaway Popper.js kaqpa flip docs .
frontera	q'aytu \| imakuna	'scrollParent' nisqa.	Desbordamiento hark'ay frontera urayk'aq menú kaqmanta. `'viewport'`, `'window'`, `'scrollParent'`, icha HTMLElement willaypa chanikunata chaskikun (JavaScriptlla). Aswan willakuypaq qhaway Popper.js kaqpa preventOverflow qillqakuna .
willakuy	q'aytu \| imakuna	'toggle' nisqa.	Elemento de referencia del menú desplegable nisqamanta. `'toggle'`, `'parent'`, icha HTMLElement nisqap chanikunata chaskikun . Aswan willakuypaq qhaway Popper.js kaqpa referenceObject qillqakuna .
qawachiy	qaytu	'dinámico' nisqa.	Ñawpaqmanta, Popper.js llamk'achiyku dinamico churaypaq. Kayta mana llamk'achiychu `static`.

Reparay mayk'aq boundaryhuk chaniman churasqa kachkan mana 'scrollParent', estiloqa waqaychanaman position: staticchurasqa .dropdown.

Métodos

Imayna	Willay
`$().dropdown('toggle')`	Huk qusqa navbar utaq tablayuq puriypa urayk'aq menú kaqninta tikran.
`$().dropdown('update')`	Huk elementopa urayk'achiqpa maypi kayninta musuqchan.
`$().dropdown('dispose')`	Huk elementopa uraykamuyninta chinkachin.

Eventos nisqakuna

Llapan urayk'aq ruwaykuna 's tayta elemento kaqpi rawrasqa .dropdown-menuchaymanta huk relatedTargetpropiedadniyuq, mayqinpa chaninmi toggling ancla elemento. hide.bs.dropdownchaymanta hidden.bs.dropdownruwaykuna huk clickEventpropiedadniyuq kanku (ñawpaq ruway laya kaqtinlla click) mayqinchus huk Sucedimiento Objeto ñit'iy ruwaypaq hap'in.

Ruwana	Willay
`show.bs.dropdown`	Kay ruwayqa chaylla rawrarin mayk'aq rikuchiy instancia método waqyasqa.
`shown.bs.dropdown`	Kay ruwayqa llamk'achisqa kachkan mayk'aq urayk'achiq ruwaqman rikukuq ruwasqa (CSS tikraykunata suyanqa, tukusqa kananpaq).
`hide.bs.dropdown`	Kay ruwayqa chaylla llamk'achisqa kan mayk'aq pakay instancia ñan waqyasqa.
`hidden.bs.dropdown`	Kay ruwayqa llamk'achisqa kanqa mayk'aq urayk'achiq llamk'achiqmanta pakasqa kayta tukusqa (CSS tikraykunata suyanqa, tukusqa kananpaq).

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

Urmachiykuna

Hatun qhawariy

Accesibilidad nisqa

Ejemplos

Huklla botón

Botón rakiy

Tamaño

Direcciones

Dropup

Derecho de gota

Gota

Artículos de menú

Kawsaq

Wañuchisqa

Menú nisqa chiqanchay

Contenido del menú

Umakuna

Rakiqkuna

Qillqa

Formas

Uso

Atributos de datos nisqawan

JavaScript nisqawan

`data-toggle="dropdown"`kunankamapas mañasqaraqmi kachkan

Akllanakuna

Métodos

Eventos nisqakuna

Urmachiykuna

Hatun qhawariy

Accesibilidad nisqa

Ejemplos

Huklla botón

Botón rakiy

Tamaño

Direcciones

Dropup

Derecho de gota

Gota

Artículos de menú

Kawsaq

Wañuchisqa

Menú nisqa chiqanchay

Contenido del menú

Umakuna

Uraykaq umalliq

Rakiqkuna

Qillqa

Formas

Uraykaq akllanakuna

Uso

Atributos de datos nisqawan

JavaScript nisqawan

data-toggle="dropdown"kunankamapas mañasqaraqmi kachkan

Akllanakuna

Métodos

Eventos nisqakuna

`data-toggle="dropdown"`kunankamapas mañasqaraqmi kachkan