Idirghníomhaíochtaí
Ranganna fóntais a athraíonn an chaoi a n-idirghníomhaíonn úsáideoirí le hábhar an tsuímh Ghréasáin.
Roghnú téacs
Athraigh an bealach a roghnaítear an t-ábhar nuair a idirghníomhaíonn an t-úsáideoir leis.
Roghnófar an mhír seo go hiomlán nuair a chliceáilfidh an t-úsáideoir é.
Tá iompraíocht roghnaithe réamhshocraithe ag an alt seo.
Ní bheidh an mhír seo in-roghnaithe nuair a chliceáilfidh an t-úsáideoir é.
<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>
Imeachtaí pointeoir
Soláthraíonn Bootstrap .pe-none
agus .pe-auto
ranganna chun idirghníomhaíochtaí eilimint a chosc nó a chur leis.
Ní féidir cliceáil ar an nasc seo .
Is féidir cliceáil ar an nasc seo (is iompar réamhshocraithe é seo).
Ní féidir cliceáil ar an nasc seopointer-events
toisc go bhfuil an mhaoin le hoidhreacht óna tuismitheoir. Mar sin féin, tá rang ag an nascpe-auto
seo agus is féidir cliceáil air.
<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>
Ní choisceann an .pe-none
rang (agus an t- pointer-events
airí CSS a leagann sé) ach idirghníomhaíochtaí le pointeoir (luch, stylus, tadhaill). Tá naisc agus rialuithe le .pe-none
, de réir réamhshocraithe, fós infhócasaithe agus inghníomhaithe d’úsáideoirí méarchláir. Chun a chinntiú go bhfuil siad neodraithe go hiomlán fiú d’úsáideoirí méarchláir, b’fhéidir go mbeidh ort tréithe breise a chur leis mar tabindex="-1"
(chun iad a chosc ó fhócas méarchláir a fháil) agus aria-disabled="true"
(chun a chur in iúl go bhfuil siad díchumasaithe go héifeachtach do theicneolaíochtaí cúnta), agus b’fhéidir JavaScript a úsáid chun cosc iomlán a chur orthu ó bheith inchaingne.
Más féidir, is é an réiteach is simplí:
- Le haghaidh rialuithe foirme, cuir an
disabled
tréith HTML leis.
- Le haghaidh naisc, bain an
href
tréith, rud a fhágann gur nasc ancaire nó sealbhóir áite neamh-idirghníomhach é.
Sass
Utilities API
Déantar fóntais idirghníomhaíochta a dhearbhú inár bhfóntas API i scss/_utilities.scss
. Foghlaim conas an API fóntais a úsáid.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),