Samskipti

Gagnaflokkar sem breyta því hvernig notendur hafa samskipti við innihald vefsíðu.

Textaval

Breyttu því hvernig efnið er valið þegar notandinn hefur samskipti við það.

Þessi málsgrein verður að öllu leyti valin þegar notandinn smellir á hana.

Þessi málsgrein hefur sjálfgefna valhegðun.

Þessi málsgrein verður ekki valin þegar notandinn smellir á hana.

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>

Bendarviðburðir

Bootstrap veitir .pe-noneog .pe-autoflokka til að koma í veg fyrir eða bæta við frumefnasamskiptum.

Ekki er hægt að smella á þennan hlekk .

Hægt er að smella á þennan hlekk (þetta er sjálfgefin hegðun).

Ekki er hægt að smella á þennan hlekkpointer-events vegna þess að eignin er arfleifð frá foreldri sínu. Hins vegar er þessi hlekkur með pe-autoflokki og hægt er að smella á hann.

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>

Klassinn .pe-none(og pointer-eventsCSS-eiginleikinn sem hann setur) kemur aðeins í veg fyrir samskipti við bendilinn (mús, penni, snertingu). Tenglar og stýringar með .pe-noneeru, sjálfgefið, enn fókusar og framkvæmanlegar fyrir lyklaborðsnotendur. Til að tryggja að þeir séu algjörlega hlutlausir, jafnvel fyrir lyklaborðsnotendur, gætir þú þurft að bæta við fleiri eiginleikum eins og tabindex="-1"(til að koma í veg fyrir að þeir fái lyklaborðsfókus) og aria-disabled="true"(til að koma því til skila að þeir séu í raun óvirkir til hjálpartækni), og hugsanlega nota JavaScript til að koma algjörlega í veg fyrir að þau séu aðgerðahæf.

Ef mögulegt er er einfaldari lausnin:

Fyrir formstýringar skaltu bæta við disabledHTML eigindinni.

Fyrir tengla skaltu fjarlægja hrefeigindina, sem gerir það að ógagnvirkum akkeri eða staðsetningartengli.

Sass

Utilities API

Samskipti tólum er lýst yfir í tólum API okkar í scss/_utilities.scss. Lærðu hvernig á að nota utilities API.

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