@patternfly/patternfly 5.0.0-alpha.1 → 5.0.0-alpha.10
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/RELEASE-NOTES.md +30 -0
- package/base/_common.scss +0 -22
- package/base/patternfly-common.css +0 -10
- package/components/Card/card.css +9 -12
- package/components/Card/card.scss +11 -17
- package/components/ChipGroup/chip-group.css +29 -17
- package/components/ChipGroup/chip-group.scss +39 -22
- package/components/Drawer/drawer.css +0 -1
- package/components/Drawer/drawer.scss +0 -1
- package/components/Dropdown/dropdown.css +15 -0
- package/components/Dropdown/dropdown.scss +20 -0
- package/components/EmptyState/empty-state.css +46 -52
- package/components/EmptyState/empty-state.scss +58 -57
- package/components/FormControl/form-control.css +1 -1
- package/components/FormControl/themes/dark/form-control.scss +1 -1
- package/components/InputGroup/input-group.css +14 -0
- package/components/InputGroup/input-group.scss +9 -0
- package/components/InputGroup/themes/dark/input-group.scss +8 -0
- package/components/LabelGroup/label-group.css +26 -22
- package/components/LabelGroup/label-group.scss +31 -26
- package/components/Menu/menu.css +4 -0
- package/components/Menu/menu.scss +5 -0
- package/components/Pagination/pagination.css +228 -0
- package/components/Pagination/pagination.scss +30 -1
- package/components/Popover/popover.css +1 -6
- package/components/Popover/themes/dark/popover.scss +1 -7
- package/components/Slider/slider.css +0 -7
- package/components/Slider/slider.scss +0 -9
- package/components/Toolbar/toolbar.css +30 -2
- package/components/Toolbar/toolbar.scss +37 -3
- package/components/Tooltip/themes/dark/tooltip.scss +3 -6
- package/components/Tooltip/tooltip.css +2 -5
- package/docs/components/Card/examples/Card.md +61 -44
- package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
- package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
- package/docs/components/Dropdown/examples/Dropdown.md +216 -0
- package/docs/components/EmptyState/examples/EmptyState.md +127 -79
- package/docs/components/InputGroup/examples/InputGroup.md +1 -0
- package/docs/components/Pagination/examples/Pagination.md +129 -30
- package/docs/components/Slider/examples/Slider.md +6 -6
- package/docs/components/Tabs/examples/Tabs.md +1 -1
- package/docs/components/Toolbar/examples/Toolbar.md +19 -16
- package/docs/components/Wizard/examples/Wizard.md +4 -7
- package/docs/demos/Banner/examples/Banner.md +2 -2
- package/docs/demos/Card/examples/Card.md +144 -109
- package/docs/demos/CardView/examples/CardView.md +1 -3
- package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
- package/docs/demos/DataList/examples/DataList.md +2 -4
- package/docs/demos/Masthead/examples/Masthead.md +3 -6
- package/docs/demos/Nav/examples/Nav.md +671 -718
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +9 -8
- package/docs/demos/Table/examples/Table.md +18 -32
- package/docs/demos/Tabs/examples/Tabs.md +42 -539
- package/docs/demos/Toolbar/examples/Toolbar.md +1589 -9
- package/docs/demos/Wizard/examples/Wizard.md +0 -4
- package/package.json +5 -5
- package/patternfly-base-no-reset.css +0 -10
- package/patternfly-base.css +0 -10
- package/patternfly-no-reset.css +405 -135
- package/patternfly.css +405 -135
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/scss-variables.scss +0 -1
|
@@ -9,20 +9,31 @@ cssPrefix: pf-c-empty-state
|
|
|
9
9
|
```html
|
|
10
10
|
<div class="pf-c-empty-state">
|
|
11
11
|
<div class="pf-c-empty-state__content">
|
|
12
|
-
<
|
|
12
|
+
<div class="pf-c-empty-state__header">
|
|
13
|
+
<div class="pf-c-empty-state__icon">
|
|
14
|
+
<i class="fas fa-cubes" aria-hidden="true"></i>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="pf-c-empty-state__title">
|
|
17
|
+
<h1 class="pf-c-empty-state__title-text">Empty state</h1>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
13
20
|
|
|
14
|
-
<h1 class="pf-c-title pf-m-lg">Empty state</h1>
|
|
15
21
|
<div
|
|
16
22
|
class="pf-c-empty-state__body"
|
|
17
|
-
>This represents an the empty state pattern in PatternFly
|
|
18
|
-
|
|
19
|
-
<div class="pf-c-empty-
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
>This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
|
|
24
|
+
|
|
25
|
+
<div class="pf-c-empty-state__footer">
|
|
26
|
+
<div class="pf-c-empty-state__actions">
|
|
27
|
+
<button class="pf-c-button pf-m-primary" type="button">Primary action</button>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="pf-c-empty-state__actions">
|
|
30
|
+
<button class="pf-c-button pf-m-link" type="button">Multiple</button>
|
|
31
|
+
<button class="pf-c-button pf-m-link" type="button">Action buttons</button>
|
|
32
|
+
<button class="pf-c-button pf-m-link" type="button">Can</button>
|
|
33
|
+
<button class="pf-c-button pf-m-link" type="button">Go here</button>
|
|
34
|
+
<button class="pf-c-button pf-m-link" type="button">In the second</button>
|
|
35
|
+
<button class="pf-c-button pf-m-link" type="button">Action area</button>
|
|
36
|
+
</div>
|
|
26
37
|
</div>
|
|
27
38
|
</div>
|
|
28
39
|
</div>
|
|
@@ -34,17 +45,31 @@ cssPrefix: pf-c-empty-state
|
|
|
34
45
|
```html
|
|
35
46
|
<div class="pf-c-empty-state pf-m-xs">
|
|
36
47
|
<div class="pf-c-empty-state__content">
|
|
37
|
-
<
|
|
48
|
+
<div class="pf-c-empty-state__header">
|
|
49
|
+
<div class="pf-c-empty-state__title">
|
|
50
|
+
<h1 class="pf-c-empty-state__title-text">Empty state</h1>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
38
54
|
<div
|
|
39
55
|
class="pf-c-empty-state__body"
|
|
40
|
-
>This represents an the empty state pattern in PatternFly
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
56
|
+
>This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
|
|
57
|
+
|
|
58
|
+
<div class="pf-c-empty-state__footer">
|
|
59
|
+
<div class="pf-c-empty-state__actions">
|
|
60
|
+
<button class="pf-c-button pf-m-link pf-m-small" type="button">Multiple</button>
|
|
61
|
+
<button
|
|
62
|
+
class="pf-c-button pf-m-link pf-m-small"
|
|
63
|
+
type="button"
|
|
64
|
+
>Action buttons</button>
|
|
65
|
+
<button class="pf-c-button pf-m-link pf-m-small" type="button">Can</button>
|
|
66
|
+
<button class="pf-c-button pf-m-link pf-m-small" type="button">Go here</button>
|
|
67
|
+
<button class="pf-c-button pf-m-link pf-m-small" type="button">In the</button>
|
|
68
|
+
<button
|
|
69
|
+
class="pf-c-button pf-m-link pf-m-small"
|
|
70
|
+
type="button"
|
|
71
|
+
>Action area</button>
|
|
72
|
+
</div>
|
|
48
73
|
</div>
|
|
49
74
|
</div>
|
|
50
75
|
</div>
|
|
@@ -56,20 +81,32 @@ cssPrefix: pf-c-empty-state
|
|
|
56
81
|
```html
|
|
57
82
|
<div class="pf-c-empty-state pf-m-sm">
|
|
58
83
|
<div class="pf-c-empty-state__content">
|
|
59
|
-
<
|
|
84
|
+
<div class="pf-c-empty-state__header">
|
|
85
|
+
<div class="pf-c-empty-state__icon">
|
|
86
|
+
<i class="fas fa-cubes" aria-hidden="true"></i>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="pf-c-empty-state__title">
|
|
89
|
+
<h1 class="pf-c-empty-state__title-text">Empty state</h1>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
60
92
|
|
|
61
|
-
<h1 class="pf-c-title pf-m-lg">Empty state</h1>
|
|
62
93
|
<div
|
|
63
94
|
class="pf-c-empty-state__body"
|
|
64
|
-
>This represents an the empty state pattern in PatternFly
|
|
65
|
-
|
|
66
|
-
<div class="pf-c-empty-
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<
|
|
72
|
-
|
|
95
|
+
>This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
|
|
96
|
+
|
|
97
|
+
<div class="pf-c-empty-state__footer">
|
|
98
|
+
<div class="pf-c-empty-state__actions">
|
|
99
|
+
<button class="pf-c-button pf-m-primary" type="button">Primary action</button>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<div class="pf-c-empty-state__actions">
|
|
103
|
+
<button class="pf-c-button pf-m-link" type="button">Multiple</button>
|
|
104
|
+
<button class="pf-c-button pf-m-link" type="button">Action buttons</button>
|
|
105
|
+
<button class="pf-c-button pf-m-link" type="button">Can</button>
|
|
106
|
+
<button class="pf-c-button pf-m-link" type="button">Go here</button>
|
|
107
|
+
<button class="pf-c-button pf-m-link" type="button">In the second</button>
|
|
108
|
+
<button class="pf-c-button pf-m-link" type="button">Action area</button>
|
|
109
|
+
</div>
|
|
73
110
|
</div>
|
|
74
111
|
</div>
|
|
75
112
|
</div>
|
|
@@ -81,20 +118,31 @@ cssPrefix: pf-c-empty-state
|
|
|
81
118
|
```html
|
|
82
119
|
<div class="pf-c-empty-state pf-m-lg">
|
|
83
120
|
<div class="pf-c-empty-state__content">
|
|
84
|
-
<
|
|
121
|
+
<div class="pf-c-empty-state__header">
|
|
122
|
+
<div class="pf-c-empty-state__icon">
|
|
123
|
+
<i class="fas fa-cubes" aria-hidden="true"></i>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="pf-c-empty-state__title">
|
|
126
|
+
<h1 class="pf-c-empty-state__title-text">Empty state</h1>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
85
129
|
|
|
86
|
-
<h1 class="pf-c-title pf-m-lg">Empty state</h1>
|
|
87
130
|
<div
|
|
88
131
|
class="pf-c-empty-state__body"
|
|
89
|
-
>This represents an the empty state pattern in PatternFly
|
|
90
|
-
|
|
91
|
-
<div class="pf-c-empty-
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
|
|
132
|
+
>This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
|
|
133
|
+
|
|
134
|
+
<div class="pf-c-empty-state__footer">
|
|
135
|
+
<div class="pf-c-empty-state__actions">
|
|
136
|
+
<button class="pf-c-button pf-m-primary" type="button">Primary action</button>
|
|
137
|
+
</div>
|
|
138
|
+
<div class="pf-c-empty-state__actions">
|
|
139
|
+
<button class="pf-c-button pf-m-link" type="button">Multiple</button>
|
|
140
|
+
<button class="pf-c-button pf-m-link" type="button">Action buttons</button>
|
|
141
|
+
<button class="pf-c-button pf-m-link" type="button">Can</button>
|
|
142
|
+
<button class="pf-c-button pf-m-link" type="button">Go here</button>
|
|
143
|
+
<button class="pf-c-button pf-m-link" type="button">In the second</button>
|
|
144
|
+
<button class="pf-c-button pf-m-link" type="button">Action area</button>
|
|
145
|
+
</div>
|
|
98
146
|
</div>
|
|
99
147
|
</div>
|
|
100
148
|
</div>
|
|
@@ -106,31 +154,30 @@ cssPrefix: pf-c-empty-state
|
|
|
106
154
|
```html
|
|
107
155
|
<div class="pf-c-empty-state pf-m-xl">
|
|
108
156
|
<div class="pf-c-empty-state__content">
|
|
109
|
-
<
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
class="pf-c-empty-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
</div>
|
|
118
|
-
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
### With primary element
|
|
122
|
-
|
|
123
|
-
```html
|
|
124
|
-
<div class="pf-c-empty-state">
|
|
125
|
-
<div class="pf-c-empty-state__content">
|
|
126
|
-
<i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
|
|
157
|
+
<div class="pf-c-empty-state__header">
|
|
158
|
+
<div class="pf-c-empty-state__icon">
|
|
159
|
+
<i class="fas fa-cubes" aria-hidden="true"></i>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="pf-c-empty-state__title">
|
|
162
|
+
<h1 class="pf-c-empty-state__title-text">Empty state</h1>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
127
165
|
|
|
128
|
-
<h1 class="pf-c-title pf-m-lg">Empty State</h1>
|
|
129
166
|
<div
|
|
130
167
|
class="pf-c-empty-state__body"
|
|
131
|
-
>This represents an the empty state pattern in PatternFly
|
|
132
|
-
<div class="pf-c-empty-
|
|
133
|
-
<
|
|
168
|
+
>This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
|
|
169
|
+
<div class="pf-c-empty-state__footer">
|
|
170
|
+
<div class="pf-c-empty-state__actions">
|
|
171
|
+
<button class="pf-c-button pf-m-primary" type="button">Primary action</button>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="pf-c-empty-state__actions">
|
|
174
|
+
<button class="pf-c-button pf-m-link" type="button">Multiple</button>
|
|
175
|
+
<button class="pf-c-button pf-m-link" type="button">Action buttons</button>
|
|
176
|
+
<button class="pf-c-button pf-m-link" type="button">Can</button>
|
|
177
|
+
<button class="pf-c-button pf-m-link" type="button">Go here</button>
|
|
178
|
+
<button class="pf-c-button pf-m-link" type="button">In the second</button>
|
|
179
|
+
<button class="pf-c-button pf-m-link" type="button">Action area</button>
|
|
180
|
+
</div>
|
|
134
181
|
</div>
|
|
135
182
|
</div>
|
|
136
183
|
</div>
|
|
@@ -147,18 +194,19 @@ cssPrefix: pf-c-empty-state
|
|
|
147
194
|
|
|
148
195
|
### Usage
|
|
149
196
|
|
|
150
|
-
| Class
|
|
151
|
-
|
|
|
152
|
-
| `.pf-c-empty-state`
|
|
153
|
-
| `.pf-c-empty-state__content`
|
|
154
|
-
| `.pf-c-empty-
|
|
155
|
-
| `.pf-c-
|
|
156
|
-
| `.pf-c-empty-
|
|
157
|
-
| `.pf-c-
|
|
158
|
-
| `.pf-c-empty-
|
|
159
|
-
| `.pf-c-empty-
|
|
160
|
-
| `.pf-
|
|
161
|
-
| `.pf-m-
|
|
162
|
-
| `.pf-m-
|
|
163
|
-
| `.pf-m-
|
|
164
|
-
| `.pf-m-
|
|
197
|
+
| Class | Applied to | Outcome |
|
|
198
|
+
| ------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
199
|
+
| `.pf-c-empty-state` | `<div>` | Initiates an empty state component. The empty state centers its content (`.pf-c-empty-state__content`) vertically and horizontally. **Required** |
|
|
200
|
+
| `.pf-c-empty-state__content` | `<div>` | Creates the content container. **Required** |
|
|
201
|
+
| `.pf-c-empty-state__header` | `<div>` | Creates the header container. **Required** |
|
|
202
|
+
| `.pf-c-empty-state__title` | `<div>` | Creates the empty state title container. **Required** |
|
|
203
|
+
| `.pf-c-empty-state__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates the empty state title text container. |
|
|
204
|
+
| `.pf-c-empty-state__icon` | `<div>` | Creates the empty state icon container. |
|
|
205
|
+
| `.pf-c-empty-state__body` | `<div>` | Creates the empty state body content. There can be more than one `.pf-c-empty-state__body` elements. |
|
|
206
|
+
| `.pf-c-empty-state__footer` | `<div>` | Creates the footer container. **Required** |
|
|
207
|
+
| `.pf-c-empty-state__actions` | `<div>` | Container for actions. **Required** |
|
|
208
|
+
| `.pf-m-xs` | `.pf-c-empty-state` | Modifies the empty state for an extra small variation and max-width. |
|
|
209
|
+
| `.pf-m-sm` | `.pf-c-empty-state` | Modifies the empty state for a small max-width. |
|
|
210
|
+
| `.pf-m-lg` | `.pf-c-empty-state` | Modifies the empty state for a large max-width. |
|
|
211
|
+
| `.pf-m-xl` | `.pf-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
|
|
212
|
+
| `.pf-m-full-height` | `.pf-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-c-empty-state` have an implicit or explicit `height` defined. |
|
|
@@ -233,3 +233,4 @@ When using the `.pf-c-input-group` always ensure labels are used outside the inp
|
|
|
233
233
|
| `.pf-c-input-group__text` | `<span>` | Initiates the input group text. This can be used to show text, radio, icons, or check boxes. |
|
|
234
234
|
| `.pf-m-plain` | `.pf-c-input-group` | Removes the background from the input group. |
|
|
235
235
|
| `.pf-m-plain` | `.pf-c-input-group__text` | Removes the border from the text element. |
|
|
236
|
+
| `.pf-m-disabled` | `.pf-c-input-group__text` | Adds disabled styling to match a disabled input within the input group. |
|
|
@@ -1195,42 +1195,141 @@ cssPrefix: pf-c-pagination
|
|
|
1195
1195
|
|
|
1196
1196
|
```
|
|
1197
1197
|
|
|
1198
|
+
### Inset
|
|
1199
|
+
|
|
1200
|
+
```html
|
|
1201
|
+
<div
|
|
1202
|
+
class="pf-c-pagination pf-m-inset-none pf-m-inset-md-on-md pf-m-inset-2xl-on-lg"
|
|
1203
|
+
>
|
|
1204
|
+
<div class="pf-c-pagination__total-items">
|
|
1205
|
+
<b>1 - 10</b> of
|
|
1206
|
+
<b>36</b>
|
|
1207
|
+
</div>
|
|
1208
|
+
<div class="pf-c-options-menu">
|
|
1209
|
+
<button
|
|
1210
|
+
class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
1211
|
+
type="button"
|
|
1212
|
+
id="pagination-inset-options-menu-toggle"
|
|
1213
|
+
aria-haspopup="listbox"
|
|
1214
|
+
aria-expanded="false"
|
|
1215
|
+
>
|
|
1216
|
+
<span class="pf-c-options-menu__toggle-text">
|
|
1217
|
+
<b>1 - 10</b> of
|
|
1218
|
+
<b>36</b>
|
|
1219
|
+
</span>
|
|
1220
|
+
<div class="pf-c-options-menu__toggle-icon">
|
|
1221
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1222
|
+
</div>
|
|
1223
|
+
</button>
|
|
1224
|
+
<ul
|
|
1225
|
+
class="pf-c-options-menu__menu"
|
|
1226
|
+
aria-labelledby="pagination-inset-options-menu-toggle"
|
|
1227
|
+
hidden
|
|
1228
|
+
>
|
|
1229
|
+
<li>
|
|
1230
|
+
<button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
|
|
1231
|
+
</li>
|
|
1232
|
+
<li>
|
|
1233
|
+
<button class="pf-c-options-menu__menu-item" type="button">
|
|
1234
|
+
10 per page
|
|
1235
|
+
<div class="pf-c-options-menu__menu-item-icon">
|
|
1236
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1237
|
+
</div>
|
|
1238
|
+
</button>
|
|
1239
|
+
</li>
|
|
1240
|
+
<li>
|
|
1241
|
+
<button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
|
|
1242
|
+
</li>
|
|
1243
|
+
</ul>
|
|
1244
|
+
</div>
|
|
1245
|
+
<nav class="pf-c-pagination__nav" aria-label="Pagination nav - inset example">
|
|
1246
|
+
<div class="pf-c-pagination__nav-control pf-m-first">
|
|
1247
|
+
<button
|
|
1248
|
+
class="pf-c-button pf-m-plain"
|
|
1249
|
+
type="button"
|
|
1250
|
+
disabled
|
|
1251
|
+
aria-label="Go to first page"
|
|
1252
|
+
>
|
|
1253
|
+
<i class="fas fa-angle-double-left" aria-hidden="true"></i>
|
|
1254
|
+
</button>
|
|
1255
|
+
</div>
|
|
1256
|
+
<div class="pf-c-pagination__nav-control pf-m-prev">
|
|
1257
|
+
<button
|
|
1258
|
+
class="pf-c-button pf-m-plain"
|
|
1259
|
+
type="button"
|
|
1260
|
+
disabled
|
|
1261
|
+
aria-label="Go to previous page"
|
|
1262
|
+
>
|
|
1263
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
1264
|
+
</button>
|
|
1265
|
+
</div>
|
|
1266
|
+
<div class="pf-c-pagination__nav-page-select">
|
|
1267
|
+
<input
|
|
1268
|
+
class="pf-c-form-control"
|
|
1269
|
+
aria-label="Current page"
|
|
1270
|
+
type="number"
|
|
1271
|
+
min="1"
|
|
1272
|
+
max="4"
|
|
1273
|
+
value="1"
|
|
1274
|
+
/>
|
|
1275
|
+
<span aria-hidden="true">of 4</span>
|
|
1276
|
+
</div>
|
|
1277
|
+
<div class="pf-c-pagination__nav-control pf-m-next">
|
|
1278
|
+
<button
|
|
1279
|
+
class="pf-c-button pf-m-plain"
|
|
1280
|
+
type="button"
|
|
1281
|
+
aria-label="Go to next page"
|
|
1282
|
+
>
|
|
1283
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1284
|
+
</button>
|
|
1285
|
+
</div>
|
|
1286
|
+
<div class="pf-c-pagination__nav-control pf-m-last">
|
|
1287
|
+
<button
|
|
1288
|
+
class="pf-c-button pf-m-plain"
|
|
1289
|
+
type="button"
|
|
1290
|
+
aria-label="Go to last page"
|
|
1291
|
+
>
|
|
1292
|
+
<i class="fas fa-angle-double-right" aria-hidden="true"></i>
|
|
1293
|
+
</button>
|
|
1294
|
+
</div>
|
|
1295
|
+
</nav>
|
|
1296
|
+
</div>
|
|
1297
|
+
|
|
1298
|
+
```
|
|
1299
|
+
|
|
1198
1300
|
## Documentation
|
|
1199
1301
|
|
|
1200
1302
|
Note: `<button>` or `<a>` elements can be used in `.pf-c-pagination__nav-page-select`.
|
|
1201
1303
|
|
|
1202
1304
|
### Accessibility
|
|
1203
1305
|
|
|
1204
|
-
| Attribute
|
|
1205
|
-
|
|
|
1206
|
-
| `aria-label`
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
|
1211
|
-
| --------------- | ---------------------------------------------------------- | -------------------------------------------- |
|
|
1212
|
-
| `type="number"` | `.pf-c-pagination` > `.pf-c-form-control` | Defines a field as a number. **Required** |
|
|
1213
|
-
| `value` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides initial integer value. **Required** |
|
|
1214
|
-
| `min` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides minimum integer value. **Required** |
|
|
1215
|
-
| `max` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides max integer value. **Required** |
|
|
1306
|
+
| Attribute | Applied to | Outcome |
|
|
1307
|
+
| --------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------- |
|
|
1308
|
+
| `aria-label` | `.pf-c-pagination__nav` | Provides an accessible name for pagination navigation element. **Required** |
|
|
1309
|
+
| `type="number"` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Defines a field as a number. **Required** |
|
|
1310
|
+
| `value` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides initial integer value. **Required** |
|
|
1311
|
+
| `min` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides minimum integer value. **Required** |
|
|
1312
|
+
| `max` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides max integer value. **Required** |
|
|
1216
1313
|
|
|
1217
1314
|
### Usage
|
|
1218
1315
|
|
|
1219
|
-
| Class
|
|
1220
|
-
|
|
|
1221
|
-
| `.pf-c-pagination`
|
|
1222
|
-
| `.pf-c-pagination__current`
|
|
1223
|
-
| `.pf-c-pagination__total-items`
|
|
1224
|
-
| `.pf-c-pagination__nav`
|
|
1225
|
-
| `.pf-c-pagination__nav-control`
|
|
1226
|
-
| `.pf-c-pagination__nav-page-select`
|
|
1227
|
-
| `.pf-m-display-summary{-on-[breakpoint]}`
|
|
1228
|
-
| `.pf-m-display-full{-on-[breakpoint]}`
|
|
1229
|
-
| `.pf-m-bottom`
|
|
1230
|
-
| `.pf-m-compact`
|
|
1231
|
-
| `.pf-m-static`
|
|
1232
|
-
| `.pf-m-sticky`
|
|
1233
|
-
| `.pf-m-
|
|
1234
|
-
| `.pf-m-
|
|
1235
|
-
| `.pf-m-
|
|
1236
|
-
| `.pf-m-
|
|
1316
|
+
| Class | Applied to | Outcome |
|
|
1317
|
+
| ----------------------------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1318
|
+
| `.pf-c-pagination` | `<div>` | Initiates pagination. |
|
|
1319
|
+
| `.pf-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`. |
|
|
1320
|
+
| `.pf-c-pagination__total-items` | `<div>` | Initiates element to replace the options menu on summary. |
|
|
1321
|
+
| `.pf-c-pagination__nav` | `<nav>` | Initiates pagination nav. |
|
|
1322
|
+
| `.pf-c-pagination__nav-control` | `<div>` | Initiates pagination nav control. |
|
|
1323
|
+
| `.pf-c-pagination__nav-page-select` | `<div>` | Initiates pagination nav page select. |
|
|
1324
|
+
| `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1325
|
+
| `.pf-m-display-full{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1326
|
+
| `.pf-m-bottom` | `.pf-c-pagination` | Modifies for bottom pagination component styles. |
|
|
1327
|
+
| `.pf-m-compact` | `.pf-c-pagination` | Modifies for compact pagination component styles. |
|
|
1328
|
+
| `.pf-m-static` | `.pf-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
|
|
1329
|
+
| `.pf-m-sticky` | `.pf-c-pagination` | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-c-pagination.pf-m-bottom`. |
|
|
1330
|
+
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies pagination horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1331
|
+
| `.pf-m-page-insets` | `.pf-c-pagination` | Modifies the pagination component padding/inset to visually match padding of page elements. |
|
|
1332
|
+
| `.pf-m-first` | `.pf-c-pagination__nav-control` | Indicates the control is for the first page button. |
|
|
1333
|
+
| `.pf-m-prev` | `.pf-c-pagination__nav-control` | Indicates the control is for the previous page button. |
|
|
1334
|
+
| `.pf-m-next` | `.pf-c-pagination__nav-control` | Indicates the control is for the next page button. |
|
|
1335
|
+
| `.pf-m-last` | `.pf-c-pagination__nav-control` | Indicates the control is for the last page button. |
|
|
@@ -267,7 +267,7 @@ cssPrefix: pf-c-slider
|
|
|
267
267
|
value="50"
|
|
268
268
|
aria-label="Slider value input"
|
|
269
269
|
/>
|
|
270
|
-
<span class="pf-c-input-group__text
|
|
270
|
+
<span class="pf-c-input-group__text">%</span>
|
|
271
271
|
</div>
|
|
272
272
|
</div>
|
|
273
273
|
</div>
|
|
@@ -297,7 +297,7 @@ cssPrefix: pf-c-slider
|
|
|
297
297
|
value="50"
|
|
298
298
|
aria-label="Slider value input"
|
|
299
299
|
/>
|
|
300
|
-
<span class="pf-c-input-group__text
|
|
300
|
+
<span class="pf-c-input-group__text">%</span>
|
|
301
301
|
</div>
|
|
302
302
|
</div>
|
|
303
303
|
</div>
|
|
@@ -329,7 +329,7 @@ cssPrefix: pf-c-slider
|
|
|
329
329
|
value="50"
|
|
330
330
|
aria-label="Slider value input"
|
|
331
331
|
/>
|
|
332
|
-
<span class="pf-c-input-group__text
|
|
332
|
+
<span class="pf-c-input-group__text">%</span>
|
|
333
333
|
</div>
|
|
334
334
|
</div>
|
|
335
335
|
</div>
|
|
@@ -393,7 +393,7 @@ cssPrefix: pf-c-slider
|
|
|
393
393
|
value="50"
|
|
394
394
|
aria-label="Slider value input"
|
|
395
395
|
/>
|
|
396
|
-
<span class="pf-c-input-group__text pf-m-
|
|
396
|
+
<span class="pf-c-input-group__text pf-m-disabled">%</span>
|
|
397
397
|
</div>
|
|
398
398
|
</div>
|
|
399
399
|
</div>
|
|
@@ -429,7 +429,7 @@ cssPrefix: pf-c-slider
|
|
|
429
429
|
value="50"
|
|
430
430
|
aria-label="Slider value input"
|
|
431
431
|
/>
|
|
432
|
-
<span class="pf-c-input-group__text
|
|
432
|
+
<span class="pf-c-input-group__text">%</span>
|
|
433
433
|
</div>
|
|
434
434
|
</div>
|
|
435
435
|
</div>
|
|
@@ -570,7 +570,7 @@ cssPrefix: pf-c-slider
|
|
|
570
570
|
value="50"
|
|
571
571
|
aria-label="Slider value input"
|
|
572
572
|
/>
|
|
573
|
-
<span class="pf-c-input-group__text pf-m-
|
|
573
|
+
<span class="pf-c-input-group__text pf-m-disabled">%</span>
|
|
574
574
|
</div>
|
|
575
575
|
</div>
|
|
576
576
|
</div>
|
|
@@ -7576,7 +7576,7 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
|
|
|
7576
7576
|
| `.pf-m-action` | `.pf-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
|
|
7577
7577
|
| `.pf-m-overflow` | `.pf-c-tabs__item` | Applies overflow menu styling to a tab item. |
|
|
7578
7578
|
| `.pf-m-expanded` | `.pf-c-tabs__item` | Applies expanded styling to the overflow menu tab item. |
|
|
7579
|
-
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies
|
|
7579
|
+
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
7580
7580
|
| `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
|
|
7581
7581
|
| `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
|
|
7582
7582
|
| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |
|