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.
<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-none
og .pe-auto
flokka 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-auto
flokki og hægt er að smella á hann.
<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-events
CSS-eiginleikinn sem hann setur) kemur aðeins í veg fyrir samskipti við bendilinn (mús, penni, snertingu). Tenglar og stýringar með .pe-none
eru, 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ð
disabled
HTML eigindinni.
- Fyrir tengla skaltu fjarlægja
href
eigindina, 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,
),