Interacciones nisqakuna

Utilidad clasekuna imayna ruwaqkuna huk web kitipi contenidokunawan tinkinku chayta tikranku.

Qillqa akllay

Imayna ruwana akllasqa kaqta tikray mayk'aq llamk'achiq chaywan tinkin.

Kay parrafoqa tukuyninpi akllasqa kanqa, llamk'achiq ñit'iptin.

Kay parrafoqa ñawpaqmanta akllay ruwayniyuqmi.

Kay parrafoqa manam akllanapaqchu kanqa, llamk'achiq ñit'iptin.

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

Puntero sucesokuna

Bootstrap qun .pe-nonechaymanta .pe-autoclasekuna elemento tinkiykuna harkananpaq utaq yapananpaq.

Kay t'inkitaqa manam ñit'iyta atikunmanchu.

Kay t'inkitaqa ñit'iy atikunmi (kayqa ñawpaqmanta ruwasqa ruwaymi).

Kay t'inkiqa manam ñit'iyta atikunmanchu, chay pointer-eventspropiedad tayta-mamanmanta herenciayuq kasqanrayku. Ichaqa kay t’inkiqa huk pe-autoclaseyuqmi, chaymi ñit’iy atikun.

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

.pe-noneClase (hinallataq CSS pointer-eventspropiedad churasqa) huk rikuchiqwan (sillu, qillqana, llamiy) tinkiykunallata hark'an. T'inkikuna chaymanta kamachiykuna kaqwan .pe-nonekanku, ñawpaqmanta, hinallataq teclado ruwaqkunapaq enfocables chaymanta ruwanapaq. Aswan allinta neutralizasqa kasqankuta teclado ruwaqkunapaqpas, aswan atributokuna yapanayki kanman kayhina tabindex="-1"(mana teclado enfoqueta chaskinankupaq) chaymanta aria-disabled="true"(yanapakuq tecnologiakunaman chiqamanta allinta mana llamk'achisqa kasqankuta chayachinapaq), chaymanta JavaScript llamk'achiyta atikunkiman tukuyninpi hark’anku mana ruway atiy kanankupaq.

Atikuqtinqa aswan sasa allichayqa kaymi:

Formulario kamachiykunapaq, disabledHTML laya yapay.

T'inkikunapaq, laya kaqta hurquy href, mana tinkisqa ancla icha tiyaq t'inki kananpaq.

Sass

API de Utilidades nisqa

Interacción yanapakuykuna yanapakuyniyku API kaqpi willasqa kachkanku scss/_utilities.scss. Yachay imayna ruwanakuna API llamk'achiyta.

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),