Awọn ibaraẹnisọrọ

Awọn kilasi IwUlO ti o yipada bi awọn olumulo ṣe nlo pẹlu awọn akoonu ti oju opo wẹẹbu kan.

Aṣayan ọrọ

Yi ọna ti a yan akoonu naa pada nigbati olumulo nlo pẹlu rẹ.

Ìpínrọ yii yoo jẹ yiyan patapata nigbati olumulo ba tẹ.

Paragira yii ni ihuwasi yiyan aiyipada.

Abala yii kii yoo yan nigba ti olumulo tẹ.

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>

Awọn iṣẹlẹ ijuboluwole

Bootstrap n pese .pe-noneati .pe-autoawọn kilasi lati ṣe idiwọ tabi ṣafikun awọn ibaraenisepo eroja.

Ọna asopọ yii ko le tẹ.

Ọna asopọ yii le tẹ (eyi jẹ ihuwasi aiyipada).

Ọna asopọ yii ko le tẹ nitori ohun- pointer-eventsini naa jẹ jogun lati ọdọ obi rẹ. Sibẹsibẹ, ọna asopọ yii ni pe-autokilasi ati pe o le tẹ.

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>

.pe-noneKilasi (ati ohun - pointer-eventsini CSS ti o ṣeto) ṣe idilọwọ awọn ibaraenisepo pẹlu itọka kan (Asin, stylus, ifọwọkan). Awọn ọna asopọ ati awọn idari pẹlu .pe-nonejẹ, nipasẹ aiyipada, tun jẹ idojukọ ati ṣiṣe fun awọn olumulo keyboard. Lati rii daju pe wọn jẹ didoju patapata paapaa fun awọn olumulo keyboard, o le nilo lati ṣafikun awọn abuda diẹ sii bii tabindex="-1"(lati ṣe idiwọ wọn lati gbigba idojukọ keyboard) ati aria-disabled="true"(lati sọ otitọ pe wọn jẹ alaabo daradara si awọn imọ-ẹrọ iranlọwọ), ati pe o ṣee lo JavaScript si patapata idilọwọ wọn lati ni igbese.

Ti o ba ṣeeṣe, ojutu ti o rọrun julọ ni:

Fun awọn iṣakoso fọọmu, ṣafikun disabledabuda HTML.

Fun awọn ọna asopọ, yọ abuda naa kuro href, jẹ ki o jẹ oran ti kii ṣe ibaraẹnisọrọ tabi ọna asopọ ibi.

Sass

API Awọn ohun elo

Awọn ohun elo ibaraenisepo jẹ ikede ninu awọn ohun elo API ni scss/_utilities.scss. Kọ ẹkọ bi o ṣe le lo API awọn ohun elo.

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