@patternfly/patternfly 4.173.0 → 4.174.0
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.
|
@@ -236,6 +236,181 @@ These classes can be used to ensure that the table changes between the tabular a
|
|
|
236
236
|
| `.fa-long-arrow-alt-up` | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within ascending sorted and selected, sortable table header. **Required for sortable table columns** |
|
|
237
237
|
| `.fa-long-arrow-alt-down` | `.pf-c-table__sort > .pf-c-table__button > .pf-c-table__sort-indicator > .fas` | Initiates icon within descending sorted and selected, sortable table header. **Required for sortable table columns** |
|
|
238
238
|
|
|
239
|
+
### Overflow menu usage, mobile
|
|
240
|
+
|
|
241
|
+
```html
|
|
242
|
+
<table
|
|
243
|
+
class="pf-c-table pf-m-grid"
|
|
244
|
+
role="grid"
|
|
245
|
+
aria-label="This is a simple table example"
|
|
246
|
+
id="table-with-expanded-overflow-menu-mobile"
|
|
247
|
+
>
|
|
248
|
+
<caption>This is the table caption</caption>
|
|
249
|
+
<thead>
|
|
250
|
+
<tr role="row">
|
|
251
|
+
<th role="columnheader" scope="col">Repositories</th>
|
|
252
|
+
<th role="columnheader" scope="col">Branches</th>
|
|
253
|
+
<th role="columnheader" scope="col">Pull requests</th>
|
|
254
|
+
<th
|
|
255
|
+
class="pf-m-action pf-m-fit-content pf-c-table__action"
|
|
256
|
+
role="columnheader"
|
|
257
|
+
scope="col"
|
|
258
|
+
>Overflow actions</th>
|
|
259
|
+
</tr>
|
|
260
|
+
</thead>
|
|
261
|
+
|
|
262
|
+
<tbody role="rowgroup">
|
|
263
|
+
<tr role="row">
|
|
264
|
+
<td role="cell" data-label="Repository name">Repository 1</td>
|
|
265
|
+
<td role="cell" data-label="Branches">10</td>
|
|
266
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
267
|
+
<td class="pf-c-table__action" role="cell">
|
|
268
|
+
<div
|
|
269
|
+
class="pf-c-overflow-menu"
|
|
270
|
+
id="table-with-expanded-overflow-menu-mobile-overflow-menu-1"
|
|
271
|
+
>
|
|
272
|
+
<div class="pf-c-overflow-menu__control">
|
|
273
|
+
<div class="pf-c-dropdown pf-m-expanded">
|
|
274
|
+
<button
|
|
275
|
+
class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
|
|
276
|
+
type="button"
|
|
277
|
+
id="table-with-expanded-overflow-menu-mobile-overflow-menu-1-dropdown-toggle"
|
|
278
|
+
aria-label="Generic options"
|
|
279
|
+
aria-expanded="true"
|
|
280
|
+
>
|
|
281
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
282
|
+
</button>
|
|
283
|
+
<ul
|
|
284
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
285
|
+
aria-labelledby="table-with-expanded-overflow-menu-mobile-overflow-menu-1-dropdown-toggle"
|
|
286
|
+
>
|
|
287
|
+
<li>
|
|
288
|
+
<button class="pf-c-dropdown__menu-item">Start</button>
|
|
289
|
+
</li>
|
|
290
|
+
<li>
|
|
291
|
+
<button class="pf-c-dropdown__menu-item">Stop</button>
|
|
292
|
+
</li>
|
|
293
|
+
</ul>
|
|
294
|
+
</div>
|
|
295
|
+
</div>
|
|
296
|
+
</div>
|
|
297
|
+
</td>
|
|
298
|
+
</tr>
|
|
299
|
+
|
|
300
|
+
<tr role="row">
|
|
301
|
+
<td role="cell" data-label="Repository name">Repository 2</td>
|
|
302
|
+
<td role="cell" data-label="Branches">10</td>
|
|
303
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
304
|
+
<td class="pf-c-table__action" role="cell">
|
|
305
|
+
<div
|
|
306
|
+
class="pf-c-overflow-menu"
|
|
307
|
+
id="table-with-expanded-overflow-menu-mobile-overflow-menu-2"
|
|
308
|
+
>
|
|
309
|
+
<div class="pf-c-overflow-menu__control">
|
|
310
|
+
<div class="pf-c-dropdown">
|
|
311
|
+
<button
|
|
312
|
+
class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
|
|
313
|
+
type="button"
|
|
314
|
+
id="table-with-expanded-overflow-menu-mobile-overflow-menu-2-dropdown-toggle"
|
|
315
|
+
aria-label="Generic options"
|
|
316
|
+
aria-expanded="true"
|
|
317
|
+
>
|
|
318
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
319
|
+
</button>
|
|
320
|
+
<ul
|
|
321
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
322
|
+
aria-labelledby="table-with-expanded-overflow-menu-mobile-overflow-menu-2-dropdown-toggle"
|
|
323
|
+
hidden
|
|
324
|
+
>
|
|
325
|
+
<li>
|
|
326
|
+
<button class="pf-c-dropdown__menu-item">Start</button>
|
|
327
|
+
</li>
|
|
328
|
+
<li>
|
|
329
|
+
<button class="pf-c-dropdown__menu-item">Stop</button>
|
|
330
|
+
</li>
|
|
331
|
+
</ul>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
</div>
|
|
335
|
+
</td>
|
|
336
|
+
</tr>
|
|
337
|
+
</tbody>
|
|
338
|
+
</table>
|
|
339
|
+
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
### Overflow menu usage, desktop
|
|
343
|
+
|
|
344
|
+
```html
|
|
345
|
+
<table
|
|
346
|
+
class="pf-c-table"
|
|
347
|
+
aria-label="This is a simple table example"
|
|
348
|
+
id="table-with-expanded-overflow-menu-desktop"
|
|
349
|
+
>
|
|
350
|
+
<caption>This is the table caption</caption>
|
|
351
|
+
<thead>
|
|
352
|
+
<tr>
|
|
353
|
+
<th scope="col">Repositories</th>
|
|
354
|
+
<th scope="col">Branches</th>
|
|
355
|
+
<th scope="col">Pull requests</th>
|
|
356
|
+
<th
|
|
357
|
+
class="pf-m-action pf-m-fit-content pf-c-table__action"
|
|
358
|
+
scope="col"
|
|
359
|
+
>Overflow actions</th>
|
|
360
|
+
</tr>
|
|
361
|
+
</thead>
|
|
362
|
+
|
|
363
|
+
<tbody>
|
|
364
|
+
<tr>
|
|
365
|
+
<td role="cell" data-label="Repository name">Repository 1</td>
|
|
366
|
+
<td role="cell" data-label="Branches">10</td>
|
|
367
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
368
|
+
<td class="pf-c-table__action" role="cell">
|
|
369
|
+
<div
|
|
370
|
+
class="pf-c-overflow-menu"
|
|
371
|
+
id="table-with-expanded-overflow-menu-desktop-overflow-menu-1"
|
|
372
|
+
>
|
|
373
|
+
<div class="pf-c-overflow-menu__content">
|
|
374
|
+
<div class="pf-c-overflow-menu__group pf-m-button-group">
|
|
375
|
+
<div class="pf-c-overflow-menu__item">
|
|
376
|
+
<button class="pf-c-button pf-m-primary" type="button">Start</button>
|
|
377
|
+
</div>
|
|
378
|
+
<div class="pf-c-overflow-menu__item">
|
|
379
|
+
<button class="pf-c-button pf-m-secondary" type="button">Stop</button>
|
|
380
|
+
</div>
|
|
381
|
+
</div>
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
384
|
+
</td>
|
|
385
|
+
</tr>
|
|
386
|
+
|
|
387
|
+
<tr>
|
|
388
|
+
<td role="cell" data-label="Repository name">Repository 2</td>
|
|
389
|
+
<td role="cell" data-label="Branches">10</td>
|
|
390
|
+
<td role="cell" data-label="Pull requests">25</td>
|
|
391
|
+
<td class="pf-c-table__action" role="cell">
|
|
392
|
+
<div
|
|
393
|
+
class="pf-c-overflow-menu"
|
|
394
|
+
id="table-with-expanded-overflow-menu-desktop-overflow-menu-2"
|
|
395
|
+
>
|
|
396
|
+
<div class="pf-c-overflow-menu__content">
|
|
397
|
+
<div class="pf-c-overflow-menu__group pf-m-button-group">
|
|
398
|
+
<div class="pf-c-overflow-menu__item">
|
|
399
|
+
<button class="pf-c-button pf-m-primary" type="button">Start</button>
|
|
400
|
+
</div>
|
|
401
|
+
<div class="pf-c-overflow-menu__item">
|
|
402
|
+
<button class="pf-c-button pf-m-secondary" type="button">Stop</button>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
</div>
|
|
407
|
+
</td>
|
|
408
|
+
</tr>
|
|
409
|
+
</tbody>
|
|
410
|
+
</table>
|
|
411
|
+
|
|
412
|
+
```
|
|
413
|
+
|
|
239
414
|
## With checkboxes, radio select, and actions
|
|
240
415
|
|
|
241
416
|
### Checkboxes and actions example
|