အပြန်အလှန်တုံ့ပြန်မှုများ

စာသားရွေးချယ်မှု

အသုံးပြုသူနှင့် တုံ့ပြန်သည့်အခါ အကြောင်းအရာကို ရွေးချယ်သည့်ပုံစံကို ပြောင်းလဲပါ။

<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

<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-eventsCSS ပိုင်ဆိုင်မှု) သည် ညွှန်ပြချက် (မောက်စ်၊ စတိုင်လပ်စ်၊ ထိခြင်း) တို့နှင့်သာ အပြန်အလှန်ဆက်သွယ်မှုများကို တားဆီးပေးသည်။ လင့်ခ်များနှင့် ထိန်းချုပ်မှု .pe-noneများသည် ပုံမှန်အားဖြင့်၊ ကီးဘုတ်အသုံးပြုသူများအတွက် အာရုံစိုက်နိုင်ပြီး လုပ်ဆောင်နိုင်ဆဲဖြစ်သည်။ tabindex="-1"ကီးဘုတ်အသုံးပြုသူများအတွက်ပင် ၎င်းတို့အား လုံးလုံးလျားလျား ပျက်ပြယ်စေကြောင်း သေချာစေရန်၊ (ကီးဘုတ်အာရုံကို လက်ခံရရှိခြင်းမှ တားဆီးရန်) နှင့် aria-disabled="true"(အကူအညီပေးနည်းပညာများကို ထိထိရောက်ရောက် ပိတ်ထားသည်ဟူသောအချက်ကို ဖော်ပြရန်အတွက် ) ကဲ့သို့သော နောက်ထပ် attribute များကို သင်ထည့်သွင်းရန်လိုအပ်နိုင်သည် ၊၊ ၎င်းတို့ကို အရေးယူခြင်းမှ လုံး၀ တားဆီးထားသည်။

ဖြစ်နိုင်ပါက၊ ပိုမိုရိုးရှင်းသောဖြေရှင်းချက်မှာ-

• ပုံစံထိန်းချုပ်မှုများအတွက်၊ disabledHTML ရည်ညွှန်းချက်ကို ထည့်ပါ။

• လင့်ခ်များအတွက်၊ ရည်ညွှန်းချက်အား ဖယ်ရှားကာ href၎င်းအား အပြန်အလှန်အကျိုးသက်ရောက်မှုမရှိသော ကျောက်ဆူး သို့မဟုတ် နေရာယူထားသည့်လင့်ခ်အဖြစ် ပြုလုပ်ပါ။

ဆူး

အသုံးအဆောင်များ API

အပြန်အလှန်အကျိုးပြုသော utilities များကို ကျွန်ုပ်တို့၏ utilities API တွင် ကြေငြာ scss/_utilities.scssထားသည်။ utilities API ကို အသုံးပြုနည်းကို လေ့လာပါ။

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