@patternfly/patternfly 6.1.0-prerelease.1 → 6.1.0-prerelease.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/components/CodeEditor/code-editor.css +15 -0
- package/components/CodeEditor/code-editor.scss +16 -1
- package/components/Table/table-grid.css +12 -12
- package/components/Table/table-grid.scss +4 -4
- package/components/Table/table-tree-view.css +4 -4
- package/components/Table/table-tree-view.scss +4 -4
- package/components/_index.css +31 -16
- package/docs/components/CodeEditor/examples/CodeEditor.css +3 -0
- package/docs/components/CodeEditor/examples/CodeEditor.md +158 -7
- package/docs/components/InlineEdit/examples/InlineEdit.md +3 -18
- package/docs/components/MenuToggle/examples/MenuToggle.md +1193 -536
- package/docs/components/Table/examples/Table.md +466 -2524
- package/docs/demos/Card/examples/Card.css +4 -0
- package/docs/demos/Card/examples/Card.md +13 -21
- package/docs/demos/DataList/examples/DataList.md +5 -30
- package/docs/demos/DescriptionList/examples/DescriptionList.md +5 -30
- package/docs/demos/Table/examples/Table.md +161 -924
- package/docs/demos/Tabs/examples/Tabs.md +6 -36
- package/docs/demos/Toolbar/examples/Toolbar.md +12 -72
- package/package.json +3 -3
- package/patternfly-no-globals.css +31 -16
- package/patternfly.css +31 -16
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/functions.scss +6 -0
|
@@ -396,123 +396,180 @@ cssPrefix: pf-v6-c-menu-toggle
|
|
|
396
396
|
|
|
397
397
|
```
|
|
398
398
|
|
|
399
|
-
###
|
|
399
|
+
### With icon/image and text
|
|
400
400
|
|
|
401
401
|
```html
|
|
402
|
-
<
|
|
403
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
404
|
-
|
|
402
|
+
<button
|
|
403
|
+
class="pf-v6-c-menu-toggle pf-m-secondary"
|
|
404
|
+
type="button"
|
|
405
|
+
aria-expanded="false"
|
|
405
406
|
>
|
|
406
|
-
<
|
|
407
|
-
<
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
407
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
408
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
409
|
+
</span>
|
|
410
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
411
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
412
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
413
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
414
|
+
</span>
|
|
415
|
+
</span>
|
|
416
|
+
</button>
|
|
417
|
+
|
|
418
|
+
|
|
419
|
+
<button
|
|
420
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-disabled"
|
|
421
|
+
type="button"
|
|
422
|
+
aria-expanded="false"
|
|
423
|
+
disabled
|
|
424
|
+
>
|
|
425
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
426
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
427
|
+
</span>
|
|
428
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
429
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
430
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
431
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
432
|
+
</span>
|
|
433
|
+
</span>
|
|
434
|
+
</button>
|
|
435
|
+
|
|
436
|
+
```
|
|
437
|
+
|
|
438
|
+
### With avatar and text
|
|
439
|
+
|
|
440
|
+
```html
|
|
441
|
+
<button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false">
|
|
442
|
+
<span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
|
|
443
|
+
<img
|
|
444
|
+
class="pf-v6-c-avatar pf-m-sm"
|
|
445
|
+
alt="Avatar image"
|
|
446
|
+
src="/assets/images/img_avatar-light.svg"
|
|
413
447
|
/>
|
|
414
|
-
</
|
|
415
|
-
<
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
id="split-button-checkbox-example-toggle-button"
|
|
420
|
-
aria-label="Menu toggle"
|
|
421
|
-
>
|
|
422
|
-
<span class="pf-v6-c-menu-toggle__controls">
|
|
423
|
-
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
424
|
-
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
425
|
-
</span>
|
|
448
|
+
</span>
|
|
449
|
+
<span class="pf-v6-c-menu-toggle__text">Ned Username</span>
|
|
450
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
451
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
452
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
426
453
|
</span>
|
|
427
|
-
</
|
|
428
|
-
</
|
|
454
|
+
</span>
|
|
455
|
+
</button>
|
|
456
|
+
|
|
429
457
|
|
|
430
|
-
<
|
|
431
|
-
class="pf-v6-c-menu-toggle pf-m-expanded
|
|
432
|
-
|
|
458
|
+
<button
|
|
459
|
+
class="pf-v6-c-menu-toggle pf-m-expanded"
|
|
460
|
+
type="button"
|
|
461
|
+
aria-expanded="true"
|
|
433
462
|
>
|
|
434
|
-
<
|
|
435
|
-
<
|
|
436
|
-
class="pf-v6-c-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
name="split-button-checkbox-expanded-example-input"
|
|
440
|
-
aria-label="Select all items"
|
|
463
|
+
<span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
|
|
464
|
+
<img
|
|
465
|
+
class="pf-v6-c-avatar pf-m-sm"
|
|
466
|
+
alt="Avatar image"
|
|
467
|
+
src="/assets/images/img_avatar-light.svg"
|
|
441
468
|
/>
|
|
442
|
-
</
|
|
443
|
-
<
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
id="split-button-checkbox-expanded-example-toggle-button"
|
|
448
|
-
aria-label="Menu toggle"
|
|
449
|
-
>
|
|
450
|
-
<span class="pf-v6-c-menu-toggle__controls">
|
|
451
|
-
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
452
|
-
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
453
|
-
</span>
|
|
469
|
+
</span>
|
|
470
|
+
<span class="pf-v6-c-menu-toggle__text">Ned Username</span>
|
|
471
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
472
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
473
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
454
474
|
</span>
|
|
455
|
-
</
|
|
456
|
-
</
|
|
475
|
+
</span>
|
|
476
|
+
</button>
|
|
477
|
+
|
|
457
478
|
|
|
458
|
-
<
|
|
459
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
460
|
-
|
|
479
|
+
<button
|
|
480
|
+
class="pf-v6-c-menu-toggle pf-m-disabled"
|
|
481
|
+
type="button"
|
|
482
|
+
aria-expanded="false"
|
|
483
|
+
disabled
|
|
461
484
|
>
|
|
462
|
-
<
|
|
463
|
-
<
|
|
464
|
-
class="pf-v6-c-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
id="split-button-checkbox-disabled-example-input"
|
|
468
|
-
name="split-button-checkbox-disabled-example-input"
|
|
469
|
-
aria-label="Select all items"
|
|
485
|
+
<span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
|
|
486
|
+
<img
|
|
487
|
+
class="pf-v6-c-avatar pf-m-sm"
|
|
488
|
+
alt="Avatar image"
|
|
489
|
+
src="/assets/images/img_avatar-light.svg"
|
|
470
490
|
/>
|
|
471
|
-
</
|
|
472
|
-
<
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
id="split-button-checkbox-disabled-example-toggle-button"
|
|
477
|
-
aria-label="Menu toggle"
|
|
478
|
-
disabled
|
|
479
|
-
>
|
|
480
|
-
<span class="pf-v6-c-menu-toggle__controls">
|
|
481
|
-
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
482
|
-
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
483
|
-
</span>
|
|
491
|
+
</span>
|
|
492
|
+
<span class="pf-v6-c-menu-toggle__text">Ned Username</span>
|
|
493
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
494
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
495
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
484
496
|
</span>
|
|
485
|
-
</
|
|
486
|
-
</
|
|
497
|
+
</span>
|
|
498
|
+
</button>
|
|
487
499
|
|
|
488
500
|
```
|
|
489
501
|
|
|
490
|
-
###
|
|
502
|
+
### Full height
|
|
503
|
+
|
|
504
|
+
```html
|
|
505
|
+
<button
|
|
506
|
+
class="pf-v6-c-menu-toggle pf-m-full-height"
|
|
507
|
+
type="button"
|
|
508
|
+
aria-expanded="false"
|
|
509
|
+
>
|
|
510
|
+
<span class="pf-v6-c-menu-toggle__text">Full height</span>
|
|
511
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
512
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
513
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
514
|
+
</span>
|
|
515
|
+
</span>
|
|
516
|
+
</button>
|
|
517
|
+
|
|
518
|
+
```
|
|
519
|
+
|
|
520
|
+
### Full width
|
|
521
|
+
|
|
522
|
+
```html
|
|
523
|
+
<button
|
|
524
|
+
class="pf-v6-c-menu-toggle pf-m-full-width"
|
|
525
|
+
type="button"
|
|
526
|
+
aria-expanded="false"
|
|
527
|
+
>
|
|
528
|
+
<span class="pf-v6-c-menu-toggle__text">Full width</span>
|
|
529
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
530
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
531
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
532
|
+
</span>
|
|
533
|
+
</span>
|
|
534
|
+
</button>
|
|
491
535
|
|
|
492
|
-
|
|
536
|
+
```
|
|
537
|
+
|
|
538
|
+
### Typeahead
|
|
493
539
|
|
|
494
540
|
```html
|
|
495
541
|
<div
|
|
496
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
497
|
-
id="
|
|
542
|
+
class="pf-v6-c-menu-toggle pf-m-typeahead pf-m-full-width"
|
|
543
|
+
id="typeahead-example"
|
|
498
544
|
>
|
|
499
|
-
<
|
|
500
|
-
class="pf-v6-c-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
545
|
+
<div class="pf-v6-c-text-input-group pf-m-plain">
|
|
546
|
+
<div class="pf-v6-c-text-input-group__main">
|
|
547
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
548
|
+
<input
|
|
549
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
550
|
+
type="text"
|
|
551
|
+
value
|
|
552
|
+
aria-label="Type to filter"
|
|
553
|
+
/>
|
|
554
|
+
</span>
|
|
555
|
+
</div>
|
|
556
|
+
<div class="pf-v6-c-text-input-group__utilities">
|
|
557
|
+
<button
|
|
558
|
+
class="pf-v6-c-button pf-m-plain"
|
|
559
|
+
type="button"
|
|
560
|
+
aria-label="Clear input"
|
|
561
|
+
>
|
|
562
|
+
<span class="pf-v6-c-button__icon">
|
|
563
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
564
|
+
</span>
|
|
565
|
+
</button>
|
|
566
|
+
</div>
|
|
567
|
+
</div>
|
|
511
568
|
<button
|
|
512
569
|
class="pf-v6-c-menu-toggle__button"
|
|
513
570
|
type="button"
|
|
514
571
|
aria-expanded="false"
|
|
515
|
-
id="
|
|
572
|
+
id="typeahead-example-toggle-button"
|
|
516
573
|
aria-label="Menu toggle"
|
|
517
574
|
>
|
|
518
575
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -522,157 +579,144 @@ To add a label to a split toggle that will be linked to the checkbox, pass the t
|
|
|
522
579
|
</span>
|
|
523
580
|
</button>
|
|
524
581
|
</div>
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
582
|
+
|
|
583
|
+
```
|
|
584
|
+
|
|
585
|
+
### Status
|
|
586
|
+
|
|
587
|
+
```html
|
|
588
|
+
<button
|
|
589
|
+
class="pf-v6-c-menu-toggle pf-m-success"
|
|
590
|
+
type="button"
|
|
591
|
+
aria-expanded="false"
|
|
529
592
|
>
|
|
530
|
-
<
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
<input
|
|
535
|
-
class="pf-v6-c-check__input"
|
|
536
|
-
type="checkbox"
|
|
537
|
-
id="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
538
|
-
name="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
539
|
-
/>
|
|
540
|
-
<span class="pf-v6-c-check__label">Select all items</span>
|
|
541
|
-
</label>
|
|
542
|
-
<button
|
|
543
|
-
class="pf-v6-c-menu-toggle__button"
|
|
544
|
-
type="button"
|
|
545
|
-
aria-expanded="true"
|
|
546
|
-
id="split-button-checkbox-with-toggle-text-expanded-example-toggle-button"
|
|
547
|
-
aria-label="Menu toggle"
|
|
548
|
-
>
|
|
549
|
-
<span class="pf-v6-c-menu-toggle__controls">
|
|
550
|
-
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
551
|
-
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
552
|
-
</span>
|
|
593
|
+
<span class="pf-v6-c-menu-toggle__text">Success</span>
|
|
594
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
595
|
+
<span class="pf-v6-c-menu-toggle__status-icon">
|
|
596
|
+
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
553
597
|
</span>
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
598
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
599
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
600
|
+
</span>
|
|
601
|
+
</span>
|
|
602
|
+
</button>
|
|
603
|
+
|
|
604
|
+
<br />
|
|
605
|
+
<br />
|
|
606
|
+
|
|
607
|
+
<button
|
|
608
|
+
class="pf-v6-c-menu-toggle pf-m-warning"
|
|
609
|
+
type="button"
|
|
610
|
+
aria-expanded="false"
|
|
560
611
|
>
|
|
561
|
-
<
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
<input
|
|
566
|
-
class="pf-v6-c-check__input"
|
|
567
|
-
type="checkbox"
|
|
568
|
-
disabled
|
|
569
|
-
id="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
570
|
-
name="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
571
|
-
/>
|
|
572
|
-
<span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
|
|
573
|
-
</label>
|
|
574
|
-
<button
|
|
575
|
-
class="pf-v6-c-menu-toggle__button"
|
|
576
|
-
type="button"
|
|
577
|
-
aria-expanded="false"
|
|
578
|
-
id="split-button-checkbox-with-toggle-text-disabled-example-toggle-button"
|
|
579
|
-
aria-label="Menu toggle"
|
|
580
|
-
disabled
|
|
581
|
-
>
|
|
582
|
-
<span class="pf-v6-c-menu-toggle__controls">
|
|
583
|
-
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
584
|
-
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
585
|
-
</span>
|
|
612
|
+
<span class="pf-v6-c-menu-toggle__text">Warning</span>
|
|
613
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
614
|
+
<span class="pf-v6-c-menu-toggle__status-icon">
|
|
615
|
+
<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
|
|
586
616
|
</span>
|
|
587
|
-
|
|
588
|
-
|
|
617
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
618
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
619
|
+
</span>
|
|
620
|
+
</span>
|
|
621
|
+
</button>
|
|
622
|
+
|
|
623
|
+
<br />
|
|
624
|
+
<br />
|
|
625
|
+
|
|
626
|
+
<button
|
|
627
|
+
class="pf-v6-c-menu-toggle pf-m-danger"
|
|
628
|
+
type="button"
|
|
629
|
+
aria-expanded="false"
|
|
630
|
+
>
|
|
631
|
+
<span class="pf-v6-c-menu-toggle__text">Danger</span>
|
|
632
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
633
|
+
<span class="pf-v6-c-menu-toggle__status-icon">
|
|
634
|
+
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
|
|
635
|
+
</span>
|
|
636
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
637
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
638
|
+
</span>
|
|
639
|
+
</span>
|
|
640
|
+
</button>
|
|
589
641
|
|
|
590
642
|
```
|
|
591
643
|
|
|
592
|
-
###
|
|
644
|
+
### Placeholder
|
|
645
|
+
|
|
646
|
+
```html
|
|
647
|
+
<button
|
|
648
|
+
class="pf-v6-c-menu-toggle pf-m-placeholder"
|
|
649
|
+
type="button"
|
|
650
|
+
aria-expanded="false"
|
|
651
|
+
>
|
|
652
|
+
<span class="pf-v6-c-menu-toggle__text">Placeholder text</span>
|
|
653
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
654
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
655
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
656
|
+
</span>
|
|
657
|
+
</span>
|
|
658
|
+
</button>
|
|
659
|
+
|
|
660
|
+
```
|
|
661
|
+
|
|
662
|
+
### Split toggle
|
|
593
663
|
|
|
594
|
-
|
|
664
|
+
Shown with default, primary, and secondary styling
|
|
595
665
|
|
|
596
666
|
```html
|
|
597
667
|
<div
|
|
598
668
|
class="pf-v6-c-menu-toggle pf-m-split-button"
|
|
599
|
-
id="split-button-checkbox-with-toggle-
|
|
669
|
+
id="split-button-checkbox-with-toggle-action-example"
|
|
600
670
|
>
|
|
601
|
-
<
|
|
602
|
-
<input
|
|
603
|
-
class="pf-v6-c-check__input"
|
|
604
|
-
type="checkbox"
|
|
605
|
-
id="split-button-checkbox-with-toggle-button-text-example-input"
|
|
606
|
-
name="split-button-checkbox-with-toggle-button-text-example-input"
|
|
607
|
-
aria-label="Select all items"
|
|
608
|
-
/>
|
|
609
|
-
</label>
|
|
671
|
+
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
610
672
|
<button
|
|
611
|
-
class="pf-v6-c-menu-toggle__button
|
|
673
|
+
class="pf-v6-c-menu-toggle__button"
|
|
612
674
|
type="button"
|
|
613
675
|
aria-expanded="false"
|
|
614
|
-
id="split-button-checkbox-with-toggle-
|
|
676
|
+
id="split-button-checkbox-with-toggle-action-example-toggle-button"
|
|
615
677
|
aria-label="Menu toggle"
|
|
616
678
|
>
|
|
617
|
-
<span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
|
|
618
679
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
619
680
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
620
681
|
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
621
682
|
</span>
|
|
622
683
|
</span>
|
|
623
684
|
</button>
|
|
624
|
-
</div
|
|
685
|
+
</div>
|
|
686
|
+
|
|
625
687
|
<div
|
|
626
688
|
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
|
|
627
|
-
id="split-button-checkbox-with-toggle-
|
|
689
|
+
id="split-button-checkbox-with-toggle-action-expanded-example"
|
|
628
690
|
>
|
|
629
|
-
<
|
|
630
|
-
<input
|
|
631
|
-
class="pf-v6-c-check__input"
|
|
632
|
-
type="checkbox"
|
|
633
|
-
id="split-button-checkbox-with-toggle-button-text-expanded-example-input"
|
|
634
|
-
name="split-button-checkbox-with-toggle-button-text-expanded-example-input"
|
|
635
|
-
aria-label="Select all items"
|
|
636
|
-
/>
|
|
637
|
-
</label>
|
|
691
|
+
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
638
692
|
<button
|
|
639
|
-
class="pf-v6-c-menu-toggle__button
|
|
693
|
+
class="pf-v6-c-menu-toggle__button"
|
|
640
694
|
type="button"
|
|
641
695
|
aria-expanded="true"
|
|
642
|
-
id="split-button-checkbox-with-toggle-
|
|
696
|
+
id="split-button-checkbox-with-toggle-action-expanded-example-toggle-button"
|
|
643
697
|
aria-label="Menu toggle"
|
|
644
698
|
>
|
|
645
|
-
<span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
|
|
646
699
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
647
700
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
648
701
|
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
649
702
|
</span>
|
|
650
703
|
</span>
|
|
651
704
|
</button>
|
|
652
|
-
</div
|
|
705
|
+
</div>
|
|
706
|
+
|
|
653
707
|
<div
|
|
654
708
|
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
|
|
655
|
-
id="split-button-checkbox-with-toggle-
|
|
709
|
+
id="split-button-checkbox-with-toggle-action-disabled-example"
|
|
656
710
|
>
|
|
657
|
-
<
|
|
658
|
-
<input
|
|
659
|
-
class="pf-v6-c-check__input"
|
|
660
|
-
type="checkbox"
|
|
661
|
-
disabled
|
|
662
|
-
id="split-button-checkbox-with-toggle-button-text-disabled-example-input"
|
|
663
|
-
name="split-button-checkbox-with-toggle-button-text-disabled-example-input"
|
|
664
|
-
aria-label="Select all items"
|
|
665
|
-
/>
|
|
666
|
-
</label>
|
|
711
|
+
<button class="pf-v6-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
667
712
|
<button
|
|
668
|
-
class="pf-v6-c-menu-toggle__button
|
|
713
|
+
class="pf-v6-c-menu-toggle__button"
|
|
669
714
|
type="button"
|
|
670
715
|
aria-expanded="false"
|
|
671
|
-
id="split-button-checkbox-with-toggle-
|
|
716
|
+
id="split-button-checkbox-with-toggle-action-disabled-example-toggle-button"
|
|
672
717
|
aria-label="Menu toggle"
|
|
673
718
|
disabled
|
|
674
719
|
>
|
|
675
|
-
<span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
|
|
676
720
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
677
721
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
678
722
|
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
@@ -681,32 +725,19 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
681
725
|
</button>
|
|
682
726
|
</div>
|
|
683
727
|
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
### Split button, primary
|
|
728
|
+
<br />
|
|
729
|
+
<br />
|
|
687
730
|
|
|
688
|
-
```html
|
|
689
731
|
<div
|
|
690
732
|
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-primary"
|
|
691
|
-
id="split-button-checkbox-primary-example"
|
|
733
|
+
id="split-button-checkbox-with-toggle-action-primary-example"
|
|
692
734
|
>
|
|
693
|
-
<
|
|
694
|
-
class="pf-v6-c-check"
|
|
695
|
-
for="split-button-checkbox-primary-example-input"
|
|
696
|
-
>
|
|
697
|
-
<input
|
|
698
|
-
class="pf-v6-c-check__input"
|
|
699
|
-
type="checkbox"
|
|
700
|
-
id="split-button-checkbox-primary-example-input"
|
|
701
|
-
name="split-button-checkbox-primary-example-input"
|
|
702
|
-
/>
|
|
703
|
-
<span class="pf-v6-c-check__label">Select all items</span>
|
|
704
|
-
</label>
|
|
735
|
+
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
705
736
|
<button
|
|
706
737
|
class="pf-v6-c-menu-toggle__button"
|
|
707
738
|
type="button"
|
|
708
739
|
aria-expanded="false"
|
|
709
|
-
id="split-button-checkbox-primary-example-toggle-button"
|
|
740
|
+
id="split-button-checkbox-with-toggle-action-primary-example-toggle-button"
|
|
710
741
|
aria-label="Menu toggle"
|
|
711
742
|
>
|
|
712
743
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -719,25 +750,14 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
719
750
|
|
|
720
751
|
<div
|
|
721
752
|
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary"
|
|
722
|
-
id="split-button-checkbox-primary-expanded-example"
|
|
753
|
+
id="split-button-checkbox-with-toggle-action-primary-expanded-example"
|
|
723
754
|
>
|
|
724
|
-
<
|
|
725
|
-
class="pf-v6-c-check"
|
|
726
|
-
for="split-button-checkbox-primary-expanded-example-input"
|
|
727
|
-
>
|
|
728
|
-
<input
|
|
729
|
-
class="pf-v6-c-check__input"
|
|
730
|
-
type="checkbox"
|
|
731
|
-
id="split-button-checkbox-primary-expanded-example-input"
|
|
732
|
-
name="split-button-checkbox-primary-expanded-example-input"
|
|
733
|
-
/>
|
|
734
|
-
<span class="pf-v6-c-check__label">Select all items</span>
|
|
735
|
-
</label>
|
|
755
|
+
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
736
756
|
<button
|
|
737
757
|
class="pf-v6-c-menu-toggle__button"
|
|
738
758
|
type="button"
|
|
739
759
|
aria-expanded="true"
|
|
740
|
-
id="split-button-checkbox-primary-expanded-example-toggle-button"
|
|
760
|
+
id="split-button-checkbox-with-toggle-action-primary-expanded-example-toggle-button"
|
|
741
761
|
aria-label="Menu toggle"
|
|
742
762
|
>
|
|
743
763
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -750,26 +770,14 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
750
770
|
|
|
751
771
|
<div
|
|
752
772
|
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
|
|
753
|
-
id="split-button-checkbox-primary-disabled-example"
|
|
773
|
+
id="split-button-checkbox-with-toggle-action-primary-disabled-example"
|
|
754
774
|
>
|
|
755
|
-
<
|
|
756
|
-
class="pf-v6-c-check"
|
|
757
|
-
for="split-button-checkbox-primary-disabled-example-input"
|
|
758
|
-
>
|
|
759
|
-
<input
|
|
760
|
-
class="pf-v6-c-check__input"
|
|
761
|
-
type="checkbox"
|
|
762
|
-
disabled
|
|
763
|
-
id="split-button-checkbox-primary-disabled-example-input"
|
|
764
|
-
name="split-button-checkbox-primary-disabled-example-input"
|
|
765
|
-
/>
|
|
766
|
-
<span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
|
|
767
|
-
</label>
|
|
775
|
+
<button class="pf-v6-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
768
776
|
<button
|
|
769
777
|
class="pf-v6-c-menu-toggle__button"
|
|
770
778
|
type="button"
|
|
771
779
|
aria-expanded="false"
|
|
772
|
-
id="split-button-checkbox-primary-disabled-example-toggle-button"
|
|
780
|
+
id="split-button-checkbox-with-toggle-action-primary-disabled-example-toggle-button"
|
|
773
781
|
aria-label="Menu toggle"
|
|
774
782
|
disabled
|
|
775
783
|
>
|
|
@@ -781,32 +789,19 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
781
789
|
</button>
|
|
782
790
|
</div>
|
|
783
791
|
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
### Split button, secondary
|
|
792
|
+
<br />
|
|
793
|
+
<br />
|
|
787
794
|
|
|
788
|
-
```html
|
|
789
795
|
<div
|
|
790
796
|
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-secondary"
|
|
791
|
-
id="split-button-checkbox-secondary-example"
|
|
797
|
+
id="split-button-checkbox-with-toggle-action-secondary-example"
|
|
792
798
|
>
|
|
793
|
-
<
|
|
794
|
-
class="pf-v6-c-check"
|
|
795
|
-
for="split-button-checkbox-secondary-example-input"
|
|
796
|
-
>
|
|
797
|
-
<input
|
|
798
|
-
class="pf-v6-c-check__input"
|
|
799
|
-
type="checkbox"
|
|
800
|
-
id="split-button-checkbox-secondary-example-input"
|
|
801
|
-
name="split-button-checkbox-secondary-example-input"
|
|
802
|
-
/>
|
|
803
|
-
<span class="pf-v6-c-check__label">Select all items</span>
|
|
804
|
-
</label>
|
|
799
|
+
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
805
800
|
<button
|
|
806
801
|
class="pf-v6-c-menu-toggle__button"
|
|
807
802
|
type="button"
|
|
808
803
|
aria-expanded="false"
|
|
809
|
-
id="split-button-checkbox-secondary-example-toggle-button"
|
|
804
|
+
id="split-button-checkbox-with-toggle-action-secondary-example-toggle-button"
|
|
810
805
|
aria-label="Menu toggle"
|
|
811
806
|
>
|
|
812
807
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -819,25 +814,70 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
819
814
|
|
|
820
815
|
<div
|
|
821
816
|
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary"
|
|
822
|
-
id="split-button-checkbox-secondary-expanded-example"
|
|
817
|
+
id="split-button-checkbox-with-toggle-action-secondary-expanded-example"
|
|
823
818
|
>
|
|
824
|
-
<
|
|
825
|
-
|
|
826
|
-
|
|
819
|
+
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
820
|
+
<button
|
|
821
|
+
class="pf-v6-c-menu-toggle__button"
|
|
822
|
+
type="button"
|
|
823
|
+
aria-expanded="true"
|
|
824
|
+
id="split-button-checkbox-with-toggle-action-secondary-expanded-example-toggle-button"
|
|
825
|
+
aria-label="Menu toggle"
|
|
826
|
+
>
|
|
827
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
828
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
829
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
830
|
+
</span>
|
|
831
|
+
</span>
|
|
832
|
+
</button>
|
|
833
|
+
</div>
|
|
834
|
+
|
|
835
|
+
<div
|
|
836
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
|
|
837
|
+
id="split-button-checkbox-with-toggle-action-secondary-disabled-example"
|
|
838
|
+
>
|
|
839
|
+
<button class="pf-v6-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
840
|
+
<button
|
|
841
|
+
class="pf-v6-c-menu-toggle__button"
|
|
842
|
+
type="button"
|
|
843
|
+
aria-expanded="false"
|
|
844
|
+
id="split-button-checkbox-with-toggle-action-secondary-disabled-example-toggle-button"
|
|
845
|
+
aria-label="Menu toggle"
|
|
846
|
+
disabled
|
|
827
847
|
>
|
|
848
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
849
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
850
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
851
|
+
</span>
|
|
852
|
+
</span>
|
|
853
|
+
</button>
|
|
854
|
+
</div>
|
|
855
|
+
|
|
856
|
+
```
|
|
857
|
+
|
|
858
|
+
### Split toggle with checkbox
|
|
859
|
+
|
|
860
|
+
Shown with default, primary, and secondary styling
|
|
861
|
+
|
|
862
|
+
```html
|
|
863
|
+
<div
|
|
864
|
+
class="pf-v6-c-menu-toggle pf-m-split-button"
|
|
865
|
+
id="split-button-checkbox-example"
|
|
866
|
+
>
|
|
867
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
828
868
|
<input
|
|
829
869
|
class="pf-v6-c-check__input"
|
|
830
870
|
type="checkbox"
|
|
831
|
-
id="split-button-checkbox-
|
|
832
|
-
name="split-button-checkbox-
|
|
871
|
+
id="split-button-checkbox-example-input"
|
|
872
|
+
name="split-button-checkbox-example-input"
|
|
873
|
+
aria-label="Select all items"
|
|
833
874
|
/>
|
|
834
|
-
<span class="pf-v6-c-check__label">Select all items</span>
|
|
835
875
|
</label>
|
|
836
876
|
<button
|
|
837
877
|
class="pf-v6-c-menu-toggle__button"
|
|
838
878
|
type="button"
|
|
839
|
-
aria-expanded="
|
|
840
|
-
id="split-button-checkbox-
|
|
879
|
+
aria-expanded="false"
|
|
880
|
+
id="split-button-checkbox-example-toggle-button"
|
|
841
881
|
aria-label="Menu toggle"
|
|
842
882
|
>
|
|
843
883
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -849,27 +889,52 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
849
889
|
</div>
|
|
850
890
|
|
|
851
891
|
<div
|
|
852
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
853
|
-
id="split-button-checkbox-
|
|
892
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
|
|
893
|
+
id="split-button-checkbox-expanded-example"
|
|
854
894
|
>
|
|
855
|
-
<label
|
|
856
|
-
|
|
857
|
-
|
|
895
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
896
|
+
<input
|
|
897
|
+
class="pf-v6-c-check__input"
|
|
898
|
+
type="checkbox"
|
|
899
|
+
id="split-button-checkbox-expanded-example-input"
|
|
900
|
+
name="split-button-checkbox-expanded-example-input"
|
|
901
|
+
aria-label="Select all items"
|
|
902
|
+
/>
|
|
903
|
+
</label>
|
|
904
|
+
<button
|
|
905
|
+
class="pf-v6-c-menu-toggle__button"
|
|
906
|
+
type="button"
|
|
907
|
+
aria-expanded="true"
|
|
908
|
+
id="split-button-checkbox-expanded-example-toggle-button"
|
|
909
|
+
aria-label="Menu toggle"
|
|
858
910
|
>
|
|
911
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
912
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
913
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
914
|
+
</span>
|
|
915
|
+
</span>
|
|
916
|
+
</button>
|
|
917
|
+
</div>
|
|
918
|
+
|
|
919
|
+
<div
|
|
920
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
|
|
921
|
+
id="split-button-checkbox-disabled-example"
|
|
922
|
+
>
|
|
923
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
859
924
|
<input
|
|
860
925
|
class="pf-v6-c-check__input"
|
|
861
926
|
type="checkbox"
|
|
862
927
|
disabled
|
|
863
|
-
id="split-button-checkbox-
|
|
864
|
-
name="split-button-checkbox-
|
|
928
|
+
id="split-button-checkbox-disabled-example-input"
|
|
929
|
+
name="split-button-checkbox-disabled-example-input"
|
|
930
|
+
aria-label="Select all items"
|
|
865
931
|
/>
|
|
866
|
-
<span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
|
|
867
932
|
</label>
|
|
868
933
|
<button
|
|
869
934
|
class="pf-v6-c-menu-toggle__button"
|
|
870
935
|
type="button"
|
|
871
936
|
aria-expanded="false"
|
|
872
|
-
id="split-button-checkbox-
|
|
937
|
+
id="split-button-checkbox-disabled-example-toggle-button"
|
|
873
938
|
aria-label="Menu toggle"
|
|
874
939
|
disabled
|
|
875
940
|
>
|
|
@@ -881,21 +946,27 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
881
946
|
</button>
|
|
882
947
|
</div>
|
|
883
948
|
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
### Split button (action)
|
|
949
|
+
<br />
|
|
950
|
+
<br />
|
|
887
951
|
|
|
888
|
-
```html
|
|
889
952
|
<div
|
|
890
|
-
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-
|
|
891
|
-
id="split-button-checkbox-
|
|
953
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-primary"
|
|
954
|
+
id="split-button-primary-checkbox-example"
|
|
892
955
|
>
|
|
893
|
-
<
|
|
956
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
957
|
+
<input
|
|
958
|
+
class="pf-v6-c-check__input"
|
|
959
|
+
type="checkbox"
|
|
960
|
+
id="split-button-primary-checkbox-example-input"
|
|
961
|
+
name="split-button-primary-checkbox-example-input"
|
|
962
|
+
aria-label="Select all items"
|
|
963
|
+
/>
|
|
964
|
+
</label>
|
|
894
965
|
<button
|
|
895
966
|
class="pf-v6-c-menu-toggle__button"
|
|
896
967
|
type="button"
|
|
897
968
|
aria-expanded="false"
|
|
898
|
-
id="split-button-checkbox-
|
|
969
|
+
id="split-button-primary-checkbox-example-toggle-button"
|
|
899
970
|
aria-label="Menu toggle"
|
|
900
971
|
>
|
|
901
972
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -907,15 +978,23 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
907
978
|
</div>
|
|
908
979
|
|
|
909
980
|
<div
|
|
910
|
-
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-
|
|
911
|
-
id="split-button-checkbox-
|
|
981
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary"
|
|
982
|
+
id="split-button--primary-checkbox-expanded-example"
|
|
912
983
|
>
|
|
913
|
-
<
|
|
984
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
985
|
+
<input
|
|
986
|
+
class="pf-v6-c-check__input"
|
|
987
|
+
type="checkbox"
|
|
988
|
+
id="split-button--primary-checkbox-expanded-example-input"
|
|
989
|
+
name="split-button--primary-checkbox-expanded-example-input"
|
|
990
|
+
aria-label="Select all items"
|
|
991
|
+
/>
|
|
992
|
+
</label>
|
|
914
993
|
<button
|
|
915
994
|
class="pf-v6-c-menu-toggle__button"
|
|
916
995
|
type="button"
|
|
917
996
|
aria-expanded="true"
|
|
918
|
-
id="split-button-checkbox-
|
|
997
|
+
id="split-button--primary-checkbox-expanded-example-toggle-button"
|
|
919
998
|
aria-label="Menu toggle"
|
|
920
999
|
>
|
|
921
1000
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -927,15 +1006,24 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
927
1006
|
</div>
|
|
928
1007
|
|
|
929
1008
|
<div
|
|
930
|
-
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-
|
|
931
|
-
id="split-button-checkbox-
|
|
1009
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
|
|
1010
|
+
id="split-button--primary-checkbox-disabled-example"
|
|
932
1011
|
>
|
|
933
|
-
<
|
|
1012
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1013
|
+
<input
|
|
1014
|
+
class="pf-v6-c-check__input"
|
|
1015
|
+
type="checkbox"
|
|
1016
|
+
disabled
|
|
1017
|
+
id="split-button--primary-checkbox-disabled-example-input"
|
|
1018
|
+
name="split-button--primary-checkbox-disabled-example-input"
|
|
1019
|
+
aria-label="Select all items"
|
|
1020
|
+
/>
|
|
1021
|
+
</label>
|
|
934
1022
|
<button
|
|
935
1023
|
class="pf-v6-c-menu-toggle__button"
|
|
936
1024
|
type="button"
|
|
937
1025
|
aria-expanded="false"
|
|
938
|
-
id="split-button-checkbox-
|
|
1026
|
+
id="split-button--primary-checkbox-disabled-example-toggle-button"
|
|
939
1027
|
aria-label="Menu toggle"
|
|
940
1028
|
disabled
|
|
941
1029
|
>
|
|
@@ -947,21 +1035,27 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
947
1035
|
</button>
|
|
948
1036
|
</div>
|
|
949
1037
|
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
### Split button, primary (action)
|
|
1038
|
+
<br />
|
|
1039
|
+
<br />
|
|
953
1040
|
|
|
954
|
-
```html
|
|
955
1041
|
<div
|
|
956
|
-
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-
|
|
957
|
-
id="split-button-checkbox-
|
|
1042
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-secondary"
|
|
1043
|
+
id="split-button-secondary-checkbox-example"
|
|
958
1044
|
>
|
|
959
|
-
<
|
|
1045
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1046
|
+
<input
|
|
1047
|
+
class="pf-v6-c-check__input"
|
|
1048
|
+
type="checkbox"
|
|
1049
|
+
id="split-button-secondary-checkbox-example-input"
|
|
1050
|
+
name="split-button-secondary-checkbox-example-input"
|
|
1051
|
+
aria-label="Select all items"
|
|
1052
|
+
/>
|
|
1053
|
+
</label>
|
|
960
1054
|
<button
|
|
961
1055
|
class="pf-v6-c-menu-toggle__button"
|
|
962
1056
|
type="button"
|
|
963
1057
|
aria-expanded="false"
|
|
964
|
-
id="split-button-checkbox-
|
|
1058
|
+
id="split-button-secondary-checkbox-example-toggle-button"
|
|
965
1059
|
aria-label="Menu toggle"
|
|
966
1060
|
>
|
|
967
1061
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -973,15 +1067,23 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
973
1067
|
</div>
|
|
974
1068
|
|
|
975
1069
|
<div
|
|
976
|
-
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-
|
|
977
|
-
id="split-button-checkbox-
|
|
1070
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary"
|
|
1071
|
+
id="split-button-secondary-checkbox-expanded-example"
|
|
978
1072
|
>
|
|
979
|
-
<
|
|
1073
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1074
|
+
<input
|
|
1075
|
+
class="pf-v6-c-check__input"
|
|
1076
|
+
type="checkbox"
|
|
1077
|
+
id="split-button-secondary-checkbox-expanded-example-input"
|
|
1078
|
+
name="split-button-secondary-checkbox-expanded-example-input"
|
|
1079
|
+
aria-label="Select all items"
|
|
1080
|
+
/>
|
|
1081
|
+
</label>
|
|
980
1082
|
<button
|
|
981
1083
|
class="pf-v6-c-menu-toggle__button"
|
|
982
1084
|
type="button"
|
|
983
1085
|
aria-expanded="true"
|
|
984
|
-
id="split-button-checkbox-
|
|
1086
|
+
id="split-button-secondary-checkbox-expanded-example-toggle-button"
|
|
985
1087
|
aria-label="Menu toggle"
|
|
986
1088
|
>
|
|
987
1089
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -993,15 +1095,24 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
993
1095
|
</div>
|
|
994
1096
|
|
|
995
1097
|
<div
|
|
996
|
-
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-
|
|
997
|
-
id="split-button-checkbox-
|
|
1098
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
|
|
1099
|
+
id="split-button-secondary-checkbox-disabled-example"
|
|
998
1100
|
>
|
|
999
|
-
<
|
|
1101
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1102
|
+
<input
|
|
1103
|
+
class="pf-v6-c-check__input"
|
|
1104
|
+
type="checkbox"
|
|
1105
|
+
disabled
|
|
1106
|
+
id="split-button-secondary-checkbox-disabled-example-input"
|
|
1107
|
+
name="split-button-secondary-checkbox-disabled-example-input"
|
|
1108
|
+
aria-label="Select all items"
|
|
1109
|
+
/>
|
|
1110
|
+
</label>
|
|
1000
1111
|
<button
|
|
1001
1112
|
class="pf-v6-c-menu-toggle__button"
|
|
1002
1113
|
type="button"
|
|
1003
1114
|
aria-expanded="false"
|
|
1004
|
-
id="split-button-checkbox-
|
|
1115
|
+
id="split-button-secondary-checkbox-disabled-example-toggle-button"
|
|
1005
1116
|
aria-label="Menu toggle"
|
|
1006
1117
|
disabled
|
|
1007
1118
|
>
|
|
@@ -1015,19 +1126,33 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
1015
1126
|
|
|
1016
1127
|
```
|
|
1017
1128
|
|
|
1018
|
-
### Split
|
|
1129
|
+
### Split toggle with labeled checkbox
|
|
1130
|
+
|
|
1131
|
+
To add a label to a split toggle that will be linked to the checkbox, pass the text wrapped in `span.pf-v6-c-check__label` as a child to `label.pf-v6-c-check`. Clicking the text will update the checked state of the split toggle's checkbox. <br/> <br/>
|
|
1132
|
+
Shown with default, primary, and secondary styling
|
|
1019
1133
|
|
|
1020
1134
|
```html
|
|
1021
1135
|
<div
|
|
1022
|
-
class="pf-v6-c-menu-toggle pf-m-split-button
|
|
1023
|
-
id="split-button-checkbox-with-toggle-
|
|
1136
|
+
class="pf-v6-c-menu-toggle pf-m-split-button"
|
|
1137
|
+
id="split-button-checkbox-with-toggle-text-example"
|
|
1024
1138
|
>
|
|
1025
|
-
<
|
|
1139
|
+
<label
|
|
1140
|
+
class="pf-v6-c-check"
|
|
1141
|
+
for="split-button-checkbox-with-toggle-text-example-input"
|
|
1142
|
+
>
|
|
1143
|
+
<input
|
|
1144
|
+
class="pf-v6-c-check__input"
|
|
1145
|
+
type="checkbox"
|
|
1146
|
+
id="split-button-checkbox-with-toggle-text-example-input"
|
|
1147
|
+
name="split-button-checkbox-with-toggle-text-example-input"
|
|
1148
|
+
/>
|
|
1149
|
+
<span class="pf-v6-c-check__label">Select all items</span>
|
|
1150
|
+
</label>
|
|
1026
1151
|
<button
|
|
1027
1152
|
class="pf-v6-c-menu-toggle__button"
|
|
1028
1153
|
type="button"
|
|
1029
1154
|
aria-expanded="false"
|
|
1030
|
-
id="split-button-checkbox-with-toggle-
|
|
1155
|
+
id="split-button-checkbox-with-toggle-text-example-toggle-button"
|
|
1031
1156
|
aria-label="Menu toggle"
|
|
1032
1157
|
>
|
|
1033
1158
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -1039,15 +1164,26 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
1039
1164
|
</div>
|
|
1040
1165
|
|
|
1041
1166
|
<div
|
|
1042
|
-
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button
|
|
1043
|
-
id="split-button-checkbox-with-toggle-
|
|
1167
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
|
|
1168
|
+
id="split-button-checkbox-with-toggle-text-expanded-example"
|
|
1044
1169
|
>
|
|
1045
|
-
<
|
|
1170
|
+
<label
|
|
1171
|
+
class="pf-v6-c-check"
|
|
1172
|
+
for="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
1173
|
+
>
|
|
1174
|
+
<input
|
|
1175
|
+
class="pf-v6-c-check__input"
|
|
1176
|
+
type="checkbox"
|
|
1177
|
+
id="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
1178
|
+
name="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
1179
|
+
/>
|
|
1180
|
+
<span class="pf-v6-c-check__label">Select all items</span>
|
|
1181
|
+
</label>
|
|
1046
1182
|
<button
|
|
1047
1183
|
class="pf-v6-c-menu-toggle__button"
|
|
1048
1184
|
type="button"
|
|
1049
1185
|
aria-expanded="true"
|
|
1050
|
-
id="split-button-checkbox-with-toggle-
|
|
1186
|
+
id="split-button-checkbox-with-toggle-text-expanded-example-toggle-button"
|
|
1051
1187
|
aria-label="Menu toggle"
|
|
1052
1188
|
>
|
|
1053
1189
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
@@ -1059,15 +1195,27 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
1059
1195
|
</div>
|
|
1060
1196
|
|
|
1061
1197
|
<div
|
|
1062
|
-
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-
|
|
1063
|
-
id="split-button-checkbox-with-toggle-
|
|
1198
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
|
|
1199
|
+
id="split-button-checkbox-with-toggle-text-disabled-example"
|
|
1064
1200
|
>
|
|
1065
|
-
<
|
|
1201
|
+
<label
|
|
1202
|
+
class="pf-v6-c-check"
|
|
1203
|
+
for="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
1204
|
+
>
|
|
1205
|
+
<input
|
|
1206
|
+
class="pf-v6-c-check__input"
|
|
1207
|
+
type="checkbox"
|
|
1208
|
+
disabled
|
|
1209
|
+
id="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
1210
|
+
name="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
1211
|
+
/>
|
|
1212
|
+
<span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
|
|
1213
|
+
</label>
|
|
1066
1214
|
<button
|
|
1067
1215
|
class="pf-v6-c-menu-toggle__button"
|
|
1068
1216
|
type="button"
|
|
1069
1217
|
aria-expanded="false"
|
|
1070
|
-
id="split-button-checkbox-with-toggle-
|
|
1218
|
+
id="split-button-checkbox-with-toggle-text-disabled-example-toggle-button"
|
|
1071
1219
|
aria-label="Menu toggle"
|
|
1072
1220
|
disabled
|
|
1073
1221
|
>
|
|
@@ -1079,268 +1227,778 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
1079
1227
|
</button>
|
|
1080
1228
|
</div>
|
|
1081
1229
|
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
### With icon/image and text
|
|
1230
|
+
<br />
|
|
1231
|
+
<br />
|
|
1085
1232
|
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
type="button"
|
|
1090
|
-
aria-expanded="false"
|
|
1233
|
+
<div
|
|
1234
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-primary"
|
|
1235
|
+
id="split-button-checkbox-primary-example"
|
|
1091
1236
|
>
|
|
1092
|
-
<
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1237
|
+
<label
|
|
1238
|
+
class="pf-v6-c-check"
|
|
1239
|
+
for="split-button-checkbox-primary-example-input"
|
|
1240
|
+
>
|
|
1241
|
+
<input
|
|
1242
|
+
class="pf-v6-c-check__input"
|
|
1243
|
+
type="checkbox"
|
|
1244
|
+
id="split-button-checkbox-primary-example-input"
|
|
1245
|
+
name="split-button-checkbox-primary-example-input"
|
|
1246
|
+
/>
|
|
1247
|
+
<span class="pf-v6-c-check__label">Select all items</span>
|
|
1248
|
+
</label>
|
|
1249
|
+
<button
|
|
1250
|
+
class="pf-v6-c-menu-toggle__button"
|
|
1251
|
+
type="button"
|
|
1252
|
+
aria-expanded="false"
|
|
1253
|
+
id="split-button-checkbox-primary-example-toggle-button"
|
|
1254
|
+
aria-label="Menu toggle"
|
|
1255
|
+
>
|
|
1256
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1257
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1258
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1259
|
+
</span>
|
|
1260
|
+
</span>
|
|
1261
|
+
</button>
|
|
1262
|
+
</div>
|
|
1263
|
+
|
|
1264
|
+
<div
|
|
1265
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary"
|
|
1266
|
+
id="split-button-checkbox-primary-expanded-example"
|
|
1267
|
+
>
|
|
1268
|
+
<label
|
|
1269
|
+
class="pf-v6-c-check"
|
|
1270
|
+
for="split-button-checkbox-primary-expanded-example-input"
|
|
1271
|
+
>
|
|
1272
|
+
<input
|
|
1273
|
+
class="pf-v6-c-check__input"
|
|
1274
|
+
type="checkbox"
|
|
1275
|
+
id="split-button-checkbox-primary-expanded-example-input"
|
|
1276
|
+
name="split-button-checkbox-primary-expanded-example-input"
|
|
1277
|
+
/>
|
|
1278
|
+
<span class="pf-v6-c-check__label">Select all items</span>
|
|
1279
|
+
</label>
|
|
1280
|
+
<button
|
|
1281
|
+
class="pf-v6-c-menu-toggle__button"
|
|
1282
|
+
type="button"
|
|
1283
|
+
aria-expanded="true"
|
|
1284
|
+
id="split-button-checkbox-primary-expanded-example-toggle-button"
|
|
1285
|
+
aria-label="Menu toggle"
|
|
1286
|
+
>
|
|
1287
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1288
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1289
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1290
|
+
</span>
|
|
1291
|
+
</span>
|
|
1292
|
+
</button>
|
|
1293
|
+
</div>
|
|
1294
|
+
|
|
1295
|
+
<div
|
|
1296
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
|
|
1297
|
+
id="split-button-checkbox-primary-disabled-example"
|
|
1298
|
+
>
|
|
1299
|
+
<label
|
|
1300
|
+
class="pf-v6-c-check"
|
|
1301
|
+
for="split-button-checkbox-primary-disabled-example-input"
|
|
1302
|
+
>
|
|
1303
|
+
<input
|
|
1304
|
+
class="pf-v6-c-check__input"
|
|
1305
|
+
type="checkbox"
|
|
1306
|
+
disabled
|
|
1307
|
+
id="split-button-checkbox-primary-disabled-example-input"
|
|
1308
|
+
name="split-button-checkbox-primary-disabled-example-input"
|
|
1309
|
+
/>
|
|
1310
|
+
<span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
|
|
1311
|
+
</label>
|
|
1312
|
+
<button
|
|
1313
|
+
class="pf-v6-c-menu-toggle__button"
|
|
1314
|
+
type="button"
|
|
1315
|
+
aria-expanded="false"
|
|
1316
|
+
id="split-button-checkbox-primary-disabled-example-toggle-button"
|
|
1317
|
+
aria-label="Menu toggle"
|
|
1318
|
+
disabled
|
|
1319
|
+
>
|
|
1320
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1321
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1322
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1323
|
+
</span>
|
|
1324
|
+
</span>
|
|
1325
|
+
</button>
|
|
1326
|
+
</div>
|
|
1327
|
+
|
|
1328
|
+
<br />
|
|
1329
|
+
<br />
|
|
1330
|
+
|
|
1331
|
+
<div
|
|
1332
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-secondary"
|
|
1333
|
+
id="split-button-checkbox-secondary-example"
|
|
1334
|
+
>
|
|
1335
|
+
<label
|
|
1336
|
+
class="pf-v6-c-check"
|
|
1337
|
+
for="split-button-checkbox-secondary-example-input"
|
|
1338
|
+
>
|
|
1339
|
+
<input
|
|
1340
|
+
class="pf-v6-c-check__input"
|
|
1341
|
+
type="checkbox"
|
|
1342
|
+
id="split-button-checkbox-secondary-example-input"
|
|
1343
|
+
name="split-button-checkbox-secondary-example-input"
|
|
1344
|
+
/>
|
|
1345
|
+
<span class="pf-v6-c-check__label">Select all items</span>
|
|
1346
|
+
</label>
|
|
1347
|
+
<button
|
|
1348
|
+
class="pf-v6-c-menu-toggle__button"
|
|
1349
|
+
type="button"
|
|
1350
|
+
aria-expanded="false"
|
|
1351
|
+
id="split-button-checkbox-secondary-example-toggle-button"
|
|
1352
|
+
aria-label="Menu toggle"
|
|
1353
|
+
>
|
|
1354
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1355
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1356
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1357
|
+
</span>
|
|
1358
|
+
</span>
|
|
1359
|
+
</button>
|
|
1360
|
+
</div>
|
|
1361
|
+
|
|
1362
|
+
<div
|
|
1363
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary"
|
|
1364
|
+
id="split-button-checkbox-secondary-expanded-example"
|
|
1365
|
+
>
|
|
1366
|
+
<label
|
|
1367
|
+
class="pf-v6-c-check"
|
|
1368
|
+
for="split-button-checkbox-secondary-expanded-example-input"
|
|
1369
|
+
>
|
|
1370
|
+
<input
|
|
1371
|
+
class="pf-v6-c-check__input"
|
|
1372
|
+
type="checkbox"
|
|
1373
|
+
id="split-button-checkbox-secondary-expanded-example-input"
|
|
1374
|
+
name="split-button-checkbox-secondary-expanded-example-input"
|
|
1375
|
+
/>
|
|
1376
|
+
<span class="pf-v6-c-check__label">Select all items</span>
|
|
1377
|
+
</label>
|
|
1378
|
+
<button
|
|
1379
|
+
class="pf-v6-c-menu-toggle__button"
|
|
1380
|
+
type="button"
|
|
1381
|
+
aria-expanded="true"
|
|
1382
|
+
id="split-button-checkbox-secondary-expanded-example-toggle-button"
|
|
1383
|
+
aria-label="Menu toggle"
|
|
1384
|
+
>
|
|
1385
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1386
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1387
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1388
|
+
</span>
|
|
1389
|
+
</span>
|
|
1390
|
+
</button>
|
|
1391
|
+
</div>
|
|
1392
|
+
|
|
1393
|
+
<div
|
|
1394
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
|
|
1395
|
+
id="split-button-checkbox-secondary-disabled-example"
|
|
1396
|
+
>
|
|
1397
|
+
<label
|
|
1398
|
+
class="pf-v6-c-check"
|
|
1399
|
+
for="split-button-checkbox-secondary-disabled-example-input"
|
|
1400
|
+
>
|
|
1401
|
+
<input
|
|
1402
|
+
class="pf-v6-c-check__input"
|
|
1403
|
+
type="checkbox"
|
|
1404
|
+
disabled
|
|
1405
|
+
id="split-button-checkbox-secondary-disabled-example-input"
|
|
1406
|
+
name="split-button-checkbox-secondary-disabled-example-input"
|
|
1407
|
+
/>
|
|
1408
|
+
<span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
|
|
1409
|
+
</label>
|
|
1410
|
+
<button
|
|
1411
|
+
class="pf-v6-c-menu-toggle__button"
|
|
1412
|
+
type="button"
|
|
1413
|
+
aria-expanded="false"
|
|
1414
|
+
id="split-button-checkbox-secondary-disabled-example-toggle-button"
|
|
1415
|
+
aria-label="Menu toggle"
|
|
1416
|
+
disabled
|
|
1417
|
+
>
|
|
1418
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1419
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1420
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1421
|
+
</span>
|
|
1422
|
+
</span>
|
|
1423
|
+
</button>
|
|
1424
|
+
</div>
|
|
1425
|
+
|
|
1426
|
+
```
|
|
1427
|
+
|
|
1428
|
+
### Split toggle with checkbox and toggle text
|
|
1429
|
+
|
|
1430
|
+
To add a label to a split toggle that will be linked to the toggle button, pass the text wrapped in `span.pf-v6-c-menu-toggle__text` as a child to `button.pf-v6-c-menu-toggle__button.pf-m-text`. Clicking the text should trigger any click action on the toggle. <br/> <br/>
|
|
1431
|
+
Shown with default, primary, and secondary styling
|
|
1432
|
+
|
|
1433
|
+
```html
|
|
1434
|
+
<div
|
|
1435
|
+
class="pf-v6-c-menu-toggle pf-m-split-button"
|
|
1436
|
+
id="split-button-checkbox-with-toggle-button-text-example"
|
|
1437
|
+
>
|
|
1438
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1439
|
+
<input
|
|
1440
|
+
class="pf-v6-c-check__input"
|
|
1441
|
+
type="checkbox"
|
|
1442
|
+
id="split-button-checkbox-with-toggle-button-text-example-input"
|
|
1443
|
+
name="split-button-checkbox-with-toggle-button-text-example-input"
|
|
1444
|
+
aria-label="Select all items"
|
|
1445
|
+
/>
|
|
1446
|
+
</label>
|
|
1447
|
+
<button
|
|
1448
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1449
|
+
type="button"
|
|
1450
|
+
aria-expanded="false"
|
|
1451
|
+
id="split-button-checkbox-with-toggle-button-text-example-toggle-button"
|
|
1452
|
+
aria-label="Menu toggle"
|
|
1453
|
+
>
|
|
1454
|
+
<span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
|
|
1455
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1456
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1457
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1458
|
+
</span>
|
|
1459
|
+
</span>
|
|
1460
|
+
</button>
|
|
1461
|
+
</div>
|
|
1462
|
+
<div
|
|
1463
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
|
|
1464
|
+
id="split-button-checkbox-with-toggle-button-text-expanded-example"
|
|
1465
|
+
>
|
|
1466
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1467
|
+
<input
|
|
1468
|
+
class="pf-v6-c-check__input"
|
|
1469
|
+
type="checkbox"
|
|
1470
|
+
id="split-button-checkbox-with-toggle-button-text-expanded-example-input"
|
|
1471
|
+
name="split-button-checkbox-with-toggle-button-text-expanded-example-input"
|
|
1472
|
+
aria-label="Select all items"
|
|
1473
|
+
/>
|
|
1474
|
+
</label>
|
|
1475
|
+
<button
|
|
1476
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1477
|
+
type="button"
|
|
1478
|
+
aria-expanded="true"
|
|
1479
|
+
id="split-button-checkbox-with-toggle-button-text-expanded-example-toggle-button"
|
|
1480
|
+
aria-label="Menu toggle"
|
|
1481
|
+
>
|
|
1482
|
+
<span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
|
|
1483
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1484
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1485
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1486
|
+
</span>
|
|
1487
|
+
</span>
|
|
1488
|
+
</button>
|
|
1489
|
+
</div>
|
|
1490
|
+
<div
|
|
1491
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
|
|
1492
|
+
id="split-button-checkbox-with-toggle-button-text-disabled-example"
|
|
1493
|
+
>
|
|
1494
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1495
|
+
<input
|
|
1496
|
+
class="pf-v6-c-check__input"
|
|
1497
|
+
type="checkbox"
|
|
1498
|
+
disabled
|
|
1499
|
+
id="split-button-checkbox-with-toggle-button-text-disabled-example-input"
|
|
1500
|
+
name="split-button-checkbox-with-toggle-button-text-disabled-example-input"
|
|
1501
|
+
aria-label="Select all items"
|
|
1502
|
+
/>
|
|
1503
|
+
</label>
|
|
1504
|
+
<button
|
|
1505
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1506
|
+
type="button"
|
|
1507
|
+
aria-expanded="false"
|
|
1508
|
+
id="split-button-checkbox-with-toggle-button-text-disabled-example-toggle-button"
|
|
1509
|
+
aria-label="Menu toggle"
|
|
1510
|
+
disabled
|
|
1511
|
+
>
|
|
1512
|
+
<span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
|
|
1513
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1514
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1515
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1516
|
+
</span>
|
|
1517
|
+
</span>
|
|
1518
|
+
</button>
|
|
1519
|
+
</div>
|
|
1520
|
+
|
|
1521
|
+
<br />
|
|
1522
|
+
<br />
|
|
1523
|
+
|
|
1524
|
+
<div
|
|
1525
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-primary"
|
|
1526
|
+
id="split-button-primary-checkbox-with-toggle-button-text-example"
|
|
1527
|
+
>
|
|
1528
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1529
|
+
<input
|
|
1530
|
+
class="pf-v6-c-check__input"
|
|
1531
|
+
type="checkbox"
|
|
1532
|
+
id="split-button-primary-checkbox-with-toggle-button-text-example-input"
|
|
1533
|
+
name="split-button-primary-checkbox-with-toggle-button-text-example-input"
|
|
1534
|
+
aria-label="Select all items"
|
|
1535
|
+
/>
|
|
1536
|
+
</label>
|
|
1537
|
+
<button
|
|
1538
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1539
|
+
type="button"
|
|
1540
|
+
aria-expanded="false"
|
|
1541
|
+
id="split-button-primary-checkbox-with-toggle-button-text-example-toggle-button"
|
|
1542
|
+
aria-label="Menu toggle"
|
|
1543
|
+
>
|
|
1544
|
+
<span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
|
|
1545
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1546
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1547
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1548
|
+
</span>
|
|
1549
|
+
</span>
|
|
1550
|
+
</button>
|
|
1551
|
+
</div>
|
|
1552
|
+
<div
|
|
1553
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary"
|
|
1554
|
+
id="split-button-primary-checkbox-with-toggle-button-text-expanded-example"
|
|
1555
|
+
>
|
|
1556
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1557
|
+
<input
|
|
1558
|
+
class="pf-v6-c-check__input"
|
|
1559
|
+
type="checkbox"
|
|
1560
|
+
id="split-button-primary-checkbox-with-toggle-button-text-expanded-example-input"
|
|
1561
|
+
name="split-button-primary-checkbox-with-toggle-button-text-expanded-example-input"
|
|
1562
|
+
aria-label="Select all items"
|
|
1563
|
+
/>
|
|
1564
|
+
</label>
|
|
1565
|
+
<button
|
|
1566
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1567
|
+
type="button"
|
|
1568
|
+
aria-expanded="true"
|
|
1569
|
+
id="split-button-primary-checkbox-with-toggle-button-text-expanded-example-toggle-button"
|
|
1570
|
+
aria-label="Menu toggle"
|
|
1571
|
+
>
|
|
1572
|
+
<span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
|
|
1573
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1574
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1575
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1576
|
+
</span>
|
|
1099
1577
|
</span>
|
|
1100
|
-
</
|
|
1101
|
-
</
|
|
1578
|
+
</button>
|
|
1579
|
+
</div>
|
|
1580
|
+
<div
|
|
1581
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
|
|
1582
|
+
id="split-button-primary-checkbox-with-toggle-button-text-disabled-example"
|
|
1583
|
+
>
|
|
1584
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1585
|
+
<input
|
|
1586
|
+
class="pf-v6-c-check__input"
|
|
1587
|
+
type="checkbox"
|
|
1588
|
+
disabled
|
|
1589
|
+
id="split-button-primary-checkbox-with-toggle-button-text-disabled-example-input"
|
|
1590
|
+
name="split-button-primary-checkbox-with-toggle-button-text-disabled-example-input"
|
|
1591
|
+
aria-label="Select all items"
|
|
1592
|
+
/>
|
|
1593
|
+
</label>
|
|
1594
|
+
<button
|
|
1595
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1596
|
+
type="button"
|
|
1597
|
+
aria-expanded="false"
|
|
1598
|
+
id="split-button-primary-checkbox-with-toggle-button-text-disabled-example-toggle-button"
|
|
1599
|
+
aria-label="Menu toggle"
|
|
1600
|
+
disabled
|
|
1601
|
+
>
|
|
1602
|
+
<span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
|
|
1603
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1604
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1605
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1606
|
+
</span>
|
|
1607
|
+
</span>
|
|
1608
|
+
</button>
|
|
1609
|
+
</div>
|
|
1102
1610
|
|
|
1103
|
-
|
|
1104
|
-
<
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1611
|
+
<br />
|
|
1612
|
+
<br />
|
|
1613
|
+
|
|
1614
|
+
<div
|
|
1615
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-secondary"
|
|
1616
|
+
id="split-button-secondary-checkbox-with-toggle-button-text-example"
|
|
1109
1617
|
>
|
|
1110
|
-
<
|
|
1111
|
-
<
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1618
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1619
|
+
<input
|
|
1620
|
+
class="pf-v6-c-check__input"
|
|
1621
|
+
type="checkbox"
|
|
1622
|
+
id="split-button-secondary-checkbox-with-toggle-button-text-example-input"
|
|
1623
|
+
name="split-button-secondary-checkbox-with-toggle-button-text-example-input"
|
|
1624
|
+
aria-label="Select all items"
|
|
1625
|
+
/>
|
|
1626
|
+
</label>
|
|
1627
|
+
<button
|
|
1628
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1629
|
+
type="button"
|
|
1630
|
+
aria-expanded="false"
|
|
1631
|
+
id="split-button-secondary-checkbox-with-toggle-button-text-example-toggle-button"
|
|
1632
|
+
aria-label="Menu toggle"
|
|
1633
|
+
>
|
|
1634
|
+
<span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
|
|
1635
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1636
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1637
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1638
|
+
</span>
|
|
1117
1639
|
</span>
|
|
1118
|
-
</
|
|
1119
|
-
</
|
|
1640
|
+
</button>
|
|
1641
|
+
</div>
|
|
1642
|
+
<div
|
|
1643
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary"
|
|
1644
|
+
id="split-button-secondary-checkbox-with-toggle-button-text-expanded-example"
|
|
1645
|
+
>
|
|
1646
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1647
|
+
<input
|
|
1648
|
+
class="pf-v6-c-check__input"
|
|
1649
|
+
type="checkbox"
|
|
1650
|
+
id="split-button-secondary-checkbox-with-toggle-button-text-expanded-example-input"
|
|
1651
|
+
name="split-button-secondary-checkbox-with-toggle-button-text-expanded-example-input"
|
|
1652
|
+
aria-label="Select all items"
|
|
1653
|
+
/>
|
|
1654
|
+
</label>
|
|
1655
|
+
<button
|
|
1656
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1657
|
+
type="button"
|
|
1658
|
+
aria-expanded="true"
|
|
1659
|
+
id="split-button-secondary-checkbox-with-toggle-button-text-expanded-example-toggle-button"
|
|
1660
|
+
aria-label="Menu toggle"
|
|
1661
|
+
>
|
|
1662
|
+
<span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
|
|
1663
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1664
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1665
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1666
|
+
</span>
|
|
1667
|
+
</span>
|
|
1668
|
+
</button>
|
|
1669
|
+
</div>
|
|
1670
|
+
<div
|
|
1671
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
|
|
1672
|
+
id="split-button-secondary-checkbox-with-toggle-button-text-disabled-example"
|
|
1673
|
+
>
|
|
1674
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1675
|
+
<input
|
|
1676
|
+
class="pf-v6-c-check__input"
|
|
1677
|
+
type="checkbox"
|
|
1678
|
+
disabled
|
|
1679
|
+
id="split-button-secondary-checkbox-with-toggle-button-text-disabled-example-input"
|
|
1680
|
+
name="split-button-secondary-checkbox-with-toggle-button-text-disabled-example-input"
|
|
1681
|
+
aria-label="Select all items"
|
|
1682
|
+
/>
|
|
1683
|
+
</label>
|
|
1684
|
+
<button
|
|
1685
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1686
|
+
type="button"
|
|
1687
|
+
aria-expanded="false"
|
|
1688
|
+
id="split-button-secondary-checkbox-with-toggle-button-text-disabled-example-toggle-button"
|
|
1689
|
+
aria-label="Menu toggle"
|
|
1690
|
+
disabled
|
|
1691
|
+
>
|
|
1692
|
+
<span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
|
|
1693
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1694
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1695
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1696
|
+
</span>
|
|
1697
|
+
</span>
|
|
1698
|
+
</button>
|
|
1699
|
+
</div>
|
|
1120
1700
|
|
|
1121
1701
|
```
|
|
1122
1702
|
|
|
1123
|
-
###
|
|
1703
|
+
### Split toggle with checkbox, icon, and toggle text
|
|
1704
|
+
|
|
1705
|
+
To add a label to a split toggle that will be linked to the toggle button, pass the text wrapped in `span.pf-v6-c-menu-toggle__text` as a child to `button.pf-v6-c-menu-toggle__button.pf-m-text`. Clicking the text should trigger any click action on the toggle. <br/> <br/>
|
|
1706
|
+
Shown with default, primary, and secondary styling
|
|
1124
1707
|
|
|
1125
1708
|
```html
|
|
1126
|
-
<
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1709
|
+
<div
|
|
1710
|
+
class="pf-v6-c-menu-toggle pf-m-split-button"
|
|
1711
|
+
id="split-button-checkbox-with-toggle-button-icon-text-example"
|
|
1712
|
+
>
|
|
1713
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1714
|
+
<input
|
|
1715
|
+
class="pf-v6-c-check__input"
|
|
1716
|
+
type="checkbox"
|
|
1717
|
+
id="split-button-checkbox-with-toggle-button-icon-text-example-input"
|
|
1718
|
+
name="split-button-checkbox-with-toggle-button-icon-text-example-input"
|
|
1719
|
+
aria-label="Select all items"
|
|
1132
1720
|
/>
|
|
1133
|
-
</
|
|
1134
|
-
<
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1721
|
+
</label>
|
|
1722
|
+
<button
|
|
1723
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1724
|
+
type="button"
|
|
1725
|
+
aria-expanded="false"
|
|
1726
|
+
id="split-button-checkbox-with-toggle-button-icon-text-example-toggle-button"
|
|
1727
|
+
aria-label="Menu toggle"
|
|
1728
|
+
>
|
|
1729
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1730
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1138
1731
|
</span>
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1732
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
1733
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1734
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1735
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1736
|
+
</span>
|
|
1737
|
+
</span>
|
|
1738
|
+
</button>
|
|
1739
|
+
</div>
|
|
1740
|
+
<div
|
|
1741
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
|
|
1742
|
+
id="split-button-checkbox-with-toggle-button-icon-text-expanded-example"
|
|
1147
1743
|
>
|
|
1148
|
-
<
|
|
1149
|
-
<
|
|
1150
|
-
class="pf-v6-c-
|
|
1151
|
-
|
|
1152
|
-
|
|
1744
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1745
|
+
<input
|
|
1746
|
+
class="pf-v6-c-check__input"
|
|
1747
|
+
type="checkbox"
|
|
1748
|
+
id="split-button-checkbox-with-toggle-button-icon-text-expanded-example-input"
|
|
1749
|
+
name="split-button-checkbox-with-toggle-button-icon-text-expanded-example-input"
|
|
1750
|
+
aria-label="Select all items"
|
|
1153
1751
|
/>
|
|
1154
|
-
</
|
|
1155
|
-
<
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1752
|
+
</label>
|
|
1753
|
+
<button
|
|
1754
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1755
|
+
type="button"
|
|
1756
|
+
aria-expanded="true"
|
|
1757
|
+
id="split-button-checkbox-with-toggle-button-icon-text-expanded-example-toggle-button"
|
|
1758
|
+
aria-label="Menu toggle"
|
|
1759
|
+
>
|
|
1760
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1761
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1159
1762
|
</span>
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1763
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
1764
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1765
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1766
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1767
|
+
</span>
|
|
1768
|
+
</span>
|
|
1769
|
+
</button>
|
|
1770
|
+
</div>
|
|
1771
|
+
<div
|
|
1772
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
|
|
1773
|
+
id="split-button-checkbox-with-toggle-button-icon-text-disabled-example"
|
|
1169
1774
|
>
|
|
1170
|
-
<
|
|
1171
|
-
<
|
|
1172
|
-
class="pf-v6-c-
|
|
1173
|
-
|
|
1174
|
-
|
|
1775
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1776
|
+
<input
|
|
1777
|
+
class="pf-v6-c-check__input"
|
|
1778
|
+
type="checkbox"
|
|
1779
|
+
disabled
|
|
1780
|
+
id="split-button-checkbox-with-toggle-button-icon-text-disabled-example-input"
|
|
1781
|
+
name="split-button-checkbox-with-toggle-button-icon-text-disabled-example-input"
|
|
1782
|
+
aria-label="Select all items"
|
|
1175
1783
|
/>
|
|
1176
|
-
</
|
|
1177
|
-
<
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1784
|
+
</label>
|
|
1785
|
+
<button
|
|
1786
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1787
|
+
type="button"
|
|
1788
|
+
aria-expanded="false"
|
|
1789
|
+
id="split-button-checkbox-with-toggle-button-icon-text-disabled-example-toggle-button"
|
|
1790
|
+
aria-label="Menu toggle"
|
|
1791
|
+
disabled
|
|
1792
|
+
>
|
|
1793
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1794
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1795
|
+
</span>
|
|
1796
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
1797
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1798
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1799
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1800
|
+
</span>
|
|
1181
1801
|
</span>
|
|
1182
|
-
</
|
|
1183
|
-
</
|
|
1184
|
-
|
|
1185
|
-
```
|
|
1802
|
+
</button>
|
|
1803
|
+
</div>
|
|
1186
1804
|
|
|
1187
|
-
|
|
1805
|
+
<br />
|
|
1806
|
+
<br />
|
|
1188
1807
|
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
type="button"
|
|
1193
|
-
aria-expanded="false"
|
|
1808
|
+
<div
|
|
1809
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-primary"
|
|
1810
|
+
id="split-button-primary-checkbox-with-toggle-button-icon-text-example"
|
|
1194
1811
|
>
|
|
1195
|
-
<
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1812
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1813
|
+
<input
|
|
1814
|
+
class="pf-v6-c-check__input"
|
|
1815
|
+
type="checkbox"
|
|
1816
|
+
id="split-button-primary-checkbox-with-toggle-button-icon-text-example-input"
|
|
1817
|
+
name="split-button-primary-checkbox-with-toggle-button-icon-text-example-input"
|
|
1818
|
+
aria-label="Select all items"
|
|
1819
|
+
/>
|
|
1820
|
+
</label>
|
|
1821
|
+
<button
|
|
1822
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1823
|
+
type="button"
|
|
1824
|
+
aria-expanded="false"
|
|
1825
|
+
id="split-button-primary-checkbox-with-toggle-button-icon-text-example-toggle-button"
|
|
1826
|
+
aria-label="Menu toggle"
|
|
1827
|
+
>
|
|
1828
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1829
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1199
1830
|
</span>
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
### Full width
|
|
1206
|
-
|
|
1207
|
-
```html
|
|
1208
|
-
<button
|
|
1209
|
-
class="pf-v6-c-menu-toggle pf-m-full-width"
|
|
1210
|
-
type="button"
|
|
1211
|
-
aria-expanded="false"
|
|
1212
|
-
>
|
|
1213
|
-
<span class="pf-v6-c-menu-toggle__text">Full width</span>
|
|
1214
|
-
<span class="pf-v6-c-menu-toggle__controls">
|
|
1215
|
-
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1216
|
-
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1831
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
1832
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1833
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1834
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1835
|
+
</span>
|
|
1217
1836
|
</span>
|
|
1218
|
-
</
|
|
1219
|
-
</
|
|
1220
|
-
|
|
1221
|
-
```
|
|
1222
|
-
|
|
1223
|
-
### Typeahead
|
|
1224
|
-
|
|
1225
|
-
```html
|
|
1837
|
+
</button>
|
|
1838
|
+
</div>
|
|
1226
1839
|
<div
|
|
1227
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1228
|
-
id="
|
|
1840
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary"
|
|
1841
|
+
id="split-button-primary-checkbox-with-toggle-button-icon-text-expanded-example"
|
|
1229
1842
|
>
|
|
1230
|
-
<
|
|
1231
|
-
<
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
</span>
|
|
1240
|
-
</div>
|
|
1241
|
-
<div class="pf-v6-c-text-input-group__utilities">
|
|
1242
|
-
<button
|
|
1243
|
-
class="pf-v6-c-button pf-m-plain"
|
|
1244
|
-
type="button"
|
|
1245
|
-
aria-label="Clear input"
|
|
1246
|
-
>
|
|
1247
|
-
<span class="pf-v6-c-button__icon">
|
|
1248
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
1249
|
-
</span>
|
|
1250
|
-
</button>
|
|
1251
|
-
</div>
|
|
1252
|
-
</div>
|
|
1843
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1844
|
+
<input
|
|
1845
|
+
class="pf-v6-c-check__input"
|
|
1846
|
+
type="checkbox"
|
|
1847
|
+
id="split-button-primary-checkbox-with-toggle-button-icon-text-expanded-example-input"
|
|
1848
|
+
name="split-button-primary-checkbox-with-toggle-button-icon-text-expanded-example-input"
|
|
1849
|
+
aria-label="Select all items"
|
|
1850
|
+
/>
|
|
1851
|
+
</label>
|
|
1253
1852
|
<button
|
|
1254
|
-
class="pf-v6-c-menu-toggle__button"
|
|
1853
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1255
1854
|
type="button"
|
|
1256
|
-
aria-expanded="
|
|
1257
|
-
id="
|
|
1855
|
+
aria-expanded="true"
|
|
1856
|
+
id="split-button-primary-checkbox-with-toggle-button-icon-text-expanded-example-toggle-button"
|
|
1258
1857
|
aria-label="Menu toggle"
|
|
1259
1858
|
>
|
|
1859
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1860
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1861
|
+
</span>
|
|
1862
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
1260
1863
|
<span class="pf-v6-c-menu-toggle__controls">
|
|
1261
1864
|
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1262
1865
|
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1263
1866
|
</span>
|
|
1264
1867
|
</span>
|
|
1265
1868
|
</button>
|
|
1266
|
-
</div
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
### Status
|
|
1271
|
-
|
|
1272
|
-
```html
|
|
1273
|
-
<button
|
|
1274
|
-
class="pf-v6-c-menu-toggle pf-m-success"
|
|
1275
|
-
type="button"
|
|
1276
|
-
aria-expanded="false"
|
|
1869
|
+
</div>
|
|
1870
|
+
<div
|
|
1871
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
|
|
1872
|
+
id="split-button-primary-checkbox-with-toggle-button-icon-text-disabled-example"
|
|
1277
1873
|
>
|
|
1278
|
-
<
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1874
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1875
|
+
<input
|
|
1876
|
+
class="pf-v6-c-check__input"
|
|
1877
|
+
type="checkbox"
|
|
1878
|
+
disabled
|
|
1879
|
+
id="split-button-primary-checkbox-with-toggle-button-icon-text-disabled-example-input"
|
|
1880
|
+
name="split-button-primary-checkbox-with-toggle-button-icon-text-disabled-example-input"
|
|
1881
|
+
aria-label="Select all items"
|
|
1882
|
+
/>
|
|
1883
|
+
</label>
|
|
1884
|
+
<button
|
|
1885
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1886
|
+
type="button"
|
|
1887
|
+
aria-expanded="false"
|
|
1888
|
+
id="split-button-primary-checkbox-with-toggle-button-icon-text-disabled-example-toggle-button"
|
|
1889
|
+
aria-label="Menu toggle"
|
|
1890
|
+
disabled
|
|
1891
|
+
>
|
|
1892
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1893
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1282
1894
|
</span>
|
|
1283
|
-
<span class="pf-v6-c-menu-
|
|
1284
|
-
|
|
1895
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
1896
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1897
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1898
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1899
|
+
</span>
|
|
1285
1900
|
</span>
|
|
1286
|
-
</
|
|
1287
|
-
</
|
|
1901
|
+
</button>
|
|
1902
|
+
</div>
|
|
1288
1903
|
|
|
1289
1904
|
<br />
|
|
1290
1905
|
<br />
|
|
1291
1906
|
|
|
1292
|
-
<
|
|
1293
|
-
class="pf-v6-c-menu-toggle pf-m-
|
|
1294
|
-
|
|
1295
|
-
aria-expanded="false"
|
|
1907
|
+
<div
|
|
1908
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-secondary"
|
|
1909
|
+
id="split-button-secondary-checkbox-with-toggle-button-icon-text-example"
|
|
1296
1910
|
>
|
|
1297
|
-
<
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1911
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1912
|
+
<input
|
|
1913
|
+
class="pf-v6-c-check__input"
|
|
1914
|
+
type="checkbox"
|
|
1915
|
+
id="split-button-secondary-checkbox-with-toggle-button-icon-text-example-input"
|
|
1916
|
+
name="split-button-secondary-checkbox-with-toggle-button-icon-text-example-input"
|
|
1917
|
+
aria-label="Select all items"
|
|
1918
|
+
/>
|
|
1919
|
+
</label>
|
|
1920
|
+
<button
|
|
1921
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1922
|
+
type="button"
|
|
1923
|
+
aria-expanded="false"
|
|
1924
|
+
id="split-button-secondary-checkbox-with-toggle-button-icon-text-example-toggle-button"
|
|
1925
|
+
aria-label="Menu toggle"
|
|
1926
|
+
>
|
|
1927
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1928
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1301
1929
|
</span>
|
|
1302
|
-
<span class="pf-v6-c-menu-
|
|
1303
|
-
|
|
1930
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
1931
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1932
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1933
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1934
|
+
</span>
|
|
1304
1935
|
</span>
|
|
1305
|
-
</
|
|
1306
|
-
</
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
<button
|
|
1312
|
-
class="pf-v6-c-menu-toggle pf-m-danger"
|
|
1313
|
-
type="button"
|
|
1314
|
-
aria-expanded="false"
|
|
1936
|
+
</button>
|
|
1937
|
+
</div>
|
|
1938
|
+
<div
|
|
1939
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary"
|
|
1940
|
+
id="split-button-secondary-checkbox-with-toggle-button-icon-text-expanded-example"
|
|
1315
1941
|
>
|
|
1316
|
-
<
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1942
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1943
|
+
<input
|
|
1944
|
+
class="pf-v6-c-check__input"
|
|
1945
|
+
type="checkbox"
|
|
1946
|
+
id="split-button-secondary-checkbox-with-toggle-button-icon-text-expanded-example-input"
|
|
1947
|
+
name="split-button-secondary-checkbox-with-toggle-button-icon-text-expanded-example-input"
|
|
1948
|
+
aria-label="Select all items"
|
|
1949
|
+
/>
|
|
1950
|
+
</label>
|
|
1951
|
+
<button
|
|
1952
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1953
|
+
type="button"
|
|
1954
|
+
aria-expanded="true"
|
|
1955
|
+
id="split-button-secondary-checkbox-with-toggle-button-icon-text-expanded-example-toggle-button"
|
|
1956
|
+
aria-label="Menu toggle"
|
|
1957
|
+
>
|
|
1958
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1959
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1320
1960
|
</span>
|
|
1321
|
-
<span class="pf-v6-c-menu-
|
|
1322
|
-
|
|
1961
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
1962
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1963
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1964
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1965
|
+
</span>
|
|
1323
1966
|
</span>
|
|
1324
|
-
</
|
|
1325
|
-
</
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
### Placeholder
|
|
1330
|
-
|
|
1331
|
-
```html
|
|
1332
|
-
<button
|
|
1333
|
-
class="pf-v6-c-menu-toggle pf-m-placeholder"
|
|
1334
|
-
type="button"
|
|
1335
|
-
aria-expanded="false"
|
|
1967
|
+
</button>
|
|
1968
|
+
</div>
|
|
1969
|
+
<div
|
|
1970
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
|
|
1971
|
+
id="split-button-secondary-checkbox-with-toggle-button-icon-text-disabled-example"
|
|
1336
1972
|
>
|
|
1337
|
-
<
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1973
|
+
<label class="pf-v6-c-check pf-m-standalone">
|
|
1974
|
+
<input
|
|
1975
|
+
class="pf-v6-c-check__input"
|
|
1976
|
+
type="checkbox"
|
|
1977
|
+
disabled
|
|
1978
|
+
id="split-button-secondary-checkbox-with-toggle-button-icon-text-disabled-example-input"
|
|
1979
|
+
name="split-button-secondary-checkbox-with-toggle-button-icon-text-disabled-example-input"
|
|
1980
|
+
aria-label="Select all items"
|
|
1981
|
+
/>
|
|
1982
|
+
</label>
|
|
1983
|
+
<button
|
|
1984
|
+
class="pf-v6-c-menu-toggle__button pf-m-text"
|
|
1985
|
+
type="button"
|
|
1986
|
+
aria-expanded="false"
|
|
1987
|
+
id="split-button-secondary-checkbox-with-toggle-button-icon-text-disabled-example-toggle-button"
|
|
1988
|
+
aria-label="Menu toggle"
|
|
1989
|
+
disabled
|
|
1990
|
+
>
|
|
1991
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
1992
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1341
1993
|
</span>
|
|
1342
|
-
|
|
1343
|
-
|
|
1994
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
1995
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1996
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1997
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
1998
|
+
</span>
|
|
1999
|
+
</span>
|
|
2000
|
+
</button>
|
|
2001
|
+
</div>
|
|
1344
2002
|
|
|
1345
2003
|
```
|
|
1346
2004
|
|
|
@@ -1367,7 +2025,6 @@ To add a label to a split toggle that will be linked to the toggle button, pass
|
|
|
1367
2025
|
| `.pf-v6-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
|
|
1368
2026
|
| `.pf-v6-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
|
|
1369
2027
|
| `.pf-m-split-button` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
|
|
1370
|
-
| `.pf-m-action` | `.pf-v6-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
|
|
1371
2028
|
| `.pf-m-text` | `.pf-v6-c-menu-toggle__button` | Modifies the menu toggle component split button variation with text. |
|
|
1372
2029
|
| `.pf-m-disabled` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
|
|
1373
2030
|
| `.pf-m-primary` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
|