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 é.

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>

Imeachtaí pointeoir

Soláthraíonn Bootstrap .pe-noneagus .pe-autoranganna 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.

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>

Ní choisceann an .pe-nonerang (agus an t- pointer-eventsairí 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 disabledtréith HTML leis.

Le haghaidh naisc, bain an hreftré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,
    ),