Mijiedarbība

Lietderības klases, kas maina to, kā lietotāji mijiedarbojas ar vietnes saturu.

Teksta atlase

Mainiet veidu, kādā saturs tiek atlasīts, kad lietotājs ar to mijiedarbojas.

Kad lietotājs noklikšķinās, šī rindkopa tiks pilnībā atlasīta.

Šai rindkopai ir noklusējuma atlases darbība.

Šo rindkopu nevar atlasīt, ja lietotājs noklikšķinās uz tā.

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>

Rādītāja notikumi

Bootstrap nodrošina .pe-noneun .pe-autoklases, lai novērstu vai pievienotu elementu mijiedarbību.

Uz šīs saites nevar noklikšķināt.

Uz šīs saites var noklikšķināt (tā ir noklusējuma darbība).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

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>

The .pe-none class (and the pointer-events CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with .pe-none are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as tabindex="-1" (to prevent them from receiving keyboard focus) and aria-disabled="true" (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable.

If possible, the simpler solution is:

Veidlapas vadīklām pievienojiet disabledHTML atribūtu.

Saitēm noņemiet hrefatribūtu, padarot to par neinteraktīvu enkura vai viettura saiti.

Sass

Utilities API

Mijiedarbības utilītas ir deklarētas mūsu utilītu API valodā scss/_utilities.scss. Uzziniet, kā izmantot utilītu API.

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