Elkarreraginak
Erabiltzaileek webgune bateko edukiekin nola elkarreragiten duten aldatzen duten erabilgarritasun klaseak.
Testu hautaketa
Erabiltzaileak harekin elkarreraginean dagoenean edukia hautatzeko modua aldatu.
Paragrafo hau guztiz hautatuko da erabiltzaileak klik egiten duenean.
Paragrafo honek hautapen portaera lehenetsia du.
Paragrafo hau ezin izango da hautatu erabiltzaileak klik egiten duenean.
<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>
Erakusleen gertaerak
Bootstrap-ek elementuen elkarrekintzak saihesteko .pe-none
edo .pe-auto
gehitzeko klaseak eskaintzen ditu.
Esteka hau ezin da sakatu.
Esteka honetan klik egin daiteke (portaera lehenetsia da).
Esteka honetan ezin da egin klik pointer-events
jabetza bere gurasoengandik heredatu delako. Hala ere, esteka honek pe-auto
klase bat dauka eta klik egin daiteke.
<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>
Klaseak .pe-none
(eta pointer-events
ezartzen duen CSS propietateak) erakusle batekin (sagua, arkatza, ukimena) elkarrekintzak soilik eragozten ditu. Teklatuaren erabiltzaileentzako estekak eta kontrolak .pe-none
, lehenespenez, oraindik fokagarriak eta ekidigarriak dira. Teklatuaren erabiltzaileentzat ere guztiz neutralizatuta daudela ziurtatzeko, baliteke atributu gehiago gehitu behar izatea, hala nola tabindex="-1"
(teklatuaren fokua jasotzea saihesteko) eta aria-disabled="true"
(eraginkortasunez desgaituta daudela laguntza-teknologietara helarazteko), eta agian JavaScript erabili behar duzu. guztiz eragozten die ekintzak izatea.
Ahal izanez gero, irtenbide errazena hau da:
- Inprimaki-kontroletarako, gehitu
disabled
HTML atributua.
- Esteketarako, kendu
href
atributua, aingura edo leku-markaren esteka ez-interaktibo bihurtuz.
Sass
Utilities APIa
Interakzio-utilitateak gure utilitateen APIan deklaratzen dira scss/_utilities.scss
. Ikasi utilitateen APIa erabiltzen.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),