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-none
chaymanta .pe-auto
clasekuna 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-events
propiedad tayta-mamanmanta herenciayuq kasqanrayku. Ichaqa kay t’inkiqa huk pe-auto
claseyuqmi, 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-none
Clase (hinallataq CSS pointer-events
propiedad churasqa) huk rikuchiqwan (sillu, qillqana, llamiy) tinkiykunallata hark'an. T'inkikuna chaymanta kamachiykuna kaqwan .pe-none
kanku, ñ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,
disabled
HTML 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,
),