Etkileşimler

Kullanıcıların bir web sitesinin içeriğiyle nasıl etkileşime girdiğini değiştiren yardımcı program sınıfları.

Metin seçimi

Kullanıcı içerikle etkileşim kurduğunda içeriğin seçilme şeklini değiştirin.

Bu paragraf, kullanıcı tarafından tıklandığında tamamen seçilecektir.

Bu paragrafın varsayılan seçme davranışı vardır.

Bu paragraf, kullanıcı tarafından tıklandığında seçilemez.

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>

İşaretçi olayları

Bootstrap, öğe etkileşimlerini önlemek veya eklemek için .pe-noneve sınıfları sağlar..pe-auto

Bu bağlantı tıklanamaz.

Bu bağlantı tıklanabilir (bu varsayılan davranıştır).

Bu bağlantıpointer-events , özellik üst öğesinden devralındığı için tıklanamıyor . Ancak, bu bağlantının bir pe-autosınıfı vardır ve tıklanabilir.

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>

Sınıf .pe-none(ve pointer-eventsayarladığı CSS özelliği) yalnızca bir işaretçiyle (fare, ekran kalemi, dokunma) etkileşimleri engeller. İle bağlantılar ve kontroller .pe-none, varsayılan olarak, klavye kullanıcıları için hala odaklanabilir ve eyleme geçirilebilir. Klavye kullanıcıları için bile tamamen etkisiz hale getirildiklerinden emin olmak için, tabindex="-1"(klavye odağını almalarını önlemek için) ve aria-disabled="true"(yardımcı teknolojilere etkin bir şekilde devre dışı bırakıldıklarını iletmek için) gibi başka nitelikler eklemeniz ve muhtemelen JavaScript'i aşağıdakileri yapmak için kullanmanız gerekebilir. eyleme geçmelerini tamamen engeller.

Mümkünse, daha basit çözüm şudur:

Form kontrolleri için disabledHTML niteliğini ekleyin.

Bağlantılar için özelliği kaldırın, hrefetkileşimli olmayan bir bağlantı veya yer tutucu bağlantı yapın.

küstah

Yardımcı Programlar API'sı

Etkileşim yardımcı programları, scss/_utilities.scss. Yardımcı programlar API'sini nasıl kullanacağınızı öğrenin.

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