Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
Check
in English

Intarakshɔn dɛn

Yutiliti klas dɛn we de chenj aw di wan dɛn we de yuz di wɛbsayt de tɔk to di tin dɛn we de insay wan wɛbsayt.

Di tɛks we yu de pik

Chenj di we aw dɛn pik di tin dɛn we de insay we di pɔsin we de yuz am de tɔk to am.

Dis paregraf go pik ɔltin we di pɔsin we de yuz am klik am.

Dis paregraf gɛt difɔlt sɛlɛkt bihayvya.

Dis paregraf nɔ go ebul fɔ pik we di pɔsin we de yuz am klik am.

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>

Pointer ivent dɛn

Bootstrap de gi .pe-noneɛn .pe-autoklas fɔ protɛkt ɔ ad ɛlimɛnt intarakshɔn dɛn.

Yu nɔ go ebul fɔ klik dis link .

Yu kin klik dis link (dis na difɔlt bihayvya).

Yu nɔ go ebul fɔ klik dis linkpointer-events bikɔs di prɔpati gɛt frɔm in mama ɔ papa. Bɔt dis link gɛt pe-autoklas ɛn yu kin klik am.

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>

Di .pe-noneklas (ɛn di pointer-eventsCSS prɔpati we i sɛt) de jɔs mek intarakshɔn wit pɔynta (maus, stayl, tɔch). Links ɛn kɔntrol wit .pe-nonena, bay difɔlt, stil fɔs ɛn akshɔnable fɔ kibɔd yuza dɛn. Fɔ mek shɔ se dɛn rili nyutralayz ivin fɔ di wan dɛn we de yuz di kibɔd, yu kin nid fɔ ad ɔda atribyut dɛn lɛk tabindex="-1"(fɔ mek dɛn nɔ gɛt kibɔd fɔs) ɛn aria-disabled="true"(fɔ mek dɛn no di tru tin we se dɛn dɔn disable fayn fayn wan to ɛtɛknɔlɔji dɛn we de ɛp dɛn), ɛn sɔntɛm yu kin yuz JavaSkript fɔ kɔmplit wan fɔ mek dɛn nɔ ebul fɔ du sɔntin.

If i pɔsibul, di simpul we fɔ sɔlv di prɔblɛm na:

  • Fɔ fɔm kɔntrol dɛn, ad di disabledHTML atribyut.
  • Fɔ link dɛn, pul di hrefatribyut, mek i bi nɔ-intaraktiv ankɔ ɔ pleshɔlda link.

Sass bin de

Yutiliti dɛn API

Intarakshɔn yutiliti dɛn de diklar insay wi yutiliti dɛn API insay scss/_utilities.scss. Lan aw fɔ yuz di yutiliti dɛn API.

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