መስተጋብር

ተጠቃሚዎች ከድር ጣቢያ ይዘቶች ጋር እንዴት እንደሚገናኙ የሚቀይሩ የመገልገያ ክፍሎች።

የጽሑፍ ምርጫ

ተጠቃሚው ከእሱ ጋር በሚገናኝበት ጊዜ ይዘቱ የሚመረጥበትን መንገድ ይቀይሩ.

ይህ አንቀጽ በተጠቃሚው ጠቅ ሲደረግ ሙሉ በሙሉ ይመረጣል.

ይህ አንቀጽ ነባሪ የመምረጥ ባህሪ አለው።

ይህ አንቀጽ በተጠቃሚው ጠቅ ሲደረግ ሊመረጥ አይችልም።

<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እና ጠቅ ማድረግ ይችላል።

<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ያስቀመጠው የሲኤስኤስ ንብረት) በጠቋሚ (አይጥ፣ ስታይለስ፣ ንክኪ) መስተጋብርን ብቻ ይከለክላል። አገናኞች እና መቆጣጠሪያዎች .pe-noneበነባሪነት አሁንም ትኩረት የሚስቡ እና ለቁልፍ ሰሌዳ ተጠቃሚዎች ተግባራዊ ናቸው። ለቁልፍ ሰሌዳ ተጠቃሚዎችም ቢሆን ሙሉ ለሙሉ ገለልተኝነታቸውን ለማረጋገጥ ተጨማሪ ባህሪያትን ማከል ሊኖርብዎ ይችላል tabindex="-1"(የቁልፍ ሰሌዳ ትኩረት እንዳይቀበሉ ለመከላከል) እና aria-disabled="true"(ለረዳት ቴክኖሎጂዎች ውጤታማ በሆነ መልኩ የአካል ጉዳተኞች መሆናቸውን ለማስረዳት) እና ምናልባትም ጃቫ ስክሪፕትን ለመጠቀም ተግባራዊ እንዳይሆኑ ሙሉ በሙሉ ይከላከሉ. ለቅጽ መቆጣጠሪያዎች disabledበምትኩ የኤችቲኤምኤል ባህሪን ለመጠቀም ያስቡበት።

ሳስ

መገልገያዎች ኤፒአይ

መስተጋብር መገልገያዎች በእኛ የመገልገያዎች ኤፒአይ ውስጥ ይታወቃሉ scss/_utilities.scss። የመገልገያ ኤፒአይን እንዴት መጠቀም እንደሚችሉ ይወቁ።

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