@patternfly/patternfly 5.3.0-prerelease.5 → 5.3.1
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 +7 -4
- package/components/Pagination/pagination.scss +9 -8
- package/docs/components/Pagination/examples/Pagination.md +182 -708
- package/docs/components/Toolbar/examples/Toolbar.md +30 -98
- package/docs/components/TreeView/examples/TreeView.md +615 -45
- package/docs/demos/CardView/examples/CardView.md +30 -98
- package/docs/demos/DataList/examples/DataList.md +120 -392
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +90 -302
- package/docs/demos/Table/examples/Table.md +345 -1127
- package/docs/demos/Toolbar/examples/Toolbar.md +120 -392
- package/package.json +1 -1
- package/patternfly-no-globals.css +7 -4
- package/patternfly-theme-dark-unversioned.css +7 -4
- package/patternfly.css +7 -4
- 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-v5-c-pagination
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
## Examples
|
|
5
|
+
---## Examples
|
|
8
6
|
|
|
9
7
|
### Top
|
|
10
8
|
|
|
@@ -14,175 +12,25 @@ cssPrefix: pf-v5-c-pagination
|
|
|
14
12
|
<b>1 - 10</b> of
|
|
15
13
|
<b>36</b>
|
|
16
14
|
</div>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
aria-haspopup="listbox"
|
|
23
|
-
aria-expanded="false"
|
|
24
|
-
>
|
|
25
|
-
<span class="pf-v5-c-options-menu__toggle-text">
|
|
26
|
-
<b>1 - 10</b> of
|
|
27
|
-
<b>36</b>
|
|
28
|
-
</span>
|
|
29
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
30
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
31
|
-
</div>
|
|
32
|
-
</button>
|
|
33
|
-
<ul
|
|
34
|
-
class="pf-v5-c-options-menu__menu"
|
|
35
|
-
role="menu"
|
|
36
|
-
aria-labelledby="pagination-options-menu-top-example-toggle"
|
|
37
|
-
hidden
|
|
38
|
-
>
|
|
39
|
-
<li role="none">
|
|
40
|
-
<button
|
|
41
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
42
|
-
type="button"
|
|
43
|
-
role="menuitem"
|
|
44
|
-
>5 per page</button>
|
|
45
|
-
</li>
|
|
46
|
-
<li role="none">
|
|
47
|
-
<button
|
|
48
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
49
|
-
type="button"
|
|
50
|
-
role="menuitem"
|
|
51
|
-
>
|
|
52
|
-
10 per page
|
|
53
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
54
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
55
|
-
</div>
|
|
56
|
-
</button>
|
|
57
|
-
</li>
|
|
58
|
-
<li role="none">
|
|
59
|
-
<button
|
|
60
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
61
|
-
type="button"
|
|
62
|
-
role="menuitem"
|
|
63
|
-
>20 per page</button>
|
|
64
|
-
</li>
|
|
65
|
-
</ul>
|
|
66
|
-
</div>
|
|
67
|
-
<nav
|
|
68
|
-
class="pf-v5-c-pagination__nav"
|
|
69
|
-
aria-label="Pagination nav - top example"
|
|
15
|
+
<button
|
|
16
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
17
|
+
type="button"
|
|
18
|
+
aria-expanded="false"
|
|
19
|
+
id="pagination-menu-toggle-top-example"
|
|
70
20
|
>
|
|
71
|
-
<
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
>
|
|
78
|
-
<i class="fas fa-angle-double-left" aria-hidden="true"></i>
|
|
79
|
-
</button>
|
|
80
|
-
</div>
|
|
81
|
-
<div class="pf-v5-c-pagination__nav-control pf-m-prev">
|
|
82
|
-
<button
|
|
83
|
-
class="pf-v5-c-button pf-m-plain"
|
|
84
|
-
type="button"
|
|
85
|
-
disabled
|
|
86
|
-
aria-label="Go to previous page"
|
|
87
|
-
>
|
|
88
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
89
|
-
</button>
|
|
90
|
-
</div>
|
|
91
|
-
<div class="pf-v5-c-pagination__nav-page-select">
|
|
92
|
-
<span class="pf-v5-c-form-control">
|
|
93
|
-
<input
|
|
94
|
-
aria-label="Current page"
|
|
95
|
-
type="number"
|
|
96
|
-
min="1"
|
|
97
|
-
max="4"
|
|
98
|
-
value="1"
|
|
99
|
-
/>
|
|
100
|
-
</span>
|
|
101
|
-
<span aria-hidden="true">of 4</span>
|
|
102
|
-
</div>
|
|
103
|
-
<div class="pf-v5-c-pagination__nav-control pf-m-next">
|
|
104
|
-
<button
|
|
105
|
-
class="pf-v5-c-button pf-m-plain"
|
|
106
|
-
type="button"
|
|
107
|
-
aria-label="Go to next page"
|
|
108
|
-
>
|
|
109
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
110
|
-
</button>
|
|
111
|
-
</div>
|
|
112
|
-
<div class="pf-v5-c-pagination__nav-control pf-m-last">
|
|
113
|
-
<button
|
|
114
|
-
class="pf-v5-c-button pf-m-plain"
|
|
115
|
-
type="button"
|
|
116
|
-
aria-label="Go to last page"
|
|
117
|
-
>
|
|
118
|
-
<i class="fas fa-angle-double-right" aria-hidden="true"></i>
|
|
119
|
-
</button>
|
|
120
|
-
</div>
|
|
121
|
-
</nav>
|
|
122
|
-
</div>
|
|
123
|
-
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
### Top expanded
|
|
127
|
-
|
|
128
|
-
```html
|
|
129
|
-
<div class="pf-v5-c-pagination">
|
|
130
|
-
<div class="pf-v5-c-pagination__total-items">
|
|
131
|
-
<b>1 - 10</b> of
|
|
132
|
-
<b>36</b>
|
|
133
|
-
</div>
|
|
134
|
-
<div class="pf-v5-c-options-menu pf-m-expanded">
|
|
135
|
-
<button
|
|
136
|
-
class="pf-v5-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
137
|
-
type="button"
|
|
138
|
-
id="pagination-options-menu-top-expanded-example-toggle"
|
|
139
|
-
aria-haspopup="listbox"
|
|
140
|
-
aria-expanded="true"
|
|
141
|
-
>
|
|
142
|
-
<span class="pf-v5-c-options-menu__toggle-text">
|
|
143
|
-
<b>1 - 10</b> of
|
|
144
|
-
<b>36</b>
|
|
145
|
-
</span>
|
|
146
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
21
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
22
|
+
<b>1 - 10</b> of
|
|
23
|
+
<b>36</b>
|
|
24
|
+
</span>
|
|
25
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
26
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
147
27
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
148
|
-
</
|
|
149
|
-
</
|
|
150
|
-
|
|
151
|
-
class="pf-v5-c-options-menu__menu"
|
|
152
|
-
role="menu"
|
|
153
|
-
aria-labelledby="pagination-options-menu-top-expanded-example-toggle"
|
|
154
|
-
>
|
|
155
|
-
<li role="none">
|
|
156
|
-
<button
|
|
157
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
158
|
-
type="button"
|
|
159
|
-
role="menuitem"
|
|
160
|
-
>5 per page</button>
|
|
161
|
-
</li>
|
|
162
|
-
<li role="none">
|
|
163
|
-
<button
|
|
164
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
165
|
-
type="button"
|
|
166
|
-
role="menuitem"
|
|
167
|
-
>
|
|
168
|
-
10 per page
|
|
169
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
170
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
171
|
-
</div>
|
|
172
|
-
</button>
|
|
173
|
-
</li>
|
|
174
|
-
<li role="none">
|
|
175
|
-
<button
|
|
176
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
177
|
-
type="button"
|
|
178
|
-
role="menuitem"
|
|
179
|
-
>20 per page</button>
|
|
180
|
-
</li>
|
|
181
|
-
</ul>
|
|
182
|
-
</div>
|
|
28
|
+
</span>
|
|
29
|
+
</span>
|
|
30
|
+
</button>
|
|
183
31
|
<nav
|
|
184
32
|
class="pf-v5-c-pagination__nav"
|
|
185
|
-
aria-label="Pagination nav - top
|
|
33
|
+
aria-label="Pagination nav - top example"
|
|
186
34
|
>
|
|
187
35
|
<div class="pf-v5-c-pagination__nav-control pf-m-first">
|
|
188
36
|
<button
|
|
@@ -247,56 +95,22 @@ cssPrefix: pf-v5-c-pagination
|
|
|
247
95
|
<b>1 - 10</b> of
|
|
248
96
|
<b>36</b>
|
|
249
97
|
</div>
|
|
250
|
-
<
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
<
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
98
|
+
<button
|
|
99
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
100
|
+
type="button"
|
|
101
|
+
aria-expanded="false"
|
|
102
|
+
id="pagination-menu-toggle-top-sticky-example"
|
|
103
|
+
>
|
|
104
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
105
|
+
<b>1 - 10</b> of
|
|
106
|
+
<b>36</b>
|
|
107
|
+
</span>
|
|
108
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
109
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
263
110
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
264
|
-
</
|
|
265
|
-
</
|
|
266
|
-
|
|
267
|
-
class="pf-v5-c-options-menu__menu"
|
|
268
|
-
role="menu"
|
|
269
|
-
aria-labelledby="pagination-options-menu-top-sticky-example-toggle"
|
|
270
|
-
hidden
|
|
271
|
-
>
|
|
272
|
-
<li role="none">
|
|
273
|
-
<button
|
|
274
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
275
|
-
type="button"
|
|
276
|
-
role="menuitem"
|
|
277
|
-
>5 per page</button>
|
|
278
|
-
</li>
|
|
279
|
-
<li role="none">
|
|
280
|
-
<button
|
|
281
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
282
|
-
type="button"
|
|
283
|
-
role="menuitem"
|
|
284
|
-
>
|
|
285
|
-
10 per page
|
|
286
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
287
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
288
|
-
</div>
|
|
289
|
-
</button>
|
|
290
|
-
</li>
|
|
291
|
-
<li role="none">
|
|
292
|
-
<button
|
|
293
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
294
|
-
type="button"
|
|
295
|
-
role="menuitem"
|
|
296
|
-
>20 per page</button>
|
|
297
|
-
</li>
|
|
298
|
-
</ul>
|
|
299
|
-
</div>
|
|
111
|
+
</span>
|
|
112
|
+
</span>
|
|
113
|
+
</button>
|
|
300
114
|
<nav
|
|
301
115
|
class="pf-v5-c-pagination__nav"
|
|
302
116
|
aria-label="Pagination nav - top sticky example"
|
|
@@ -374,56 +188,22 @@ cssPrefix: pf-v5-c-pagination
|
|
|
374
188
|
<b>1 - 10</b> of
|
|
375
189
|
<b>many</b>
|
|
376
190
|
</div>
|
|
377
|
-
<
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
<
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
191
|
+
<button
|
|
192
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
193
|
+
type="button"
|
|
194
|
+
aria-expanded="false"
|
|
195
|
+
id="pagination-menu-toggle-top-indeterminate-example"
|
|
196
|
+
>
|
|
197
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
198
|
+
<b>1 - 10</b> of
|
|
199
|
+
<b>many</b>
|
|
200
|
+
</span>
|
|
201
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
202
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
390
203
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
391
|
-
</
|
|
392
|
-
</
|
|
393
|
-
|
|
394
|
-
class="pf-v5-c-options-menu__menu"
|
|
395
|
-
role="menu"
|
|
396
|
-
aria-labelledby="pagination-options-menu-top-indeterminate-example-toggle"
|
|
397
|
-
hidden
|
|
398
|
-
>
|
|
399
|
-
<li role="none">
|
|
400
|
-
<button
|
|
401
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
402
|
-
type="button"
|
|
403
|
-
role="menuitem"
|
|
404
|
-
>5 per page</button>
|
|
405
|
-
</li>
|
|
406
|
-
<li role="none">
|
|
407
|
-
<button
|
|
408
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
409
|
-
type="button"
|
|
410
|
-
role="menuitem"
|
|
411
|
-
>
|
|
412
|
-
10 per page
|
|
413
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
414
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
415
|
-
</div>
|
|
416
|
-
</button>
|
|
417
|
-
</li>
|
|
418
|
-
<li role="none">
|
|
419
|
-
<button
|
|
420
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
421
|
-
type="button"
|
|
422
|
-
role="menuitem"
|
|
423
|
-
>20 per page</button>
|
|
424
|
-
</li>
|
|
425
|
-
</ul>
|
|
426
|
-
</div>
|
|
204
|
+
</span>
|
|
205
|
+
</span>
|
|
206
|
+
</button>
|
|
427
207
|
<nav
|
|
428
208
|
class="pf-v5-c-pagination__nav"
|
|
429
209
|
aria-label="Pagination nav - indeterminate item count example"
|
|
@@ -486,56 +266,22 @@ cssPrefix: pf-v5-c-pagination
|
|
|
486
266
|
|
|
487
267
|
```html
|
|
488
268
|
<div class="pf-v5-c-pagination pf-m-bottom">
|
|
489
|
-
<
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
<
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
269
|
+
<button
|
|
270
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
|
|
271
|
+
type="button"
|
|
272
|
+
aria-expanded="false"
|
|
273
|
+
id="pagination-menu-toggle-bottom-example"
|
|
274
|
+
>
|
|
275
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
276
|
+
<b>1 - 10</b> of
|
|
277
|
+
<b>36</b>
|
|
278
|
+
</span>
|
|
279
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
280
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
502
281
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
503
|
-
</
|
|
504
|
-
</
|
|
505
|
-
|
|
506
|
-
class="pf-v5-c-options-menu__menu pf-m-top"
|
|
507
|
-
role="menu"
|
|
508
|
-
aria-labelledby="pagination-options-menu-bottom-example-toggle"
|
|
509
|
-
hidden
|
|
510
|
-
>
|
|
511
|
-
<li role="none">
|
|
512
|
-
<button
|
|
513
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
514
|
-
type="button"
|
|
515
|
-
role="menuitem"
|
|
516
|
-
>5 per page</button>
|
|
517
|
-
</li>
|
|
518
|
-
<li role="none">
|
|
519
|
-
<button
|
|
520
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
521
|
-
type="button"
|
|
522
|
-
role="menuitem"
|
|
523
|
-
>
|
|
524
|
-
10 per page
|
|
525
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
526
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
527
|
-
</div>
|
|
528
|
-
</button>
|
|
529
|
-
</li>
|
|
530
|
-
<li role="none">
|
|
531
|
-
<button
|
|
532
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
533
|
-
type="button"
|
|
534
|
-
role="menuitem"
|
|
535
|
-
>20 per page</button>
|
|
536
|
-
</li>
|
|
537
|
-
</ul>
|
|
538
|
-
</div>
|
|
282
|
+
</span>
|
|
283
|
+
</span>
|
|
284
|
+
</button>
|
|
539
285
|
<nav
|
|
540
286
|
class="pf-v5-c-pagination__nav"
|
|
541
287
|
aria-label="Pagination nav - bottom example"
|
|
@@ -609,56 +355,22 @@ cssPrefix: pf-v5-c-pagination
|
|
|
609
355
|
<br />
|
|
610
356
|
<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>
|
|
611
357
|
<div class="pf-v5-c-pagination pf-m-bottom pf-m-sticky">
|
|
612
|
-
<
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
<
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
358
|
+
<button
|
|
359
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
|
|
360
|
+
type="button"
|
|
361
|
+
aria-expanded="false"
|
|
362
|
+
id="pagination-menu-toggle-bottom-sticky-example"
|
|
363
|
+
>
|
|
364
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
365
|
+
<b>1 - 10</b> of
|
|
366
|
+
<b>36</b>
|
|
367
|
+
</span>
|
|
368
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
369
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
625
370
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
626
|
-
</
|
|
627
|
-
</
|
|
628
|
-
|
|
629
|
-
class="pf-v5-c-options-menu__menu pf-m-top"
|
|
630
|
-
role="menu"
|
|
631
|
-
aria-labelledby="pagination-options-menu-bottom-sticky-example-toggle"
|
|
632
|
-
hidden
|
|
633
|
-
>
|
|
634
|
-
<li role="none">
|
|
635
|
-
<button
|
|
636
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
637
|
-
type="button"
|
|
638
|
-
role="menuitem"
|
|
639
|
-
>5 per page</button>
|
|
640
|
-
</li>
|
|
641
|
-
<li role="none">
|
|
642
|
-
<button
|
|
643
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
644
|
-
type="button"
|
|
645
|
-
role="menuitem"
|
|
646
|
-
>
|
|
647
|
-
10 per page
|
|
648
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
649
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
650
|
-
</div>
|
|
651
|
-
</button>
|
|
652
|
-
</li>
|
|
653
|
-
<li role="none">
|
|
654
|
-
<button
|
|
655
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
656
|
-
type="button"
|
|
657
|
-
role="menuitem"
|
|
658
|
-
>20 per page</button>
|
|
659
|
-
</li>
|
|
660
|
-
</ul>
|
|
661
|
-
</div>
|
|
371
|
+
</span>
|
|
372
|
+
</span>
|
|
373
|
+
</button>
|
|
662
374
|
<nav
|
|
663
375
|
class="pf-v5-c-pagination__nav"
|
|
664
376
|
aria-label="Pagination nav - bottom sticky example"
|
|
@@ -726,57 +438,23 @@ cssPrefix: pf-v5-c-pagination
|
|
|
726
438
|
<b>1 - 10</b> of
|
|
727
439
|
<b>36</b>
|
|
728
440
|
</div>
|
|
729
|
-
<
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
<
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
441
|
+
<button
|
|
442
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
443
|
+
type="button"
|
|
444
|
+
aria-expanded="false"
|
|
445
|
+
disabled
|
|
446
|
+
id="pagination-menu-toggle-top-disabled-example"
|
|
447
|
+
>
|
|
448
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
449
|
+
<b>1 - 10</b> of
|
|
450
|
+
<b>36</b>
|
|
451
|
+
</span>
|
|
452
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
453
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
743
454
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
744
|
-
</
|
|
745
|
-
</
|
|
746
|
-
|
|
747
|
-
class="pf-v5-c-options-menu__menu"
|
|
748
|
-
role="menu"
|
|
749
|
-
aria-labelledby="pagination-options-menu-top-disabled-example-toggle"
|
|
750
|
-
hidden
|
|
751
|
-
>
|
|
752
|
-
<li role="none">
|
|
753
|
-
<button
|
|
754
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
755
|
-
type="button"
|
|
756
|
-
role="menuitem"
|
|
757
|
-
>5 per page</button>
|
|
758
|
-
</li>
|
|
759
|
-
<li role="none">
|
|
760
|
-
<button
|
|
761
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
762
|
-
type="button"
|
|
763
|
-
role="menuitem"
|
|
764
|
-
>
|
|
765
|
-
10 per page
|
|
766
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
767
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
768
|
-
</div>
|
|
769
|
-
</button>
|
|
770
|
-
</li>
|
|
771
|
-
<li role="none">
|
|
772
|
-
<button
|
|
773
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
774
|
-
type="button"
|
|
775
|
-
role="menuitem"
|
|
776
|
-
>20 per page</button>
|
|
777
|
-
</li>
|
|
778
|
-
</ul>
|
|
779
|
-
</div>
|
|
455
|
+
</span>
|
|
456
|
+
</span>
|
|
457
|
+
</button>
|
|
780
458
|
<nav
|
|
781
459
|
class="pf-v5-c-pagination__nav"
|
|
782
460
|
aria-label="Pagination nav - top disabled example"
|
|
@@ -847,56 +525,22 @@ cssPrefix: pf-v5-c-pagination
|
|
|
847
525
|
<b>1 - 10</b> of
|
|
848
526
|
<b>36</b>
|
|
849
527
|
</div>
|
|
850
|
-
<
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
<
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
528
|
+
<button
|
|
529
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
530
|
+
type="button"
|
|
531
|
+
aria-expanded="false"
|
|
532
|
+
id="pagination-menu-toggle-compact-example"
|
|
533
|
+
>
|
|
534
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
535
|
+
<b>1 - 10</b> of
|
|
536
|
+
<b>36</b>
|
|
537
|
+
</span>
|
|
538
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
539
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
863
540
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
864
|
-
</
|
|
865
|
-
</
|
|
866
|
-
|
|
867
|
-
class="pf-v5-c-options-menu__menu"
|
|
868
|
-
role="menu"
|
|
869
|
-
aria-labelledby="pagination-options-menu-compact-example-toggle"
|
|
870
|
-
hidden
|
|
871
|
-
>
|
|
872
|
-
<li role="none">
|
|
873
|
-
<button
|
|
874
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
875
|
-
type="button"
|
|
876
|
-
role="menuitem"
|
|
877
|
-
>5 per page</button>
|
|
878
|
-
</li>
|
|
879
|
-
<li role="none">
|
|
880
|
-
<button
|
|
881
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
882
|
-
type="button"
|
|
883
|
-
role="menuitem"
|
|
884
|
-
>
|
|
885
|
-
10 per page
|
|
886
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
887
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
888
|
-
</div>
|
|
889
|
-
</button>
|
|
890
|
-
</li>
|
|
891
|
-
<li role="none">
|
|
892
|
-
<button
|
|
893
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
894
|
-
type="button"
|
|
895
|
-
role="menuitem"
|
|
896
|
-
>20 per page</button>
|
|
897
|
-
</li>
|
|
898
|
-
</ul>
|
|
899
|
-
</div>
|
|
541
|
+
</span>
|
|
542
|
+
</span>
|
|
543
|
+
</button>
|
|
900
544
|
<nav
|
|
901
545
|
class="pf-v5-c-pagination__nav"
|
|
902
546
|
aria-label="Pagination nav - compact example"
|
|
@@ -933,56 +577,22 @@ cssPrefix: pf-v5-c-pagination
|
|
|
933
577
|
<b>1 - 10</b> of
|
|
934
578
|
<b>36</b>
|
|
935
579
|
</div>
|
|
936
|
-
<
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
<
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
580
|
+
<button
|
|
581
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
582
|
+
type="button"
|
|
583
|
+
aria-expanded="false"
|
|
584
|
+
id="pagination-top-with-summary-modifier-menu-toggle"
|
|
585
|
+
>
|
|
586
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
587
|
+
<b>1 - 10</b> of
|
|
588
|
+
<b>36</b>
|
|
589
|
+
</span>
|
|
590
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
591
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
949
592
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
950
|
-
</
|
|
951
|
-
</
|
|
952
|
-
|
|
953
|
-
class="pf-v5-c-options-menu__menu"
|
|
954
|
-
role="menu"
|
|
955
|
-
aria-labelledby="pagination-top-with-summary-modifier-options-menu-toggle"
|
|
956
|
-
hidden
|
|
957
|
-
>
|
|
958
|
-
<li role="none">
|
|
959
|
-
<button
|
|
960
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
961
|
-
type="button"
|
|
962
|
-
role="menuitem"
|
|
963
|
-
>5 per page</button>
|
|
964
|
-
</li>
|
|
965
|
-
<li role="none">
|
|
966
|
-
<button
|
|
967
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
968
|
-
type="button"
|
|
969
|
-
role="menuitem"
|
|
970
|
-
>
|
|
971
|
-
10 per page
|
|
972
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
973
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
974
|
-
</div>
|
|
975
|
-
</button>
|
|
976
|
-
</li>
|
|
977
|
-
<li role="none">
|
|
978
|
-
<button
|
|
979
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
980
|
-
type="button"
|
|
981
|
-
role="menuitem"
|
|
982
|
-
>20 per page</button>
|
|
983
|
-
</li>
|
|
984
|
-
</ul>
|
|
985
|
-
</div>
|
|
593
|
+
</span>
|
|
594
|
+
</span>
|
|
595
|
+
</button>
|
|
986
596
|
<nav
|
|
987
597
|
class="pf-v5-c-pagination__nav"
|
|
988
598
|
aria-label="Pagination nav - top with display summary modifier example"
|
|
@@ -1050,56 +660,22 @@ cssPrefix: pf-v5-c-pagination
|
|
|
1050
660
|
<b>1 - 10</b> of
|
|
1051
661
|
<b>36</b>
|
|
1052
662
|
</div>
|
|
1053
|
-
<
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
<
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
663
|
+
<button
|
|
664
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
665
|
+
type="button"
|
|
666
|
+
aria-expanded="false"
|
|
667
|
+
id="pagination-top-with-full-modifier-menu-toggle"
|
|
668
|
+
>
|
|
669
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
670
|
+
<b>1 - 10</b> of
|
|
671
|
+
<b>36</b>
|
|
672
|
+
</span>
|
|
673
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
674
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1066
675
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1067
|
-
</
|
|
1068
|
-
</
|
|
1069
|
-
|
|
1070
|
-
class="pf-v5-c-options-menu__menu"
|
|
1071
|
-
role="menu"
|
|
1072
|
-
aria-labelledby="pagination-top-with-full-modifier-options-menu-toggle"
|
|
1073
|
-
hidden
|
|
1074
|
-
>
|
|
1075
|
-
<li role="none">
|
|
1076
|
-
<button
|
|
1077
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1078
|
-
type="button"
|
|
1079
|
-
role="menuitem"
|
|
1080
|
-
>5 per page</button>
|
|
1081
|
-
</li>
|
|
1082
|
-
<li role="none">
|
|
1083
|
-
<button
|
|
1084
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1085
|
-
type="button"
|
|
1086
|
-
role="menuitem"
|
|
1087
|
-
>
|
|
1088
|
-
10 per page
|
|
1089
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
1090
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1091
|
-
</div>
|
|
1092
|
-
</button>
|
|
1093
|
-
</li>
|
|
1094
|
-
<li role="none">
|
|
1095
|
-
<button
|
|
1096
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1097
|
-
type="button"
|
|
1098
|
-
role="menuitem"
|
|
1099
|
-
>20 per page</button>
|
|
1100
|
-
</li>
|
|
1101
|
-
</ul>
|
|
1102
|
-
</div>
|
|
676
|
+
</span>
|
|
677
|
+
</span>
|
|
678
|
+
</button>
|
|
1103
679
|
<nav
|
|
1104
680
|
class="pf-v5-c-pagination__nav"
|
|
1105
681
|
aria-label="Pagination nav - top with display full modifier example"
|
|
@@ -1169,56 +745,22 @@ cssPrefix: pf-v5-c-pagination
|
|
|
1169
745
|
<b>1 - 10</b> of
|
|
1170
746
|
<b>36</b>
|
|
1171
747
|
</div>
|
|
1172
|
-
<
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
<
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
748
|
+
<button
|
|
749
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
750
|
+
type="button"
|
|
751
|
+
aria-expanded="false"
|
|
752
|
+
id="pagination-top-with-responsive-summary-navigation-modifiers-menu-toggle"
|
|
753
|
+
>
|
|
754
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
755
|
+
<b>1 - 10</b> of
|
|
756
|
+
<b>36</b>
|
|
757
|
+
</span>
|
|
758
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
759
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1185
760
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1186
|
-
</
|
|
1187
|
-
</
|
|
1188
|
-
|
|
1189
|
-
class="pf-v5-c-options-menu__menu"
|
|
1190
|
-
role="menu"
|
|
1191
|
-
aria-labelledby="pagination-top-with-responsive-summary-navigation-modifiers-options-menu-toggle"
|
|
1192
|
-
hidden
|
|
1193
|
-
>
|
|
1194
|
-
<li role="none">
|
|
1195
|
-
<button
|
|
1196
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1197
|
-
type="button"
|
|
1198
|
-
role="menuitem"
|
|
1199
|
-
>5 per page</button>
|
|
1200
|
-
</li>
|
|
1201
|
-
<li role="none">
|
|
1202
|
-
<button
|
|
1203
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1204
|
-
type="button"
|
|
1205
|
-
role="menuitem"
|
|
1206
|
-
>
|
|
1207
|
-
10 per page
|
|
1208
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
1209
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1210
|
-
</div>
|
|
1211
|
-
</button>
|
|
1212
|
-
</li>
|
|
1213
|
-
<li role="none">
|
|
1214
|
-
<button
|
|
1215
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1216
|
-
type="button"
|
|
1217
|
-
role="menuitem"
|
|
1218
|
-
>20 per page</button>
|
|
1219
|
-
</li>
|
|
1220
|
-
</ul>
|
|
1221
|
-
</div>
|
|
761
|
+
</span>
|
|
762
|
+
</span>
|
|
763
|
+
</button>
|
|
1222
764
|
<nav
|
|
1223
765
|
class="pf-v5-c-pagination__nav"
|
|
1224
766
|
aria-label="Pagination nav - top with responsive display summary and display full modifiers example"
|
|
@@ -1286,56 +828,22 @@ cssPrefix: pf-v5-c-pagination
|
|
|
1286
828
|
<b>1 - 10</b> of
|
|
1287
829
|
<b>36</b>
|
|
1288
830
|
</div>
|
|
1289
|
-
<
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
<
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
831
|
+
<button
|
|
832
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
833
|
+
type="button"
|
|
834
|
+
aria-expanded="false"
|
|
835
|
+
id="pagination-compact-with-full-modifier-menu-toggle"
|
|
836
|
+
>
|
|
837
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
838
|
+
<b>1 - 10</b> of
|
|
839
|
+
<b>36</b>
|
|
840
|
+
</span>
|
|
841
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
842
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1302
843
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1303
|
-
</
|
|
1304
|
-
</
|
|
1305
|
-
|
|
1306
|
-
class="pf-v5-c-options-menu__menu"
|
|
1307
|
-
role="menu"
|
|
1308
|
-
aria-labelledby="pagination-compact-with-full-modifier-options-menu-toggle"
|
|
1309
|
-
hidden
|
|
1310
|
-
>
|
|
1311
|
-
<li role="none">
|
|
1312
|
-
<button
|
|
1313
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1314
|
-
type="button"
|
|
1315
|
-
role="menuitem"
|
|
1316
|
-
>5 per page</button>
|
|
1317
|
-
</li>
|
|
1318
|
-
<li role="none">
|
|
1319
|
-
<button
|
|
1320
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1321
|
-
type="button"
|
|
1322
|
-
role="menuitem"
|
|
1323
|
-
>
|
|
1324
|
-
10 per page
|
|
1325
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
1326
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1327
|
-
</div>
|
|
1328
|
-
</button>
|
|
1329
|
-
</li>
|
|
1330
|
-
<li role="none">
|
|
1331
|
-
<button
|
|
1332
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1333
|
-
type="button"
|
|
1334
|
-
role="menuitem"
|
|
1335
|
-
>20 per page</button>
|
|
1336
|
-
</li>
|
|
1337
|
-
</ul>
|
|
1338
|
-
</div>
|
|
844
|
+
</span>
|
|
845
|
+
</span>
|
|
846
|
+
</button>
|
|
1339
847
|
<nav
|
|
1340
848
|
class="pf-v5-c-pagination__nav"
|
|
1341
849
|
aria-label="Pagination nav - compact display full modifier example"
|
|
@@ -1374,56 +882,22 @@ cssPrefix: pf-v5-c-pagination
|
|
|
1374
882
|
<b>1 - 10</b> of
|
|
1375
883
|
<b>36</b>
|
|
1376
884
|
</div>
|
|
1377
|
-
<
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
<
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
<div class="pf-v5-c-options-menu__toggle-icon">
|
|
885
|
+
<button
|
|
886
|
+
class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
|
|
887
|
+
type="button"
|
|
888
|
+
aria-expanded="false"
|
|
889
|
+
id="pagination-inset-menu-toggle"
|
|
890
|
+
>
|
|
891
|
+
<span class="pf-v5-c-menu-toggle__text">
|
|
892
|
+
<b>1 - 10</b> of
|
|
893
|
+
<b>36</b>
|
|
894
|
+
</span>
|
|
895
|
+
<span class="pf-v5-c-menu-toggle__controls">
|
|
896
|
+
<span class="pf-v5-c-menu-toggle__toggle-icon">
|
|
1390
897
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1391
|
-
</
|
|
1392
|
-
</
|
|
1393
|
-
|
|
1394
|
-
class="pf-v5-c-options-menu__menu"
|
|
1395
|
-
role="menu"
|
|
1396
|
-
aria-labelledby="pagination-inset-options-menu-toggle"
|
|
1397
|
-
hidden
|
|
1398
|
-
>
|
|
1399
|
-
<li role="none">
|
|
1400
|
-
<button
|
|
1401
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1402
|
-
type="button"
|
|
1403
|
-
role="menuitem"
|
|
1404
|
-
>5 per page</button>
|
|
1405
|
-
</li>
|
|
1406
|
-
<li role="none">
|
|
1407
|
-
<button
|
|
1408
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1409
|
-
type="button"
|
|
1410
|
-
role="menuitem"
|
|
1411
|
-
>
|
|
1412
|
-
10 per page
|
|
1413
|
-
<div class="pf-v5-c-options-menu__menu-item-icon">
|
|
1414
|
-
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1415
|
-
</div>
|
|
1416
|
-
</button>
|
|
1417
|
-
</li>
|
|
1418
|
-
<li role="none">
|
|
1419
|
-
<button
|
|
1420
|
-
class="pf-v5-c-options-menu__menu-item"
|
|
1421
|
-
type="button"
|
|
1422
|
-
role="menuitem"
|
|
1423
|
-
>20 per page</button>
|
|
1424
|
-
</li>
|
|
1425
|
-
</ul>
|
|
1426
|
-
</div>
|
|
898
|
+
</span>
|
|
899
|
+
</span>
|
|
900
|
+
</button>
|
|
1427
901
|
<nav
|
|
1428
902
|
class="pf-v5-c-pagination__nav"
|
|
1429
903
|
aria-label="Pagination nav - inset example"
|