ምትእስሳራት

ተጠቀምቲ ምስ ትሕዝቶ ናይ ሓደ መርበብ ሓበሬታ ብኸመይ ከም ዝራኸቡ ዝቕይሩ ናይ ዩቲሊቲ ክፍልታት።

ጽሑፍ ምምራጽ

ተጠቃሚ ምስኡ ክራኸብ ከሎ እቲ ትሕዝቶ ዝምረጽ ኣገባብ ምቕያር።

እዚ ሕጡበ-ጽሑፍ ምሉእ ብምሉእ ብተጠቃሚ ምስ ዝጥወቕ ክምረጽ እዩ።

እዚ ሕጡበ-ጽሑፍ ነባሪ ናይ ምምራጽ ባህሪ ኣለዎ።

እዚ ሕጡበ-ጽሑፍ ብተጠቃሚ ምስ ዝጥወቕ ዝምረጽ ኣይክኸውንን እዩ።

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

ጠቋሚ ፍጻመታት

ቡትስትራፕ ንናይ ባእታ ምትእስሳር ንምክልኻል ወይ ንምውሳኽ ዝህብን ክፍልታትን .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ዘቐምጦ CSS ባህሪ) ምስ ጠቋሚ (ማውስ፡ ስታይለስ፡ ምትንኻፍ) ንዝግበር ምትእስሳር ጥራይ እዩ ዝኽልክል። ምስ .pe-noneዘለዎም መላግቦታትን ቁጽጽራትን፡ ብነባሪ፡ ጌና ንተጠቀምቲ ሰሌዳ ቁልፊ ትኹረት ዝግበረሎምን ተግባራዊ ዝኾኑን እዮም። ዋላ ንተጠቀምቲ ቁልፊ ሰሌዳ ምሉእ ብምሉእ ገለልተኛታት ምዃኖም ንምርግጋጽ፡ ተወሳኺ ባህርያት ከም tabindex="-1"(ትኹረት ሰሌዳ ቁልፊ ከይቅበሉ ንምክልኻል) ከምኡ’ውን aria-disabled="true"(ንሓጋዚ ቴክኖሎጂታት ብውጽኢታዊ መንገዲ ተሰናኺሎም ከምዘለዉ ንምትሕልላፍ) ዝኣመሰሉ ተወሳኺ ባህርያት ክትውስኽ ከድልየካ ይኽእል’ዩ፡ ምናልባት’ውን ጃቫስክሪፕት ክትጥቀም ከድልየካ ይኽእል እዩ። ምሉእ ብምሉእ ስጉምቲ ንኸይወስዱ ይኽልክሎም። ንመቆጻጸሪታት ቅጥዒ disabled፡ ኣብ ክንድኡ ነቲ ናይ HTML ባህሪ ምጥቃም ኣብ ግምት ኣእቱ።

ሳስ

ዩቲሊቲስ ኤፒኣይ

ናይ ምትእስሳር ዩቲሊቲታት ኣብ ዩቲሊቲታትና ኤፒኣይ ኣብ scss/_utilities.scss. ከመይ ጌርካ ናይ ዩቲሊቲስ ኤፒኣይ ከም እትጥቀመሉ ተማሃር።

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