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.

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>

Nudzɔdzɔ siwo fiaa mɔ nu

Bootstrap naa .pe-nonekple .pe-autoklasswo 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-autome eye woate ŋu azi edzi.

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>

Klas .pe-nonela (kple pointer-eventsCSS ƒ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ɔ disabledHTML nɔnɔmea kpee.

Le kadodowo gome la, ɖe hrefnɔ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,
    ),