Ba interactions

Ba classes ya utilité oyo e changer ndenge ba usagers ba interagir na ba contenus ya site internet.

Kopona makomi

Bobongola lolenge oyo makambo oyo ezali na kati eponami ntango mosaleli azali kosala na yango.

Paragrafe oyo ekoponama mobimba ntango mosaleli akofina yango.

Paragraphe oyo ezali na comportement ya kopona par défaut.

Paragrafe oyo ekozala ya kopona te ntango mosaleli azali kofina yango.

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>

Makambo ya pointeur

Bootstrap epesaka .pe-nonempe .pe-autoba classes mpo na kopekisa to kobakisa ba interactions ya élément.

Lien oyo ekoki kozala cliquer te.

Lien oyo ekoki ko cliquer (oyo ezali comportement par défaut).

Lien oyo ekoki ko cliquer te po pointer-eventspropriété e hériter epayi ya parent na yango. Kasi, lien oyo ezali na pe-autokelasi mpe okoki kobɛta yango.

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>

.pe-noneClasse (mpe propriété pointer-eventsCSS oyo etie) epekisaka kaka ba interactions na pointeur (souris, stylo, toucher). Ba liens na ba contrôles na .pe-noneezali, par défaut, encore focusable et actionnable pona ba usagers ya clavier. Pona ko assurer que bazala entièrement neutralisés même pona ba usagers ya clavier, ekoki kozala na besoin ya kobakisa ba attributs mosusu lokola tabindex="-1"(po na kopekisa bango bazua focus ya clavier) pe aria-disabled="true"(po na ko transmettre le fait que bazali efficacement désactivé na ba technologies ya assistive), pe peut-être kosalela JavaScript pona kopekisa bango mpenza bázala na makambo oyo bakoki kosala.

Soki likoki ezali, solution ya pete ezali oyo:

Mpo na ba contrôles ya formulaire, bakisa disabledattribut HTML.

Mpo na ba liens, longola hrefattribut, kosala yango lien ya anchor to placeholder oyo ezali interactif te.

Sass oyo azali

API ya ba utilitaires

Ba utilitaires ya interaction esakolami na API ya ba utilitaires na biso na scss/_utilities.scss. Yekola ndenge ya kosalela API ya ba utilitaires.

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