పేజినేషన్

బహుళ పేజీలలో సంబంధిత కంటెంట్ శ్రేణిని సూచించడానికి పేజీని చూపడానికి డాక్యుమెంటేషన్ మరియు ఉదాహరణలు.

అవలోకనం

మేము మా పేజినేషన్ కోసం కనెక్ట్ చేయబడిన లింక్‌ల యొక్క పెద్ద బ్లాక్‌ను ఉపయోగిస్తాము, లింక్‌లను మిస్ చేయడం కష్టతరం మరియు సులభంగా కొలవగలిగేలా చేస్తుంది-అవన్నీ పెద్ద హిట్ ఏరియాలను అందించేటప్పుడు. పేజీ HTML మూలకాల జాబితాతో నిర్మించబడింది కాబట్టి స్క్రీన్ రీడర్‌లు అందుబాటులో ఉన్న లింక్‌ల సంఖ్యను ప్రకటించగలరు. <nav>స్క్రీన్ రీడర్‌లు మరియు ఇతర సహాయక సాంకేతికతలకు నావిగేషన్ విభాగంగా గుర్తించడానికి చుట్టే మూలకాన్ని ఉపయోగించండి .

అదనంగా, పేజీలు ఒకటి కంటే ఎక్కువ నావిగేషన్ విభాగాలను కలిగి ఉన్నందున, దాని ప్రయోజనాన్ని ప్రతిబింబించేలా వివరణాత్మకంగా aria-labelఅందించడం మంచిది. <nav>ఉదాహరణకు, శోధన ఫలితాల సమితి మధ్య నావిగేట్ చేయడానికి పేజినేషన్ భాగం ఉపయోగించబడితే, తగిన లేబుల్ కావచ్చు 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>

చిహ్నాలతో పని చేస్తోంది

కొన్ని పేజీల లింక్‌ల కోసం టెక్స్ట్ స్థానంలో చిహ్నం లేదా చిహ్నాన్ని ఉపయోగించాలనుకుంటున్నారా? 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>

వికలాంగ మరియు క్రియాశీల రాష్ట్రాలు

వివిధ పరిస్థితులకు అనుగుణంగా పేజినేషన్ లింక్‌లు అనుకూలీకరించబడతాయి. .disabledక్లిక్ చేయలేనిదిగా కనిపించే లింక్‌ల కోసం మరియు .activeప్రస్తుత పేజీని సూచించడానికి ఉపయోగించండి .

s యొక్క లింక్ కార్యాచరణను నిలిపివేయడానికి .disabledతరగతి pointer-events: noneప్రయత్నిస్తుండగా ,<a> ఆ CSS ప్రాపర్టీ ఇంకా ప్రమాణీకరించబడలేదు మరియు కీబోర్డ్ నావిగేషన్‌కు ఖాతా లేదు. tabindex="-1"అలాగే, మీరు ఎల్లప్పుడూ డిసేబుల్ లింక్‌లను జోడించాలి మరియు వాటి కార్యాచరణను పూర్తిగా నిలిపివేయడానికి అనుకూల 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-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>

అమరిక

ఫ్లెక్స్‌బాక్స్ యుటిలిటీలతో పేజినేషన్ భాగాల అమరికను మార్చండి .

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