Elkarreraginak

Erabiltzaileek webgune bateko edukiekin nola elkarreragiten duten aldatzen duten erabilgarritasun klaseak.

Testu hautaketa

Erabiltzaileak harekin elkarreraginean edukia hautatzeko modua aldatzea.

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.

html

<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-noneedo .pe-autogehitzeko klaseak eskaintzen ditu.

Esteka hau ezin da klik egin.

Esteka honetan klik egin daiteke (portaera lehenetsia da).

Esteka honetan ezin da egin klik pointer-eventsjabetza bere gurasoengandik heredatu delako. Hala ere, esteka honek pe-autoklase bat dauka eta klik egin daiteke.

html

<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-eventsezartzen 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 beharbada JavaScript erabili. guztiz eragozten die ekintzak izatea.

Ahal izanez gero, irtenbide errazena hau da:

Inprimaki-kontroletarako, gehitu disabledHTML atributua.

Esteketarako, kendu hrefatributua, 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,
    ),