Litšebelisano

Lihlopha tsa lisebelisoa tse fetolang tsela eo basebelisi ba sebelisanang le litaba tsa sebaka sa marang-rang.

Khetho ea mongolo

Fetola tsela eo litaba li khethiloeng ka eona ha mosebelisi a sebelisana le tsona.

Serapa sena se tla khethoa ka botlalo ha mosebelisi a tobetse.

Serapa sena se na le mekhoa ea khetho ea kamehla.

Serapa sena se ke ke sa khethoa ha mosebelisi a tobetse.

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>

Liketsahalo tsa pointer

Bootstrap e fana .pe-nonele .pe-autolitlelase ho thibela kapa ho eketsa tšebelisano ea lintho.

Sehokelo sena se ka se tobetse.

Sehokelo sena se ka tobetsoa (hona ke boitšoaro ba kamehla).

Sehokelo sena se ka se tobetse hobane pointer-eventsthepa e futsitsoe ho tsoa ho motsoali oa eona. Leha ho le joalo, sehokelo sena se na le pe-autosehlopha 'me se ka tobetsoa.

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>

Sehlopha .pe-none(le pointer-eventsthepa ea CSS eo e e behang) e thibela feela ho sebelisana le pointer (toeba, pene, ho ama). Lihokelo le litsamaiso tse nang le .pe-nonetsona, ka mokhoa o ikhethileng, li ntse li sebetsa ebile li ka sebetsa ho basebelisi ba keyboard. Ho etsa bonnete ba hore ha li nke lehlakore ka botlalo esita le bakeng sa basebelisi ba keyboard, ho ka 'na ha hlokahala hore u kenye litšoaneleho tse ling tse kang tabindex="-1"(ho ba thibela ho fumana tsepamiso ea keyboard) le aria-disabled="true"(ho fana ka taba ea hore ba holofetse ka katleho ho mahlale a thusang), mme mohlomong u sebelise JavaScript ho ho ba thibela ka botlalo hore ba se ke ba sebetsa.

Haeba ho khoneha, tharollo e bonolo ke:

Bakeng sa taolo ea foromo, eketsa disabledtšobotsi ea HTML.

Bakeng sa likhokahano, tlosa hreftšobotsi, ho e etsa sehokelo se sa sebetseng kapa se ts'oarellang sebaka.

Sass

Utilities API

Lisebelisoa tsa litšebelisano li phatlalatsoa ho lits'ebeletso tsa rona tsa API ho scss/_utilities.scss. Ithute ho sebelisa lisebelisoa tsa API.

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