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