Interakciók
Segédprogram-osztályok, amelyek megváltoztatják a felhasználóknak a webhely tartalmával való interakcióját.
Szöveg kiválasztása
Módosítsa a tartalom kiválasztásának módját, amikor a felhasználó interakcióba lép vele.
Ez a bekezdés teljes egészében ki lesz jelölve, ha a felhasználó rákattint.
Ez a bekezdés alapértelmezett kiválasztási viselkedéssel rendelkezik.
Ez a bekezdés nem választható ki, ha a felhasználó rákattint.
<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>
Mutató események
A Bootstrap osztályokat biztosít .pe-none
az .pe-auto
elemek interakcióinak megakadályozására vagy hozzáadására.
Erre a linkre nem lehet kattintani.
Erre a linkre kattintva lehet kattintani (ez az alapértelmezett viselkedés).
Erre a hivatkozásra nem lehet kattintani, mert a pointer-events
tulajdonság a szülőtől öröklődött. Ennek a linknek azonban van pe-auto
osztálya, és rákattinthat.
<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>
Az .pe-none
osztály (és az pointer-events
általa beállított CSS-tulajdonság) csak a mutatókkal (egérrel, ceruzával, érintéssel) való interakciót akadályozza meg. A hivatkozások és vezérlők .pe-none
alapértelmezés szerint továbbra is fókuszálhatók és használhatók a billentyűzetet használók számára. Annak érdekében, hogy még a billentyűzetet használók is teljesen semlegesítsék őket, előfordulhat, hogy további attribútumokat kell hozzáadnia, például tabindex="-1"
(hogy megakadályozzák, hogy a billentyűzet fókuszát kapják) és aria-disabled="true"
(hogy jelezzék, hogy ténylegesen le vannak tiltva a kisegítő technológiák számára), és esetleg JavaScriptet kell használnia teljes mértékben megakadályozzák, hogy végrehajthatóak legyenek.
Ha lehetséges, az egyszerűbb megoldás:
- Az űrlapvezérlőkhöz adja hozzá a
disabled
HTML attribútumot.
- Hivatkozások esetén távolítsa el az
href
attribútumot, így nem interaktív horgony- vagy helyőrző hivatkozás lesz.
Sass
Utilities API
Az interakciós segédprogramok a segédprogramok API-jában vannak deklarálva scss/_utilities.scss
. Ismerje meg a segédprogramok API használatát.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),