Breadcrumb

CSS မှတစ်ဆင့် ခြားနားချက်များကို အလိုအလျောက် ထည့်သွင်းပေးသည့် လမ်းကြောင်းဆိုင်ရာ အထက်တန်းအဆင့်အတွင်း လက်ရှိစာမျက်နှာ၏ တည်နေရာကို ညွှန်ပြပါ။

ဥပမာ

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

ခြားနားချက်ကို ပြောင်းလဲခြင်း။

Separators များကို CSS မှတဆင့် ::beforeနှင့် content. ပြောင်းလဲခြင်းဖြင့် ပြောင်းလဲနိုင်သည် $breadcrumb-divider။ စာကြောင်းတစ်ကြောင်းတစ်ဝိုက်ရှိ ကိုးကားချက်များကို ထုတ်လုပ်ရန်အတွက် ကိုးကား လုပ်ဆောင်မှု လိုအပ်သည်၊ ထို့ကြောင့် ခွဲထွက်အဖြစ် သင် အသုံးပြု >လိုပါက၊ ဤအရာကို အသုံးပြုနိုင်သည်။

$breadcrumb-divider: quote(">");

base64 ထည့်သွင်းထားသော SVG အိုင်ကွန် ကို အသုံးပြုရန်လည်း ဖြစ်နိုင်သည် -

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

ခြားနားချက်ကို သတ်မှတ်ခြင်းဖြင့် ဖယ်ရှား $breadcrumb-dividerနိုင်သည် none-

$breadcrumb-divider: none;

သုံးစွဲနိုင်မှု

breadcrumbs သည် လမ်းညွှန်မှုကို ပံ့ပိုးပေးသောကြောင့်၊ ၎င်းသည် ဒြပ်စင် aria-label="breadcrumb"တွင် ပံ့ပိုးပေးထားသည့် လမ်းညွှန်မှုအမျိုးအစားကို ဖော်ပြရန် ၊ လက်ရှိစာမျက်နှာကို ကိုယ်စားပြုကြောင်းဖော်ပြရန် အစုံလိုက်၏ နောက်ဆုံးအကြောင်းအရာကို အသုံးပြုခြင်း ကဲ့သို့သော အဓိပ္ပာယ်ပြည့်ဝသော အညွှန်းတစ်ခုကို ထည့်ခြင်းသည် ကောင်းပါတယ် ။<nav>aria-current="page"

ပိုမိုသိရှိလိုပါက၊ WAI-ARIA Authoring Practices ကို breadcrumb ပုံစံအတွက် ကြည့်ပါ ။