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.
<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-none
mpe .pe-auto
ba 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-events
propriété e hériter epayi ya parent na yango. Kasi, lien oyo ezali na pe-auto
kelasi mpe okoki kobɛta yango.
<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
Classe (mpe propriété pointer-events
CSS oyo etie) epekisaka kaka ba interactions na pointeur (souris, stylo, toucher). Ba liens na ba contrôles na .pe-none
ezali, 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
disabled
attribut HTML.
- Mpo na ba liens, longola
href
attribut, 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,
),