1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | <div class="bx--pagination" data-pagination>
|
9 | <div class="bx--pagination__left">
|
10 | <div class="bx--select bx--select--inline">
|
11 | <label for="select-id-pagination" id="select-id-pagination-label"
|
12 | class="bx--pagination__text">Items per page: </label>
|
13 | <select id="select-id-pagination" aria-label="select number of items per page"
|
14 | class="bx--select-input" data-items-per-page>
|
15 | <option class="bx--select-option" value="10" >10
|
16 | </option>
|
17 | </select>
|
18 | <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
|
19 | <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
|
20 | </svg>
|
21 | </div>
|
22 | <span class="bx--pagination__text">
|
23 | <span>| </span>
|
24 | <span data-displayed-item-range>1-10</span> of
|
25 | <span data-total-items>40</span> items</span>
|
26 | </div>
|
27 | <div class="bx--pagination__right bx--pagination--inline">
|
28 | <span class="bx--pagination__text">
|
29 | <span data-displayed-page-number>1</span> of
|
30 | <span data-total-pages>4</span> pages</span>
|
31 | <button class="bx--pagination__button bx--pagination__button--backward"
|
32 | data-page-backward aria-label="Backward button">
|
33 | <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
|
34 | <path fill-rule="nonzero" d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z" />
|
35 | </svg>
|
36 | </button>
|
37 | <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
|
38 | <div class="bx--select bx--select--inline">
|
39 | <label for="select-id-pagination" class="bx--visually-hidden">Page number</label>
|
40 | <select id="select-id-pagination" class="bx--select-input" data-page-number-input>
|
41 | <option class="bx--select-option" value="1" >1
|
42 | </option>
|
43 | </select>
|
44 | <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
|
45 | <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
|
46 | </svg>
|
47 | </div>
|
48 | <button class="bx--pagination__button bx--pagination__button--forward"
|
49 | data-page-forward aria-label="Forward button">
|
50 | <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
|
51 | <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
|
52 | </svg>
|
53 | </button>
|
54 | </div>
|
55 | </div>
|