Interзара бәйләнеш

Вебсайтның эчтәлеге белән кулланучыларның үзара бәйләнешен үзгәртә торган файдалы класслар.

Текст сайлау

Кулланучы аның белән аралашканда эчтәлекне сайлау ысулын үзгәртегез.

Бу абзац кулланучы тарафыннан басылганда тулысынча сайланачак.

Бу абзацның сайлау тәртибе бар.

Бу абзац кулланучы белән басылганда сайланмаячак.

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>

Күрсәткеч вакыйгалар

Bootstrap элементларның үзара бәйләнешен булдырмау яки өстәү өчен класслар .pe-noneбирә ..pe-auto

Бу сылтамага басып булмый.

Бу сылтамага басыгыз (бу килешү тәртибе).

Бу сылтамага басып булмый, чөнки pointer-eventsмилек аның ата-анасыннан мирас итеп алынган. Ләкин, бу сылтаманың сыйныфы бар pe-autoһәм аны басып була.

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>

Класс .pe-none(һәм pointer-eventsул куйган CSS милеге) күрсәткеч (тычкан, стилус, кагылу) белән үзара бәйләнешне булдырмый. Ссылкалар һәм контрольләр .pe-none, килешү буенча, һаман да игътибарлы һәм клавиатура кулланучылары өчен эшлекле. Аларның хәтта клавиатура кулланучылары өчен дә тулысынча нейтральләштерелүен тәэмин итү өчен, сезгә tabindex="-1"(клавиатура фокусын алмас өчен) һәм aria-disabled="true"(ярдәмче технологияләр өчен эффектив рәвештә инвалид булуларын күрсәтү өчен), һәм JavaScript куллану өчен өстәмә атрибутлар өстәргә кирәк булыр. аларны эшләргә комачаулый.

Мөмкин булса, иң гади чишелеш:

Форма белән идарә итү өчен disabledHTML атрибутын өстәгез.

Сылтамалар өчен, hrefатрибутны алып ташлагыз, аны интерактив булмаган якор яки урын хуҗасы сылтамасы итегез.

Сасс

Коммуналь API

Interзара бәйләнешле коммуналь хезмәтләр безнең коммуналь APIда игълан ителә scss/_utilities.scss. Коммуналь API кулланырга өйрәнегез.

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