@patternfly/patternfly 4.181.0 → 4.182.2
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 +31 -0
- package/components/Masthead/masthead.css +21 -27
- package/components/Masthead/masthead.scss +21 -27
- package/components/MenuToggle/menu-toggle.css +135 -1
- package/components/MenuToggle/menu-toggle.scss +201 -2
- package/docs/components/MenuToggle/examples/MenuToggle.md +552 -20
- package/docs/components/Table/examples/Table.md +137 -48
- package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -3
- package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -3
- package/docs/demos/Masthead/examples/Masthead.md +2 -2
- package/docs/demos/Page/examples/Page.md +7 -7
- package/docs/demos/Table/examples/Table.md +13 -13
- package/package.json +1 -1
- package/patternfly-no-reset.css +156 -28
- package/patternfly.css +156 -28
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -249,6 +249,534 @@ cssPrefix: pf-c-menu-toggle
|
|
|
249
249
|
|
|
250
250
|
```
|
|
251
251
|
|
|
252
|
+
### Split button (checkbox)
|
|
253
|
+
|
|
254
|
+
```html
|
|
255
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-disabled">
|
|
256
|
+
<label class="pf-c-check pf-m-standalone">
|
|
257
|
+
<input
|
|
258
|
+
class="pf-c-check__input"
|
|
259
|
+
type="checkbox"
|
|
260
|
+
id="split-button-checkbox-disabled-example-input"
|
|
261
|
+
name="split-button-checkbox-disabled-example-input"
|
|
262
|
+
aria-label="Standalone input"
|
|
263
|
+
disabled
|
|
264
|
+
/>
|
|
265
|
+
</label>
|
|
266
|
+
<button
|
|
267
|
+
class="pf-c-menu-toggle__button"
|
|
268
|
+
type="button"
|
|
269
|
+
aria-expanded="false"
|
|
270
|
+
id="split-button-checkbox-disabled-example-toggle-button"
|
|
271
|
+
aria-label="Menu toggle"
|
|
272
|
+
disabled
|
|
273
|
+
>
|
|
274
|
+
<span class="pf-c-menu-toggle__controls">
|
|
275
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
276
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
277
|
+
</span>
|
|
278
|
+
</span>
|
|
279
|
+
</button>
|
|
280
|
+
</div>
|
|
281
|
+
|
|
282
|
+
<div class="pf-c-menu-toggle pf-m-split-button">
|
|
283
|
+
<label class="pf-c-check pf-m-standalone">
|
|
284
|
+
<input
|
|
285
|
+
class="pf-c-check__input"
|
|
286
|
+
type="checkbox"
|
|
287
|
+
id="split-button-checkbox-example-input"
|
|
288
|
+
name="split-button-checkbox-example-input"
|
|
289
|
+
aria-label="Standalone input"
|
|
290
|
+
/>
|
|
291
|
+
</label>
|
|
292
|
+
<button
|
|
293
|
+
class="pf-c-menu-toggle__button"
|
|
294
|
+
type="button"
|
|
295
|
+
aria-expanded="false"
|
|
296
|
+
id="split-button-checkbox-example-toggle-button"
|
|
297
|
+
aria-label="Menu toggle"
|
|
298
|
+
>
|
|
299
|
+
<span class="pf-c-menu-toggle__controls">
|
|
300
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
301
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
302
|
+
</span>
|
|
303
|
+
</span>
|
|
304
|
+
</button>
|
|
305
|
+
</div>
|
|
306
|
+
|
|
307
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-split-button">
|
|
308
|
+
<label class="pf-c-check pf-m-standalone">
|
|
309
|
+
<input
|
|
310
|
+
class="pf-c-check__input"
|
|
311
|
+
type="checkbox"
|
|
312
|
+
id="split-button-checkbox-expanded-example-input"
|
|
313
|
+
name="split-button-checkbox-expanded-example-input"
|
|
314
|
+
aria-label="Standalone input"
|
|
315
|
+
/>
|
|
316
|
+
</label>
|
|
317
|
+
<button
|
|
318
|
+
class="pf-c-menu-toggle__button"
|
|
319
|
+
type="button"
|
|
320
|
+
aria-expanded="true"
|
|
321
|
+
id="split-button-checkbox-expanded-example-toggle-button"
|
|
322
|
+
aria-label="Menu toggle"
|
|
323
|
+
>
|
|
324
|
+
<span class="pf-c-menu-toggle__controls">
|
|
325
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
326
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
327
|
+
</span>
|
|
328
|
+
</span>
|
|
329
|
+
</button>
|
|
330
|
+
</div>
|
|
331
|
+
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
### Split button (checkbox with toggle text)
|
|
335
|
+
|
|
336
|
+
```html
|
|
337
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-disabled">
|
|
338
|
+
<label
|
|
339
|
+
class="pf-c-check"
|
|
340
|
+
for="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
341
|
+
>
|
|
342
|
+
<input
|
|
343
|
+
class="pf-c-check__input"
|
|
344
|
+
type="checkbox"
|
|
345
|
+
id="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
346
|
+
name="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
347
|
+
disabled
|
|
348
|
+
/>
|
|
349
|
+
<span class="pf-c-check__label pf-m-disabled">10 selected</span>
|
|
350
|
+
</label>
|
|
351
|
+
<button
|
|
352
|
+
class="pf-c-menu-toggle__button"
|
|
353
|
+
type="button"
|
|
354
|
+
aria-expanded="false"
|
|
355
|
+
id="split-button-checkbox-with-toggle-text-disabled-example-toggle-button"
|
|
356
|
+
aria-label="Menu toggle"
|
|
357
|
+
disabled
|
|
358
|
+
>
|
|
359
|
+
<span class="pf-c-menu-toggle__controls">
|
|
360
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
361
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
362
|
+
</span>
|
|
363
|
+
</span>
|
|
364
|
+
</button>
|
|
365
|
+
</div>
|
|
366
|
+
|
|
367
|
+
<div class="pf-c-menu-toggle pf-m-split-button">
|
|
368
|
+
<label
|
|
369
|
+
class="pf-c-check"
|
|
370
|
+
for="split-button-checkbox-with-toggle-text-example-input"
|
|
371
|
+
>
|
|
372
|
+
<input
|
|
373
|
+
class="pf-c-check__input"
|
|
374
|
+
type="checkbox"
|
|
375
|
+
id="split-button-checkbox-with-toggle-text-example-input"
|
|
376
|
+
name="split-button-checkbox-with-toggle-text-example-input"
|
|
377
|
+
/>
|
|
378
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
379
|
+
</label>
|
|
380
|
+
<button
|
|
381
|
+
class="pf-c-menu-toggle__button"
|
|
382
|
+
type="button"
|
|
383
|
+
aria-expanded="false"
|
|
384
|
+
id="split-button-checkbox-with-toggle-text-example-toggle-button"
|
|
385
|
+
aria-label="Menu toggle"
|
|
386
|
+
>
|
|
387
|
+
<span class="pf-c-menu-toggle__controls">
|
|
388
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
389
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
390
|
+
</span>
|
|
391
|
+
</span>
|
|
392
|
+
</button>
|
|
393
|
+
</div>
|
|
394
|
+
|
|
395
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-split-button">
|
|
396
|
+
<label
|
|
397
|
+
class="pf-c-check"
|
|
398
|
+
for="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
399
|
+
>
|
|
400
|
+
<input
|
|
401
|
+
class="pf-c-check__input"
|
|
402
|
+
type="checkbox"
|
|
403
|
+
id="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
404
|
+
name="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
405
|
+
/>
|
|
406
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
407
|
+
</label>
|
|
408
|
+
<button
|
|
409
|
+
class="pf-c-menu-toggle__button"
|
|
410
|
+
type="button"
|
|
411
|
+
aria-expanded="true"
|
|
412
|
+
id="split-button-checkbox-with-toggle-text-expanded-example-toggle-button"
|
|
413
|
+
aria-label="Menu toggle"
|
|
414
|
+
>
|
|
415
|
+
<span class="pf-c-menu-toggle__controls">
|
|
416
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
417
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
418
|
+
</span>
|
|
419
|
+
</span>
|
|
420
|
+
</button>
|
|
421
|
+
</div>
|
|
422
|
+
|
|
423
|
+
```
|
|
424
|
+
|
|
425
|
+
### Split button, primary
|
|
426
|
+
|
|
427
|
+
```html
|
|
428
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary">
|
|
429
|
+
<label
|
|
430
|
+
class="pf-c-check"
|
|
431
|
+
for="split-button-checkbox-primary-disabled-example-input"
|
|
432
|
+
>
|
|
433
|
+
<input
|
|
434
|
+
class="pf-c-check__input"
|
|
435
|
+
type="checkbox"
|
|
436
|
+
id="split-button-checkbox-primary-disabled-example-input"
|
|
437
|
+
name="split-button-checkbox-primary-disabled-example-input"
|
|
438
|
+
disabled
|
|
439
|
+
/>
|
|
440
|
+
<span class="pf-c-check__label pf-m-disabled">10 selected</span>
|
|
441
|
+
</label>
|
|
442
|
+
<button
|
|
443
|
+
class="pf-c-menu-toggle__button"
|
|
444
|
+
type="button"
|
|
445
|
+
aria-expanded="false"
|
|
446
|
+
id="split-button-checkbox-primary-disabled-example-toggle-button"
|
|
447
|
+
aria-label="Menu toggle"
|
|
448
|
+
disabled
|
|
449
|
+
>
|
|
450
|
+
<span class="pf-c-menu-toggle__controls">
|
|
451
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
452
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
453
|
+
</span>
|
|
454
|
+
</span>
|
|
455
|
+
</button>
|
|
456
|
+
</div>
|
|
457
|
+
|
|
458
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-primary">
|
|
459
|
+
<label class="pf-c-check" for="split-button-checkbox-primary-example-input">
|
|
460
|
+
<input
|
|
461
|
+
class="pf-c-check__input"
|
|
462
|
+
type="checkbox"
|
|
463
|
+
id="split-button-checkbox-primary-example-input"
|
|
464
|
+
name="split-button-checkbox-primary-example-input"
|
|
465
|
+
/>
|
|
466
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
467
|
+
</label>
|
|
468
|
+
<button
|
|
469
|
+
class="pf-c-menu-toggle__button"
|
|
470
|
+
type="button"
|
|
471
|
+
aria-expanded="false"
|
|
472
|
+
id="split-button-checkbox-primary-example-toggle-button"
|
|
473
|
+
aria-label="Menu toggle"
|
|
474
|
+
>
|
|
475
|
+
<span class="pf-c-menu-toggle__controls">
|
|
476
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
477
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
478
|
+
</span>
|
|
479
|
+
</span>
|
|
480
|
+
</button>
|
|
481
|
+
</div>
|
|
482
|
+
|
|
483
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary">
|
|
484
|
+
<label
|
|
485
|
+
class="pf-c-check"
|
|
486
|
+
for="split-button-checkbox-primary-expanded-example-input"
|
|
487
|
+
>
|
|
488
|
+
<input
|
|
489
|
+
class="pf-c-check__input"
|
|
490
|
+
type="checkbox"
|
|
491
|
+
id="split-button-checkbox-primary-expanded-example-input"
|
|
492
|
+
name="split-button-checkbox-primary-expanded-example-input"
|
|
493
|
+
/>
|
|
494
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
495
|
+
</label>
|
|
496
|
+
<button
|
|
497
|
+
class="pf-c-menu-toggle__button"
|
|
498
|
+
type="button"
|
|
499
|
+
aria-expanded="true"
|
|
500
|
+
id="split-button-checkbox-primary-expanded-example-toggle-button"
|
|
501
|
+
aria-label="Menu toggle"
|
|
502
|
+
>
|
|
503
|
+
<span class="pf-c-menu-toggle__controls">
|
|
504
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
505
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
506
|
+
</span>
|
|
507
|
+
</span>
|
|
508
|
+
</button>
|
|
509
|
+
</div>
|
|
510
|
+
|
|
511
|
+
```
|
|
512
|
+
|
|
513
|
+
### Split button, secondary
|
|
514
|
+
|
|
515
|
+
```html
|
|
516
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary">
|
|
517
|
+
<label
|
|
518
|
+
class="pf-c-check"
|
|
519
|
+
for="split-button-checkbox-secondary-disabled-example-input"
|
|
520
|
+
>
|
|
521
|
+
<input
|
|
522
|
+
class="pf-c-check__input"
|
|
523
|
+
type="checkbox"
|
|
524
|
+
id="split-button-checkbox-secondary-disabled-example-input"
|
|
525
|
+
name="split-button-checkbox-secondary-disabled-example-input"
|
|
526
|
+
disabled
|
|
527
|
+
/>
|
|
528
|
+
<span class="pf-c-check__label pf-m-disabled">10 selected</span>
|
|
529
|
+
</label>
|
|
530
|
+
<button
|
|
531
|
+
class="pf-c-menu-toggle__button"
|
|
532
|
+
type="button"
|
|
533
|
+
aria-expanded="false"
|
|
534
|
+
id="split-button-checkbox-secondary-disabled-example-toggle-button"
|
|
535
|
+
aria-label="Menu toggle"
|
|
536
|
+
disabled
|
|
537
|
+
>
|
|
538
|
+
<span class="pf-c-menu-toggle__controls">
|
|
539
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
540
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
541
|
+
</span>
|
|
542
|
+
</span>
|
|
543
|
+
</button>
|
|
544
|
+
</div>
|
|
545
|
+
|
|
546
|
+
<div class="pf-c-menu-toggle pf-m-split-button pf-m-secondary">
|
|
547
|
+
<label class="pf-c-check" for="split-button-checkbox-secondary-example-input">
|
|
548
|
+
<input
|
|
549
|
+
class="pf-c-check__input"
|
|
550
|
+
type="checkbox"
|
|
551
|
+
id="split-button-checkbox-secondary-example-input"
|
|
552
|
+
name="split-button-checkbox-secondary-example-input"
|
|
553
|
+
/>
|
|
554
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
555
|
+
</label>
|
|
556
|
+
<button
|
|
557
|
+
class="pf-c-menu-toggle__button"
|
|
558
|
+
type="button"
|
|
559
|
+
aria-expanded="false"
|
|
560
|
+
id="split-button-checkbox-secondary-example-toggle-button"
|
|
561
|
+
aria-label="Menu toggle"
|
|
562
|
+
>
|
|
563
|
+
<span class="pf-c-menu-toggle__controls">
|
|
564
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
565
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
566
|
+
</span>
|
|
567
|
+
</span>
|
|
568
|
+
</button>
|
|
569
|
+
</div>
|
|
570
|
+
|
|
571
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary">
|
|
572
|
+
<label
|
|
573
|
+
class="pf-c-check"
|
|
574
|
+
for="split-button-checkbox-secondary-expanded-example-input"
|
|
575
|
+
>
|
|
576
|
+
<input
|
|
577
|
+
class="pf-c-check__input"
|
|
578
|
+
type="checkbox"
|
|
579
|
+
id="split-button-checkbox-secondary-expanded-example-input"
|
|
580
|
+
name="split-button-checkbox-secondary-expanded-example-input"
|
|
581
|
+
/>
|
|
582
|
+
<span class="pf-c-check__label">10 selected</span>
|
|
583
|
+
</label>
|
|
584
|
+
<button
|
|
585
|
+
class="pf-c-menu-toggle__button"
|
|
586
|
+
type="button"
|
|
587
|
+
aria-expanded="true"
|
|
588
|
+
id="split-button-checkbox-secondary-expanded-example-toggle-button"
|
|
589
|
+
aria-label="Menu toggle"
|
|
590
|
+
>
|
|
591
|
+
<span class="pf-c-menu-toggle__controls">
|
|
592
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
593
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
594
|
+
</span>
|
|
595
|
+
</span>
|
|
596
|
+
</button>
|
|
597
|
+
</div>
|
|
598
|
+
|
|
599
|
+
```
|
|
600
|
+
|
|
601
|
+
### Split button (action)
|
|
602
|
+
|
|
603
|
+
```html
|
|
604
|
+
<div class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-disabled">
|
|
605
|
+
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
606
|
+
<button
|
|
607
|
+
class="pf-c-menu-toggle__button"
|
|
608
|
+
type="button"
|
|
609
|
+
aria-expanded="false"
|
|
610
|
+
id="split-button-checkbox-with-toggle-action-disabled-example-toggle-button"
|
|
611
|
+
aria-label="Menu toggle"
|
|
612
|
+
disabled
|
|
613
|
+
>
|
|
614
|
+
<span class="pf-c-menu-toggle__controls">
|
|
615
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
616
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
617
|
+
</span>
|
|
618
|
+
</span>
|
|
619
|
+
</button>
|
|
620
|
+
</div>
|
|
621
|
+
|
|
622
|
+
<div class="pf-c-menu-toggle pf-m-action pf-m-split-button">
|
|
623
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
624
|
+
<button
|
|
625
|
+
class="pf-c-menu-toggle__button"
|
|
626
|
+
type="button"
|
|
627
|
+
aria-expanded="false"
|
|
628
|
+
id="split-button-checkbox-with-toggle-action-example-toggle-button"
|
|
629
|
+
aria-label="Menu toggle"
|
|
630
|
+
>
|
|
631
|
+
<span class="pf-c-menu-toggle__controls">
|
|
632
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
633
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
634
|
+
</span>
|
|
635
|
+
</span>
|
|
636
|
+
</button>
|
|
637
|
+
</div>
|
|
638
|
+
|
|
639
|
+
<div class="pf-c-menu-toggle pf-m-expanded pf-m-action pf-m-split-button">
|
|
640
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
641
|
+
<button
|
|
642
|
+
class="pf-c-menu-toggle__button"
|
|
643
|
+
type="button"
|
|
644
|
+
aria-expanded="true"
|
|
645
|
+
id="split-button-checkbox-with-toggle-action-expanded-example-toggle-button"
|
|
646
|
+
aria-label="Menu toggle"
|
|
647
|
+
>
|
|
648
|
+
<span class="pf-c-menu-toggle__controls">
|
|
649
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
650
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
651
|
+
</span>
|
|
652
|
+
</span>
|
|
653
|
+
</button>
|
|
654
|
+
</div>
|
|
655
|
+
|
|
656
|
+
```
|
|
657
|
+
|
|
658
|
+
### Split button, primary (action)
|
|
659
|
+
|
|
660
|
+
```html
|
|
661
|
+
<div
|
|
662
|
+
class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-disabled pf-m-primary"
|
|
663
|
+
>
|
|
664
|
+
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
665
|
+
<button
|
|
666
|
+
class="pf-c-menu-toggle__button"
|
|
667
|
+
type="button"
|
|
668
|
+
aria-expanded="false"
|
|
669
|
+
id="split-button-checkbox-with-toggle-action-primary-disabled-example-toggle-button"
|
|
670
|
+
aria-label="Menu toggle"
|
|
671
|
+
disabled
|
|
672
|
+
>
|
|
673
|
+
<span class="pf-c-menu-toggle__controls">
|
|
674
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
675
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
676
|
+
</span>
|
|
677
|
+
</span>
|
|
678
|
+
</button>
|
|
679
|
+
</div>
|
|
680
|
+
|
|
681
|
+
<div class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-primary">
|
|
682
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
683
|
+
<button
|
|
684
|
+
class="pf-c-menu-toggle__button"
|
|
685
|
+
type="button"
|
|
686
|
+
aria-expanded="false"
|
|
687
|
+
id="split-button-checkbox-with-toggle-action-primary-example-toggle-button"
|
|
688
|
+
aria-label="Menu toggle"
|
|
689
|
+
>
|
|
690
|
+
<span class="pf-c-menu-toggle__controls">
|
|
691
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
692
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
693
|
+
</span>
|
|
694
|
+
</span>
|
|
695
|
+
</button>
|
|
696
|
+
</div>
|
|
697
|
+
|
|
698
|
+
<div
|
|
699
|
+
class="pf-c-menu-toggle pf-m-expanded pf-m-action pf-m-split-button pf-m-primary"
|
|
700
|
+
>
|
|
701
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
702
|
+
<button
|
|
703
|
+
class="pf-c-menu-toggle__button"
|
|
704
|
+
type="button"
|
|
705
|
+
aria-expanded="true"
|
|
706
|
+
id="split-button-checkbox-with-toggle-action-primary-expanded-example-toggle-button"
|
|
707
|
+
aria-label="Menu toggle"
|
|
708
|
+
>
|
|
709
|
+
<span class="pf-c-menu-toggle__controls">
|
|
710
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
711
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
712
|
+
</span>
|
|
713
|
+
</span>
|
|
714
|
+
</button>
|
|
715
|
+
</div>
|
|
716
|
+
|
|
717
|
+
```
|
|
718
|
+
|
|
719
|
+
### Split button, secondary (action)
|
|
720
|
+
|
|
721
|
+
```html
|
|
722
|
+
<div
|
|
723
|
+
class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-disabled pf-m-secondary"
|
|
724
|
+
>
|
|
725
|
+
<button class="pf-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
726
|
+
<button
|
|
727
|
+
class="pf-c-menu-toggle__button"
|
|
728
|
+
type="button"
|
|
729
|
+
aria-expanded="false"
|
|
730
|
+
id="split-button-checkbox-with-toggle-action-secondary-disabled-example-toggle-button"
|
|
731
|
+
aria-label="Menu toggle"
|
|
732
|
+
disabled
|
|
733
|
+
>
|
|
734
|
+
<span class="pf-c-menu-toggle__controls">
|
|
735
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
736
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
737
|
+
</span>
|
|
738
|
+
</span>
|
|
739
|
+
</button>
|
|
740
|
+
</div>
|
|
741
|
+
|
|
742
|
+
<div class="pf-c-menu-toggle pf-m-action pf-m-split-button pf-m-secondary">
|
|
743
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
744
|
+
<button
|
|
745
|
+
class="pf-c-menu-toggle__button"
|
|
746
|
+
type="button"
|
|
747
|
+
aria-expanded="false"
|
|
748
|
+
id="split-button-checkbox-with-toggle-action-secondary-example-toggle-button"
|
|
749
|
+
aria-label="Menu toggle"
|
|
750
|
+
>
|
|
751
|
+
<span class="pf-c-menu-toggle__controls">
|
|
752
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
753
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
754
|
+
</span>
|
|
755
|
+
</span>
|
|
756
|
+
</button>
|
|
757
|
+
</div>
|
|
758
|
+
|
|
759
|
+
<div
|
|
760
|
+
class="pf-c-menu-toggle pf-m-expanded pf-m-action pf-m-split-button pf-m-secondary"
|
|
761
|
+
>
|
|
762
|
+
<button class="pf-c-menu-toggle__button" type="button">Action</button>
|
|
763
|
+
<button
|
|
764
|
+
class="pf-c-menu-toggle__button"
|
|
765
|
+
type="button"
|
|
766
|
+
aria-expanded="true"
|
|
767
|
+
id="split-button-checkbox-with-toggle-action-secondary-expanded-example-toggle-button"
|
|
768
|
+
aria-label="Menu toggle"
|
|
769
|
+
>
|
|
770
|
+
<span class="pf-c-menu-toggle__controls">
|
|
771
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
772
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
773
|
+
</span>
|
|
774
|
+
</span>
|
|
775
|
+
</button>
|
|
776
|
+
</div>
|
|
777
|
+
|
|
778
|
+
```
|
|
779
|
+
|
|
252
780
|
### With icon/image and text
|
|
253
781
|
|
|
254
782
|
```html
|
|
@@ -372,26 +900,30 @@ cssPrefix: pf-c-menu-toggle
|
|
|
372
900
|
|
|
373
901
|
### Accessibility
|
|
374
902
|
|
|
375
|
-
| Class | Applied to
|
|
376
|
-
| ------------------------------- |
|
|
377
|
-
| `aria-expanded="true"` | `.pf-c-menu-toggle`
|
|
378
|
-
| `aria-expanded="false"` | `.pf-c-menu-toggle`
|
|
379
|
-
| `aria-label="Descriptive text"` | `.pf-c-menu-toggle.pf-m-plain`
|
|
380
|
-
| `disabled` | `.pf-c-menu-toggle`
|
|
903
|
+
| Class | Applied to | Outcome |
|
|
904
|
+
| ------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------- |
|
|
905
|
+
| `aria-expanded="true"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. |
|
|
906
|
+
| `aria-expanded="false"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
|
|
907
|
+
| `aria-label="Descriptive text"` | `.pf-c-menu-toggle.pf-m-plain` | Gives the plain menu toggle component an accessible label. |
|
|
908
|
+
| `disabled` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. |
|
|
381
909
|
|
|
382
910
|
### Usage
|
|
383
911
|
|
|
384
|
-
| Class | Applied
|
|
385
|
-
| -------------------------------- |
|
|
386
|
-
| `.pf-c-menu-toggle` | `<button>`
|
|
387
|
-
| `.pf-c-menu-toggle__icon` | `<span>`
|
|
388
|
-
| `.pf-c-menu-toggle__text` | `<span>`
|
|
389
|
-
| `.pf-c-menu-toggle__count` | `<span>`
|
|
390
|
-
| `.pf-c-menu-toggle__controls` | `<span>`
|
|
391
|
-
| `.pf-c-menu-toggle__toggle-icon` | `<span>`
|
|
392
|
-
| `.pf-
|
|
393
|
-
| `.pf-m-
|
|
394
|
-
| `.pf-m-
|
|
395
|
-
| `.pf-m-
|
|
396
|
-
| `.pf-m-
|
|
397
|
-
| `.pf-m-
|
|
912
|
+
| Class | Applied | Outcome |
|
|
913
|
+
| -------------------------------- | ------------------------------------- | -------------------------------------------------------------------------- |
|
|
914
|
+
| `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
|
|
915
|
+
| `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon/image. |
|
|
916
|
+
| `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
|
|
917
|
+
| `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
|
|
918
|
+
| `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
|
|
919
|
+
| `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
|
|
920
|
+
| `.pf-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
|
|
921
|
+
| `.pf-m-split-button` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
|
|
922
|
+
| `.pf-m-action` | `.pf-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
|
|
923
|
+
| `.pf-m-disabled` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
|
|
924
|
+
| `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
|
|
925
|
+
| `.pf-m-secondary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
|
|
926
|
+
| `.pf-m-text` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
|
|
927
|
+
| `.pf-m-plain` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
|
|
928
|
+
| `.pf-m-expanded` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
|
|
929
|
+
| `.pf-m-full-height` | `.pf-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
|