@patternfly/patternfly 6.0.0-alpha.158 → 6.0.0-alpha.159
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Pagination/pagination.css +6 -3
- package/components/Pagination/pagination.scss +6 -3
- package/components/_index.css +6 -3
- package/docs/components/Pagination/examples/Pagination.md +196 -713
- package/docs/components/Toolbar/examples/Toolbar.md +34 -98
- package/docs/demos/CardView/examples/CardView.md +32 -98
- package/docs/demos/DataList/examples/DataList.md +128 -392
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +96 -320
- package/docs/demos/Table/examples/Table.md +369 -1132
- package/docs/demos/Toolbar/examples/Toolbar.md +128 -392
- package/package.json +1 -1
- package/patternfly-no-globals.css +6 -3
- package/patternfly.css +6 -3
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/docs/components/Pagination/examples/Pagination.css +0 -3
|
@@ -2,9 +2,7 @@
|
|
|
2
2
|
id: Pagination
|
|
3
3
|
section: components
|
|
4
4
|
cssPrefix: pf-v6-c-pagination
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
## Examples
|
|
5
|
+
---## Examples
|
|
8
6
|
|
|
9
7
|
### Top
|
|
10
8
|
|
|
@@ -15,178 +13,27 @@ cssPrefix: pf-v6-c-pagination
|
|
|
15
13
|
<b>36</b>
|
|
16
14
|
</div>
|
|
17
15
|
<div class="pf-v6-c-pagination__page-menu">
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
>
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
<b>36</b>
|
|
29
|
-
</span>
|
|
30
|
-
<div class="pf-v6-c-options-menu__toggle-icon">
|
|
31
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
32
|
-
</div>
|
|
33
|
-
</button>
|
|
34
|
-
<ul
|
|
35
|
-
class="pf-v6-c-options-menu__menu"
|
|
36
|
-
role="menu"
|
|
37
|
-
aria-labelledby="pagination-options-menu-top-example-toggle"
|
|
38
|
-
hidden
|
|
39
|
-
>
|
|
40
|
-
<li role="none">
|
|
41
|
-
<button
|
|
42
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
43
|
-
type="button"
|
|
44
|
-
role="menuitem"
|
|
45
|
-
>5 per page</button>
|
|
46
|
-
</li>
|
|
47
|
-
<li role="none">
|
|
48
|
-
<button
|
|
49
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
50
|
-
type="button"
|
|
51
|
-
role="menuitem"
|
|
52
|
-
>
|
|
53
|
-
10 per page
|
|
54
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
55
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
56
|
-
</div>
|
|
57
|
-
</button>
|
|
58
|
-
</li>
|
|
59
|
-
<li role="none">
|
|
60
|
-
<button
|
|
61
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
62
|
-
type="button"
|
|
63
|
-
role="menuitem"
|
|
64
|
-
>20 per page</button>
|
|
65
|
-
</li>
|
|
66
|
-
</ul>
|
|
67
|
-
</div>
|
|
68
|
-
</div>
|
|
69
|
-
<nav
|
|
70
|
-
class="pf-v6-c-pagination__nav"
|
|
71
|
-
aria-label="Pagination nav - top example"
|
|
72
|
-
>
|
|
73
|
-
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|
|
74
|
-
<button
|
|
75
|
-
class="pf-v6-c-button pf-m-plain"
|
|
76
|
-
type="button"
|
|
77
|
-
disabled
|
|
78
|
-
aria-label="Go to first page"
|
|
79
|
-
>
|
|
80
|
-
<i class="fas fa-angle-double-left" aria-hidden="true"></i>
|
|
81
|
-
</button>
|
|
82
|
-
</div>
|
|
83
|
-
<div class="pf-v6-c-pagination__nav-control pf-m-prev">
|
|
84
|
-
<button
|
|
85
|
-
class="pf-v6-c-button pf-m-plain"
|
|
86
|
-
type="button"
|
|
87
|
-
disabled
|
|
88
|
-
aria-label="Go to previous page"
|
|
89
|
-
>
|
|
90
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
91
|
-
</button>
|
|
92
|
-
</div>
|
|
93
|
-
<div class="pf-v6-c-pagination__nav-page-select">
|
|
94
|
-
<span class="pf-v6-c-form-control">
|
|
95
|
-
<input
|
|
96
|
-
aria-label="Current page"
|
|
97
|
-
type="number"
|
|
98
|
-
min="1"
|
|
99
|
-
max="4"
|
|
100
|
-
value="1"
|
|
101
|
-
/>
|
|
16
|
+
<button
|
|
17
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
|
|
18
|
+
type="button"
|
|
19
|
+
aria-expanded="false"
|
|
20
|
+
aria-label="Menu toggle"
|
|
21
|
+
id="pagination-menu-toggle-top-example"
|
|
22
|
+
>
|
|
23
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
24
|
+
<b>1 - 10</b> of
|
|
25
|
+
<b>36</b>
|
|
102
26
|
</span>
|
|
103
|
-
<span
|
|
104
|
-
|
|
105
|
-
<div class="pf-v6-c-pagination__nav-control pf-m-next">
|
|
106
|
-
<button
|
|
107
|
-
class="pf-v6-c-button pf-m-plain"
|
|
108
|
-
type="button"
|
|
109
|
-
aria-label="Go to next page"
|
|
110
|
-
>
|
|
111
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
112
|
-
</button>
|
|
113
|
-
</div>
|
|
114
|
-
<div class="pf-v6-c-pagination__nav-control pf-m-last">
|
|
115
|
-
<button
|
|
116
|
-
class="pf-v6-c-button pf-m-plain"
|
|
117
|
-
type="button"
|
|
118
|
-
aria-label="Go to last page"
|
|
119
|
-
>
|
|
120
|
-
<i class="fas fa-angle-double-right" aria-hidden="true"></i>
|
|
121
|
-
</button>
|
|
122
|
-
</div>
|
|
123
|
-
</nav>
|
|
124
|
-
</div>
|
|
125
|
-
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
### Top expanded
|
|
129
|
-
|
|
130
|
-
```html
|
|
131
|
-
<div class="pf-v6-c-pagination">
|
|
132
|
-
<div class="pf-v6-c-pagination__total-items">
|
|
133
|
-
<b>1 - 10</b> of
|
|
134
|
-
<b>36</b>
|
|
135
|
-
</div>
|
|
136
|
-
<div class="pf-v6-c-pagination__page-menu">
|
|
137
|
-
<div class="pf-v6-c-options-menu pf-m-expanded">
|
|
138
|
-
<button
|
|
139
|
-
class="pf-v6-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
140
|
-
type="button"
|
|
141
|
-
id="pagination-options-menu-top-expanded-example-toggle"
|
|
142
|
-
aria-haspopup="listbox"
|
|
143
|
-
aria-expanded="true"
|
|
144
|
-
>
|
|
145
|
-
<span class="pf-v6-c-options-menu__toggle-text">
|
|
146
|
-
<b>1 - 10</b> of
|
|
147
|
-
<b>36</b>
|
|
148
|
-
</span>
|
|
149
|
-
<div class="pf-v6-c-options-menu__toggle-icon">
|
|
27
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
28
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
150
29
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
151
|
-
</
|
|
152
|
-
</
|
|
153
|
-
|
|
154
|
-
class="pf-v6-c-options-menu__menu"
|
|
155
|
-
role="menu"
|
|
156
|
-
aria-labelledby="pagination-options-menu-top-expanded-example-toggle"
|
|
157
|
-
>
|
|
158
|
-
<li role="none">
|
|
159
|
-
<button
|
|
160
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
161
|
-
type="button"
|
|
162
|
-
role="menuitem"
|
|
163
|
-
>5 per page</button>
|
|
164
|
-
</li>
|
|
165
|
-
<li role="none">
|
|
166
|
-
<button
|
|
167
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
168
|
-
type="button"
|
|
169
|
-
role="menuitem"
|
|
170
|
-
>
|
|
171
|
-
10 per page
|
|
172
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
173
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
174
|
-
</div>
|
|
175
|
-
</button>
|
|
176
|
-
</li>
|
|
177
|
-
<li role="none">
|
|
178
|
-
<button
|
|
179
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
180
|
-
type="button"
|
|
181
|
-
role="menuitem"
|
|
182
|
-
>20 per page</button>
|
|
183
|
-
</li>
|
|
184
|
-
</ul>
|
|
185
|
-
</div>
|
|
30
|
+
</span>
|
|
31
|
+
</span>
|
|
32
|
+
</button>
|
|
186
33
|
</div>
|
|
187
34
|
<nav
|
|
188
35
|
class="pf-v6-c-pagination__nav"
|
|
189
|
-
aria-label="Pagination nav - top
|
|
36
|
+
aria-label="Pagination nav - top example"
|
|
190
37
|
>
|
|
191
38
|
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|
|
192
39
|
<button
|
|
@@ -252,56 +99,23 @@ cssPrefix: pf-v6-c-pagination
|
|
|
252
99
|
<b>36</b>
|
|
253
100
|
</div>
|
|
254
101
|
<div class="pf-v6-c-pagination__page-menu">
|
|
255
|
-
<
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
>
|
|
263
|
-
<
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
<
|
|
102
|
+
<button
|
|
103
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
|
|
104
|
+
type="button"
|
|
105
|
+
aria-expanded="false"
|
|
106
|
+
aria-label="Menu toggle"
|
|
107
|
+
id="pagination-menu-toggle-top-sticky-example"
|
|
108
|
+
>
|
|
109
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
110
|
+
<b>1 - 10</b> of
|
|
111
|
+
<b>36</b>
|
|
112
|
+
</span>
|
|
113
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
114
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
268
115
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
269
|
-
</
|
|
270
|
-
</
|
|
271
|
-
|
|
272
|
-
class="pf-v6-c-options-menu__menu"
|
|
273
|
-
role="menu"
|
|
274
|
-
aria-labelledby="pagination-options-menu-top-sticky-example-toggle"
|
|
275
|
-
hidden
|
|
276
|
-
>
|
|
277
|
-
<li role="none">
|
|
278
|
-
<button
|
|
279
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
280
|
-
type="button"
|
|
281
|
-
role="menuitem"
|
|
282
|
-
>5 per page</button>
|
|
283
|
-
</li>
|
|
284
|
-
<li role="none">
|
|
285
|
-
<button
|
|
286
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
287
|
-
type="button"
|
|
288
|
-
role="menuitem"
|
|
289
|
-
>
|
|
290
|
-
10 per page
|
|
291
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
292
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
293
|
-
</div>
|
|
294
|
-
</button>
|
|
295
|
-
</li>
|
|
296
|
-
<li role="none">
|
|
297
|
-
<button
|
|
298
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
299
|
-
type="button"
|
|
300
|
-
role="menuitem"
|
|
301
|
-
>20 per page</button>
|
|
302
|
-
</li>
|
|
303
|
-
</ul>
|
|
304
|
-
</div>
|
|
116
|
+
</span>
|
|
117
|
+
</span>
|
|
118
|
+
</button>
|
|
305
119
|
</div>
|
|
306
120
|
<nav
|
|
307
121
|
class="pf-v6-c-pagination__nav"
|
|
@@ -381,56 +195,23 @@ cssPrefix: pf-v6-c-pagination
|
|
|
381
195
|
<b>many</b>
|
|
382
196
|
</div>
|
|
383
197
|
<div class="pf-v6-c-pagination__page-menu">
|
|
384
|
-
<
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
>
|
|
392
|
-
<
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
<
|
|
198
|
+
<button
|
|
199
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
|
|
200
|
+
type="button"
|
|
201
|
+
aria-expanded="false"
|
|
202
|
+
aria-label="Menu toggle"
|
|
203
|
+
id="pagination-menu-toggle-top-indeterminate-example"
|
|
204
|
+
>
|
|
205
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
206
|
+
<b>1 - 10</b> of
|
|
207
|
+
<b>many</b>
|
|
208
|
+
</span>
|
|
209
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
210
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
397
211
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
398
|
-
</
|
|
399
|
-
</
|
|
400
|
-
|
|
401
|
-
class="pf-v6-c-options-menu__menu"
|
|
402
|
-
role="menu"
|
|
403
|
-
aria-labelledby="pagination-options-menu-top-indeterminate-example-toggle"
|
|
404
|
-
hidden
|
|
405
|
-
>
|
|
406
|
-
<li role="none">
|
|
407
|
-
<button
|
|
408
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
409
|
-
type="button"
|
|
410
|
-
role="menuitem"
|
|
411
|
-
>5 per page</button>
|
|
412
|
-
</li>
|
|
413
|
-
<li role="none">
|
|
414
|
-
<button
|
|
415
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
416
|
-
type="button"
|
|
417
|
-
role="menuitem"
|
|
418
|
-
>
|
|
419
|
-
10 per page
|
|
420
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
421
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
422
|
-
</div>
|
|
423
|
-
</button>
|
|
424
|
-
</li>
|
|
425
|
-
<li role="none">
|
|
426
|
-
<button
|
|
427
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
428
|
-
type="button"
|
|
429
|
-
role="menuitem"
|
|
430
|
-
>20 per page</button>
|
|
431
|
-
</li>
|
|
432
|
-
</ul>
|
|
433
|
-
</div>
|
|
212
|
+
</span>
|
|
213
|
+
</span>
|
|
214
|
+
</button>
|
|
434
215
|
</div>
|
|
435
216
|
<nav
|
|
436
217
|
class="pf-v6-c-pagination__nav"
|
|
@@ -495,56 +276,23 @@ cssPrefix: pf-v6-c-pagination
|
|
|
495
276
|
```html
|
|
496
277
|
<div class="pf-v6-c-pagination pf-m-bottom">
|
|
497
278
|
<div class="pf-v6-c-pagination__page-menu">
|
|
498
|
-
<
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
>
|
|
506
|
-
<
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
<
|
|
279
|
+
<button
|
|
280
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
|
|
281
|
+
type="button"
|
|
282
|
+
aria-expanded="false"
|
|
283
|
+
aria-label="Menu toggle"
|
|
284
|
+
id="pagination-menu-toggle-bottom-example"
|
|
285
|
+
>
|
|
286
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
287
|
+
<b>1 - 10</b> of
|
|
288
|
+
<b>36</b>
|
|
289
|
+
</span>
|
|
290
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
291
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
511
292
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
512
|
-
</
|
|
513
|
-
</
|
|
514
|
-
|
|
515
|
-
class="pf-v6-c-options-menu__menu pf-m-top"
|
|
516
|
-
role="menu"
|
|
517
|
-
aria-labelledby="pagination-options-menu-bottom-example-toggle"
|
|
518
|
-
hidden
|
|
519
|
-
>
|
|
520
|
-
<li role="none">
|
|
521
|
-
<button
|
|
522
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
523
|
-
type="button"
|
|
524
|
-
role="menuitem"
|
|
525
|
-
>5 per page</button>
|
|
526
|
-
</li>
|
|
527
|
-
<li role="none">
|
|
528
|
-
<button
|
|
529
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
530
|
-
type="button"
|
|
531
|
-
role="menuitem"
|
|
532
|
-
>
|
|
533
|
-
10 per page
|
|
534
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
535
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
536
|
-
</div>
|
|
537
|
-
</button>
|
|
538
|
-
</li>
|
|
539
|
-
<li role="none">
|
|
540
|
-
<button
|
|
541
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
542
|
-
type="button"
|
|
543
|
-
role="menuitem"
|
|
544
|
-
>20 per page</button>
|
|
545
|
-
</li>
|
|
546
|
-
</ul>
|
|
547
|
-
</div>
|
|
293
|
+
</span>
|
|
294
|
+
</span>
|
|
295
|
+
</button>
|
|
548
296
|
</div>
|
|
549
297
|
<nav
|
|
550
298
|
class="pf-v6-c-pagination__nav"
|
|
@@ -620,56 +368,23 @@ cssPrefix: pf-v6-c-pagination
|
|
|
620
368
|
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
621
369
|
<div class="pf-v6-c-pagination pf-m-bottom pf-m-sticky">
|
|
622
370
|
<div class="pf-v6-c-pagination__page-menu">
|
|
623
|
-
<
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
>
|
|
631
|
-
<
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
<
|
|
371
|
+
<button
|
|
372
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
|
|
373
|
+
type="button"
|
|
374
|
+
aria-expanded="false"
|
|
375
|
+
aria-label="Menu toggle"
|
|
376
|
+
id="pagination-menu-toggle-bottom-sticky-example"
|
|
377
|
+
>
|
|
378
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
379
|
+
<b>1 - 10</b> of
|
|
380
|
+
<b>36</b>
|
|
381
|
+
</span>
|
|
382
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
383
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
636
384
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
637
|
-
</
|
|
638
|
-
</
|
|
639
|
-
|
|
640
|
-
class="pf-v6-c-options-menu__menu pf-m-top"
|
|
641
|
-
role="menu"
|
|
642
|
-
aria-labelledby="pagination-options-menu-bottom-sticky-example-toggle"
|
|
643
|
-
hidden
|
|
644
|
-
>
|
|
645
|
-
<li role="none">
|
|
646
|
-
<button
|
|
647
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
648
|
-
type="button"
|
|
649
|
-
role="menuitem"
|
|
650
|
-
>5 per page</button>
|
|
651
|
-
</li>
|
|
652
|
-
<li role="none">
|
|
653
|
-
<button
|
|
654
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
655
|
-
type="button"
|
|
656
|
-
role="menuitem"
|
|
657
|
-
>
|
|
658
|
-
10 per page
|
|
659
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
660
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
661
|
-
</div>
|
|
662
|
-
</button>
|
|
663
|
-
</li>
|
|
664
|
-
<li role="none">
|
|
665
|
-
<button
|
|
666
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
667
|
-
type="button"
|
|
668
|
-
role="menuitem"
|
|
669
|
-
>20 per page</button>
|
|
670
|
-
</li>
|
|
671
|
-
</ul>
|
|
672
|
-
</div>
|
|
385
|
+
</span>
|
|
386
|
+
</span>
|
|
387
|
+
</button>
|
|
673
388
|
</div>
|
|
674
389
|
<nav
|
|
675
390
|
class="pf-v6-c-pagination__nav"
|
|
@@ -739,57 +454,24 @@ cssPrefix: pf-v6-c-pagination
|
|
|
739
454
|
<b>36</b>
|
|
740
455
|
</div>
|
|
741
456
|
<div class="pf-v6-c-pagination__page-menu">
|
|
742
|
-
<
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
>
|
|
751
|
-
<
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
<
|
|
457
|
+
<button
|
|
458
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
|
|
459
|
+
type="button"
|
|
460
|
+
aria-expanded="false"
|
|
461
|
+
disabled
|
|
462
|
+
aria-label="Menu toggle"
|
|
463
|
+
id="pagination-menu-toggle-top-disabled-example"
|
|
464
|
+
>
|
|
465
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
466
|
+
<b>1 - 10</b> of
|
|
467
|
+
<b>36</b>
|
|
468
|
+
</span>
|
|
469
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
470
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
756
471
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
757
|
-
</
|
|
758
|
-
</
|
|
759
|
-
|
|
760
|
-
class="pf-v6-c-options-menu__menu"
|
|
761
|
-
role="menu"
|
|
762
|
-
aria-labelledby="pagination-options-menu-top-disabled-example-toggle"
|
|
763
|
-
hidden
|
|
764
|
-
>
|
|
765
|
-
<li role="none">
|
|
766
|
-
<button
|
|
767
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
768
|
-
type="button"
|
|
769
|
-
role="menuitem"
|
|
770
|
-
>5 per page</button>
|
|
771
|
-
</li>
|
|
772
|
-
<li role="none">
|
|
773
|
-
<button
|
|
774
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
775
|
-
type="button"
|
|
776
|
-
role="menuitem"
|
|
777
|
-
>
|
|
778
|
-
10 per page
|
|
779
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
780
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
781
|
-
</div>
|
|
782
|
-
</button>
|
|
783
|
-
</li>
|
|
784
|
-
<li role="none">
|
|
785
|
-
<button
|
|
786
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
787
|
-
type="button"
|
|
788
|
-
role="menuitem"
|
|
789
|
-
>20 per page</button>
|
|
790
|
-
</li>
|
|
791
|
-
</ul>
|
|
792
|
-
</div>
|
|
472
|
+
</span>
|
|
473
|
+
</span>
|
|
474
|
+
</button>
|
|
793
475
|
</div>
|
|
794
476
|
<nav
|
|
795
477
|
class="pf-v6-c-pagination__nav"
|
|
@@ -862,56 +544,23 @@ cssPrefix: pf-v6-c-pagination
|
|
|
862
544
|
<b>36</b>
|
|
863
545
|
</div>
|
|
864
546
|
<div class="pf-v6-c-pagination__page-menu">
|
|
865
|
-
<
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
>
|
|
873
|
-
<
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
<
|
|
547
|
+
<button
|
|
548
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
|
|
549
|
+
type="button"
|
|
550
|
+
aria-expanded="false"
|
|
551
|
+
aria-label="Menu toggle"
|
|
552
|
+
id="pagination-menu-toggle-compact-example"
|
|
553
|
+
>
|
|
554
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
555
|
+
<b>1 - 10</b> of
|
|
556
|
+
<b>36</b>
|
|
557
|
+
</span>
|
|
558
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
559
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
878
560
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
879
|
-
</
|
|
880
|
-
</
|
|
881
|
-
|
|
882
|
-
class="pf-v6-c-options-menu__menu"
|
|
883
|
-
role="menu"
|
|
884
|
-
aria-labelledby="pagination-options-menu-compact-example-toggle"
|
|
885
|
-
hidden
|
|
886
|
-
>
|
|
887
|
-
<li role="none">
|
|
888
|
-
<button
|
|
889
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
890
|
-
type="button"
|
|
891
|
-
role="menuitem"
|
|
892
|
-
>5 per page</button>
|
|
893
|
-
</li>
|
|
894
|
-
<li role="none">
|
|
895
|
-
<button
|
|
896
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
897
|
-
type="button"
|
|
898
|
-
role="menuitem"
|
|
899
|
-
>
|
|
900
|
-
10 per page
|
|
901
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
902
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
903
|
-
</div>
|
|
904
|
-
</button>
|
|
905
|
-
</li>
|
|
906
|
-
<li role="none">
|
|
907
|
-
<button
|
|
908
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
909
|
-
type="button"
|
|
910
|
-
role="menuitem"
|
|
911
|
-
>20 per page</button>
|
|
912
|
-
</li>
|
|
913
|
-
</ul>
|
|
914
|
-
</div>
|
|
561
|
+
</span>
|
|
562
|
+
</span>
|
|
563
|
+
</button>
|
|
915
564
|
</div>
|
|
916
565
|
<nav
|
|
917
566
|
class="pf-v6-c-pagination__nav"
|
|
@@ -950,56 +599,23 @@ cssPrefix: pf-v6-c-pagination
|
|
|
950
599
|
<b>36</b>
|
|
951
600
|
</div>
|
|
952
601
|
<div class="pf-v6-c-pagination__page-menu">
|
|
953
|
-
<
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
>
|
|
961
|
-
<
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
<
|
|
602
|
+
<button
|
|
603
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
|
|
604
|
+
type="button"
|
|
605
|
+
aria-expanded="false"
|
|
606
|
+
aria-label="Menu toggle"
|
|
607
|
+
id="pagination-top-with-summary-modifier-menu-toggle"
|
|
608
|
+
>
|
|
609
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
610
|
+
<b>1 - 10</b> of
|
|
611
|
+
<b>36</b>
|
|
612
|
+
</span>
|
|
613
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
614
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
966
615
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
967
|
-
</
|
|
968
|
-
</
|
|
969
|
-
|
|
970
|
-
class="pf-v6-c-options-menu__menu"
|
|
971
|
-
role="menu"
|
|
972
|
-
aria-labelledby="pagination-top-with-summary-modifier-options-menu-toggle"
|
|
973
|
-
hidden
|
|
974
|
-
>
|
|
975
|
-
<li role="none">
|
|
976
|
-
<button
|
|
977
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
978
|
-
type="button"
|
|
979
|
-
role="menuitem"
|
|
980
|
-
>5 per page</button>
|
|
981
|
-
</li>
|
|
982
|
-
<li role="none">
|
|
983
|
-
<button
|
|
984
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
985
|
-
type="button"
|
|
986
|
-
role="menuitem"
|
|
987
|
-
>
|
|
988
|
-
10 per page
|
|
989
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
990
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
991
|
-
</div>
|
|
992
|
-
</button>
|
|
993
|
-
</li>
|
|
994
|
-
<li role="none">
|
|
995
|
-
<button
|
|
996
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
997
|
-
type="button"
|
|
998
|
-
role="menuitem"
|
|
999
|
-
>20 per page</button>
|
|
1000
|
-
</li>
|
|
1001
|
-
</ul>
|
|
1002
|
-
</div>
|
|
616
|
+
</span>
|
|
617
|
+
</span>
|
|
618
|
+
</button>
|
|
1003
619
|
</div>
|
|
1004
620
|
<nav
|
|
1005
621
|
class="pf-v6-c-pagination__nav"
|
|
@@ -1069,56 +685,23 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1069
685
|
<b>36</b>
|
|
1070
686
|
</div>
|
|
1071
687
|
<div class="pf-v6-c-pagination__page-menu">
|
|
1072
|
-
<
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
>
|
|
1080
|
-
<
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
<
|
|
688
|
+
<button
|
|
689
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
|
|
690
|
+
type="button"
|
|
691
|
+
aria-expanded="false"
|
|
692
|
+
aria-label="Menu toggle"
|
|
693
|
+
id="pagination-top-with-full-modifier-menu-toggle"
|
|
694
|
+
>
|
|
695
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
696
|
+
<b>1 - 10</b> of
|
|
697
|
+
<b>36</b>
|
|
698
|
+
</span>
|
|
699
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
700
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1085
701
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1086
|
-
</
|
|
1087
|
-
</
|
|
1088
|
-
|
|
1089
|
-
class="pf-v6-c-options-menu__menu"
|
|
1090
|
-
role="menu"
|
|
1091
|
-
aria-labelledby="pagination-top-with-full-modifier-options-menu-toggle"
|
|
1092
|
-
hidden
|
|
1093
|
-
>
|
|
1094
|
-
<li role="none">
|
|
1095
|
-
<button
|
|
1096
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1097
|
-
type="button"
|
|
1098
|
-
role="menuitem"
|
|
1099
|
-
>5 per page</button>
|
|
1100
|
-
</li>
|
|
1101
|
-
<li role="none">
|
|
1102
|
-
<button
|
|
1103
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1104
|
-
type="button"
|
|
1105
|
-
role="menuitem"
|
|
1106
|
-
>
|
|
1107
|
-
10 per page
|
|
1108
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
1109
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1110
|
-
</div>
|
|
1111
|
-
</button>
|
|
1112
|
-
</li>
|
|
1113
|
-
<li role="none">
|
|
1114
|
-
<button
|
|
1115
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1116
|
-
type="button"
|
|
1117
|
-
role="menuitem"
|
|
1118
|
-
>20 per page</button>
|
|
1119
|
-
</li>
|
|
1120
|
-
</ul>
|
|
1121
|
-
</div>
|
|
702
|
+
</span>
|
|
703
|
+
</span>
|
|
704
|
+
</button>
|
|
1122
705
|
</div>
|
|
1123
706
|
<nav
|
|
1124
707
|
class="pf-v6-c-pagination__nav"
|
|
@@ -1190,56 +773,23 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1190
773
|
<b>36</b>
|
|
1191
774
|
</div>
|
|
1192
775
|
<div class="pf-v6-c-pagination__page-menu">
|
|
1193
|
-
<
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
>
|
|
1201
|
-
<
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
<
|
|
776
|
+
<button
|
|
777
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
|
|
778
|
+
type="button"
|
|
779
|
+
aria-expanded="false"
|
|
780
|
+
aria-label="Menu toggle"
|
|
781
|
+
id="pagination-top-with-responsive-summary-navigation-modifiers-menu-toggle"
|
|
782
|
+
>
|
|
783
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
784
|
+
<b>1 - 10</b> of
|
|
785
|
+
<b>36</b>
|
|
786
|
+
</span>
|
|
787
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
788
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1206
789
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1207
|
-
</
|
|
1208
|
-
</
|
|
1209
|
-
|
|
1210
|
-
class="pf-v6-c-options-menu__menu"
|
|
1211
|
-
role="menu"
|
|
1212
|
-
aria-labelledby="pagination-top-with-responsive-summary-navigation-modifiers-options-menu-toggle"
|
|
1213
|
-
hidden
|
|
1214
|
-
>
|
|
1215
|
-
<li role="none">
|
|
1216
|
-
<button
|
|
1217
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1218
|
-
type="button"
|
|
1219
|
-
role="menuitem"
|
|
1220
|
-
>5 per page</button>
|
|
1221
|
-
</li>
|
|
1222
|
-
<li role="none">
|
|
1223
|
-
<button
|
|
1224
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1225
|
-
type="button"
|
|
1226
|
-
role="menuitem"
|
|
1227
|
-
>
|
|
1228
|
-
10 per page
|
|
1229
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
1230
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1231
|
-
</div>
|
|
1232
|
-
</button>
|
|
1233
|
-
</li>
|
|
1234
|
-
<li role="none">
|
|
1235
|
-
<button
|
|
1236
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1237
|
-
type="button"
|
|
1238
|
-
role="menuitem"
|
|
1239
|
-
>20 per page</button>
|
|
1240
|
-
</li>
|
|
1241
|
-
</ul>
|
|
1242
|
-
</div>
|
|
790
|
+
</span>
|
|
791
|
+
</span>
|
|
792
|
+
</button>
|
|
1243
793
|
</div>
|
|
1244
794
|
<nav
|
|
1245
795
|
class="pf-v6-c-pagination__nav"
|
|
@@ -1309,56 +859,23 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1309
859
|
<b>36</b>
|
|
1310
860
|
</div>
|
|
1311
861
|
<div class="pf-v6-c-pagination__page-menu">
|
|
1312
|
-
<
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
>
|
|
1320
|
-
<
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
<
|
|
862
|
+
<button
|
|
863
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
|
|
864
|
+
type="button"
|
|
865
|
+
aria-expanded="false"
|
|
866
|
+
aria-label="Menu toggle"
|
|
867
|
+
id="pagination-compact-with-full-modifier-menu-toggle"
|
|
868
|
+
>
|
|
869
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
870
|
+
<b>1 - 10</b> of
|
|
871
|
+
<b>36</b>
|
|
872
|
+
</span>
|
|
873
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
874
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1325
875
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1326
|
-
</
|
|
1327
|
-
</
|
|
1328
|
-
|
|
1329
|
-
class="pf-v6-c-options-menu__menu"
|
|
1330
|
-
role="menu"
|
|
1331
|
-
aria-labelledby="pagination-compact-with-full-modifier-options-menu-toggle"
|
|
1332
|
-
hidden
|
|
1333
|
-
>
|
|
1334
|
-
<li role="none">
|
|
1335
|
-
<button
|
|
1336
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1337
|
-
type="button"
|
|
1338
|
-
role="menuitem"
|
|
1339
|
-
>5 per page</button>
|
|
1340
|
-
</li>
|
|
1341
|
-
<li role="none">
|
|
1342
|
-
<button
|
|
1343
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1344
|
-
type="button"
|
|
1345
|
-
role="menuitem"
|
|
1346
|
-
>
|
|
1347
|
-
10 per page
|
|
1348
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
1349
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1350
|
-
</div>
|
|
1351
|
-
</button>
|
|
1352
|
-
</li>
|
|
1353
|
-
<li role="none">
|
|
1354
|
-
<button
|
|
1355
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1356
|
-
type="button"
|
|
1357
|
-
role="menuitem"
|
|
1358
|
-
>20 per page</button>
|
|
1359
|
-
</li>
|
|
1360
|
-
</ul>
|
|
1361
|
-
</div>
|
|
876
|
+
</span>
|
|
877
|
+
</span>
|
|
878
|
+
</button>
|
|
1362
879
|
</div>
|
|
1363
880
|
<nav
|
|
1364
881
|
class="pf-v6-c-pagination__nav"
|
|
@@ -1399,56 +916,23 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1399
916
|
<b>36</b>
|
|
1400
917
|
</div>
|
|
1401
918
|
<div class="pf-v6-c-pagination__page-menu">
|
|
1402
|
-
<
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
>
|
|
1410
|
-
<
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
<
|
|
919
|
+
<button
|
|
920
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
|
|
921
|
+
type="button"
|
|
922
|
+
aria-expanded="false"
|
|
923
|
+
aria-label="Menu toggle"
|
|
924
|
+
id="pagination-inset-menu-toggle"
|
|
925
|
+
>
|
|
926
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
927
|
+
<b>1 - 10</b> of
|
|
928
|
+
<b>36</b>
|
|
929
|
+
</span>
|
|
930
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
931
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1415
932
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1416
|
-
</
|
|
1417
|
-
</
|
|
1418
|
-
|
|
1419
|
-
class="pf-v6-c-options-menu__menu"
|
|
1420
|
-
role="menu"
|
|
1421
|
-
aria-labelledby="pagination-inset-options-menu-toggle"
|
|
1422
|
-
hidden
|
|
1423
|
-
>
|
|
1424
|
-
<li role="none">
|
|
1425
|
-
<button
|
|
1426
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1427
|
-
type="button"
|
|
1428
|
-
role="menuitem"
|
|
1429
|
-
>5 per page</button>
|
|
1430
|
-
</li>
|
|
1431
|
-
<li role="none">
|
|
1432
|
-
<button
|
|
1433
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1434
|
-
type="button"
|
|
1435
|
-
role="menuitem"
|
|
1436
|
-
>
|
|
1437
|
-
10 per page
|
|
1438
|
-
<div class="pf-v6-c-options-menu__menu-item-icon">
|
|
1439
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1440
|
-
</div>
|
|
1441
|
-
</button>
|
|
1442
|
-
</li>
|
|
1443
|
-
<li role="none">
|
|
1444
|
-
<button
|
|
1445
|
-
class="pf-v6-c-options-menu__menu-item"
|
|
1446
|
-
type="button"
|
|
1447
|
-
role="menuitem"
|
|
1448
|
-
>20 per page</button>
|
|
1449
|
-
</li>
|
|
1450
|
-
</ul>
|
|
1451
|
-
</div>
|
|
933
|
+
</span>
|
|
934
|
+
</span>
|
|
935
|
+
</button>
|
|
1452
936
|
</div>
|
|
1453
937
|
<nav
|
|
1454
938
|
class="pf-v6-c-pagination__nav"
|
|
@@ -1511,8 +995,6 @@ cssPrefix: pf-v6-c-pagination
|
|
|
1511
995
|
|
|
1512
996
|
## Documentation
|
|
1513
997
|
|
|
1514
|
-
Note: `<button>` or `<a>` elements can be used in `.pf-v6-c-pagination__nav-page-select`.
|
|
1515
|
-
|
|
1516
998
|
### Accessibility
|
|
1517
999
|
|
|
1518
1000
|
| Attribute | Applied to | Outcome |
|
|
@@ -1529,7 +1011,8 @@ Note: `<button>` or `<a>` elements can be used in `.pf-v6-c-pagination__nav-page
|
|
|
1529
1011
|
| -- | -- | -- |
|
|
1530
1012
|
| `.pf-v6-c-pagination` | `<div>` | Initiates pagination. |
|
|
1531
1013
|
| `.pf-v6-c-pagination__current` | `<div>` | Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`. |
|
|
1532
|
-
| `.pf-v6-c-pagination__total-items` | `<div>` | Initiates element to replace the
|
|
1014
|
+
| `.pf-v6-c-pagination__total-items` | `<div>` | Initiates element to replace the menu toggle on summary. |
|
|
1015
|
+
| `.pf-v6-c-pagination__page-menu` | `<div>` | Initiates wrapper element for the pagination menu toggle. **Required** when a menu toggle is intended or expected to be rendered. |
|
|
1533
1016
|
| `.pf-v6-c-pagination__nav` | `<nav>` | Initiates pagination nav. |
|
|
1534
1017
|
| `.pf-v6-c-pagination__nav-control` | `<div>` | Initiates pagination nav control. |
|
|
1535
1018
|
| `.pf-v6-c-pagination__nav-page-select` | `<div>` | Initiates pagination nav page select. |
|