Source

Pagination

စာမျက်နှာများစွာတွင် ဆက်စပ်အကြောင်းအရာများ အတွဲလိုက်ရှိကြောင်း ညွှန်ပြရန်အတွက် pagination ပြခြင်းအတွက် နမူနာများ။

ခြုံငုံသုံးသပ်ချက်

ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ pagination အတွက် ချိတ်ဆက်ထားသော လင့်ခ်များကို ကြီးမားသော ဘလောက်ခ်များကို အသုံးပြုကာ လင့်ခ်များကို လက်လွတ်ရန် ခဲယဉ်းကာ အလွယ်တကူ အရွယ်အစား ချဲ့ထွင်နိုင်သည်—အားလုံးသည် ကြီးမားသော ဧရိယာများကို ပံ့ပိုးပေးနေစဉ်။ Pagination ကို စာရင်း HTML ဒြပ်စင်များဖြင့် တည်ဆောက်ထားသောကြောင့် စခရင်ဖတ်သူများသည် ရရှိနိုင်သောလင့်ခ်များ အရေအတွက်ကို ကြေညာနိုင်ပါသည်။ <nav>စခရင်ဖတ်သူများနှင့် အခြားအကူအညီနည်းပညာများဆီသို့ ၎င်းအား လမ်းညွှန်မှုအပိုင်းအဖြစ် ခွဲခြားသတ်မှတ်ရန် ထုပ်ပိုးထားသောဒြပ်စင်ကို အသုံးပြု ပါ။

ထို့အပြင်၊ စာမျက်နှာများတွင် ယင်းကဲ့သို့ လမ်းညွှန်မှုအပိုင်းတစ်ခုထက်ပို၍ ရှိနေနိုင်သဖြင့် ၎င်း၏ရည်ရွယ်ချက်ကို ထင်ဟပ်စေရန်အတွက် ဖော်ပြချက် aria-labelတစ်ခု ပေးဆောင်ရန် အကြံပြုလိုပါသည်။ <nav>ဥပမာအားဖြင့်၊ ရှာဖွေမှုရလဒ်အစုတစ်ခုကြားတွင် လမ်းကြောင်းရှာဖွေရန် pagination အစိတ်အပိုင်းကို အသုံးပြုပါက၊ သင့်လျော်သော အညွှန်းတစ်ခု ဖြစ်နိုင်သည် aria-label="Search results pages"။

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

အိုင်ကွန်များနှင့်အလုပ်လုပ်

အချို့သော pagination လင့်ခ်များအတွက် စာသားအစား အိုင်ကွန် သို့မဟုတ် သင်္ကေတကို အသုံးပြုလိုပါသလား။ ariaအရည်အချင်းများနှင့် .sr-onlyအသုံးဝင်မှု တို့ ဖြင့် သင့်လျော်သော စခရင်ဖတ်စာ ပံ့ပိုးမှုပေးရန် သေချာပါစေ ။

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

မသန်စွမ်းသူများနှင့် တက်ကြွသောပြည်နယ်များ

Pagination လင့်ခ်များကို မတူညီသော အခြေအနေများအတွက် စိတ်ကြိုက်ပြင်ဆင်နိုင်ပါသည်။ .disabledနှိပ်၍မရသော ပေါ်လာသည့် လင့်ခ်များအတွက် အသုံးပြုရန် နှင့် .activeလက်ရှိစာမျက်နှာကို ညွှန်ပြရန်။

.disabledအတန်းသည် s ၏ လင့်ခ်လုပ်ဆောင်နိုင်စွမ်းကို ပိတ်ရန် pointer-events: noneကြိုးစား သော်လည်း ၊ <a>၎င်း CSS ပိုင်ဆိုင်မှုသည် စံမမီသေးဘဲ ကီးဘုတ်လမ်းညွှန်ခြင်းအတွက် ထည့်သွင်းထားခြင်းမရှိပါ။ ထို့ကြောင့်၊ သင်သည် tabindex="-1"disabled လင့်ခ်များကို အမြဲထည့်ထားသင့်ပြီး ၎င်းတို့၏ လုပ်ဆောင်နိုင်စွမ်းကို အပြည့်အဝ ပိတ်ရန် စိတ်ကြိုက် JavaScript ကို အသုံးပြုသင့်သည်။

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

<span>ကလစ်လုပ်ဆောင်နိုင်စွမ်းကို ဖယ်ရှားရန်နှင့် ရည်ရွယ်ထားသည့်ပုံစံများကို ထိန်းသိမ်းထားစဉ်တွင် ကီးဘုတ်အာရုံစူးစိုက်မှုကို တားဆီးရန်အတွက် ရှေ့/နောက်မွှားများရှေ့/နောက်မွှားများကိစ္စတွင် ကျောက်ဆူးကို ချန်လှပ်ထားနိုင်သည်၊ သို့မဟုတ် မသန်စွမ်းသော ကျောက်ဆူးများကို စိတ်ကြိုက်ရွေးချယ်နိုင်ပါသည် ။

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

အရွယ်အစား

ပိုကြီးသည် သို့မဟုတ် သေးငယ်သော pagination ကို နှစ်သက်ပါသလား။ ထည့် ရန် .pagination-lgသို့မဟုတ် .pagination-smအပိုအရွယ်အစားများအတွက်။

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

တန်းညှိခြင်း။

flexbox utilities ဖြင့် pagination အစိတ်အပိုင်းများ၏ ချိန်ညှိမှုကို ပြောင်းလဲပါ ။

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>