Source

פּאַginיישאַן

דאַקיומענטיישאַן און ביישפילן פֿאַר ווייַז פון פּאַדזשאַניישאַן צו אָנווייַזן אַ סעריע פון פֿאַרבונדענע אינהאַלט יגזיסץ אויף קייפל בלעטער.

איבערבליק

מיר נוצן אַ גרויס בלאָק פון קאָננעקטעד פֿאַרבינדונגען פֿאַר אונדזער פּאַדזשאַניישאַן, וואָס מאכט פֿאַרבינדונגען שווער צו פאַרפירן און לייכט סקאַלאַבלע - אַלע בשעת מיר צושטעלן גרויס שלאָגן געביטן. פּאַginיישאַן איז געבויט מיט רשימה 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>

פאַרקריפּלט און אַקטיוו שטאַטן

פּאַginיישאַן פֿאַרבינדונגען זענען קוסטאָמיזאַבלע פֿאַר פאַרשידענע צושטאנדן. ניצן .disabledפֿאַר פֿאַרבינדונגען וואָס דערשייַנען ניט-קליקקאַבלע און .activeצו אָנווייַזן דעם קראַנט בלאַט.

בשעת דער .disabledקלאַס ניצט pointer-events: noneצו פּרובירן צו דיסייבאַל די לינק פאַנגקשאַנאַליטי פון <a>s, די CSS פאַרמאָג איז נישט נאָך סטאַנדערדייזד און טוט נישט חשבון פֿאַר קלאַוויאַטור נאַוויגאַציע. ווי אַזאַ, איר זאָל שטענדיק לייגן tabindex="-1"פאַרקריפּלט פֿאַרבינדונגען און נוצן מנהג דזשאַוואַסקריפּט צו גאָר דיסייבאַל זייער פאַנגקשאַנאַליטי.

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