Nuwɔwɔ aduadu kple amewo
Dɔwɔnu ƒe klass siwo trɔa alesi ezãlawo wɔa nu kple nyatakakadzraɖoƒe aɖe me nyawoe.
Nuŋɔŋlɔwo tiatia
Trɔ alesi woatia emenyawo ne ezãla le nu wɔm kplii.
Woatia memama sia keŋkeŋ ne ezãla la zi edzi.
Memamã sia ƒe tiatiawɔblɔɖe ƒe nuwɔna le esi.
Memamã sia mate ŋu atia ne ezãla la zi edzi o.
<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>
Nudzɔdzɔ siwo fiaa mɔ nu
Bootstrap naa .pe-none
kple .pe-auto
klasswo be woaxe mɔ ɖe alo atsɔ element ƒe kadodowo akpe ɖe eŋu.
Womate ŋu azi kadodo sia dzi o.
Woateŋu azi kadodo sia dzi (esia nye nuwɔna si woɖo ɖi).
Womate ŋu azi kadodo sia dzipointer-events
o elabena wonyi nunɔamesi la ƒe dome tso edzila gbɔ. Gake klass le kadodo sia pe-auto
me eye woate ŋu azi edzi.
<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>
Klas .pe-none
la (kple pointer-events
CSS ƒe nɔnɔme si wòɖo) xea mɔ na kadodo kple nufiamɔ̃ (mouse, stylus, touch). Kadodowo kple dziɖuɖuwo kple .pe-none
, le gɔmedzedzea me la, gakpɔtɔ nye nusiwo ŋu woate ŋu alé ŋku ɖo eye woate ŋu awɔ nane na keyboard zãlawo. Be nàkpɔ egbɔ be woɖe asi le wo ŋu keŋkeŋ na keyboard zãlawo gɔ̃ hã la, ɖewohĩ ahiã be nàtsɔ nɔnɔme bubuwo abe tabindex="-1"
(be nàxe mɔ na wo be woagaxɔ keyboard ƒe susu o) kple aria-disabled="true"
(be nàgblɔ nyateƒe si wònye be wowɔ nuwɔametɔwo nyuie la na kpekpeɖeŋu mɔ̃ɖaŋunuwo), eye ɖewohĩ nàzã JavaScript na xe mɔ na wo keŋkeŋ be woagawɔ nu ɖe wo ŋu o.
Ne anya wɔ la, egbɔkpɔnu si le bɔbɔe wue nye:
- Le agbalẽvi dzi kpɔkpɔwo gome la, tsɔ
disabled
HTML nɔnɔmea kpee.
- Le kadodowo gome la, ɖe
href
nɔnɔmea ɖa, nàna wòanye seke alo teƒeɖoɖo ƒe kadodo si mewɔa dɔ o.
Sass ƒe nyawo
Dɔwɔnuwo ƒe API
Woɖe gbeƒã nuwɔwɔ aduadu ƒe dɔwɔnuwo le míaƒe dɔwɔnuwo API me le scss/_utilities.scss
. Srɔ̃ alesi nàzã utilities API lae.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),