@patternfly/patternfly 4.214.0 → 4.215.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/RELEASE-NOTES.md +22 -0
- package/components/Banner/banner.css +6 -6
- package/components/Banner/banner.scss +8 -4
- package/components/Banner/themes/dark/banner.scss +5 -1
- package/components/ProgressStepper/progress-stepper.css +7 -4
- package/components/ProgressStepper/progress-stepper.scss +7 -4
- package/docs/components/Banner/examples/Banner.md +91 -19
- package/docs/components/FileUpload/examples/FileUpload.md +1 -1
- package/docs/components/Form/examples/Form.md +52 -50
- package/docs/components/Login/examples/Login.md +5 -5
- package/docs/components/SearchInput/examples/SearchInput.md +2 -2
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -2
- package/docs/components/Wizard/examples/Wizard.md +5 -5
- package/docs/demos/Alert/examples/Alert.md +2 -2
- package/docs/demos/Button/examples/Button.md +3 -3
- package/docs/demos/Form/examples/BasicForms.md +5 -5
- package/docs/demos/HelperText/examples/HelperText.md +1 -1
- package/docs/demos/Modal/examples/Modal.md +1 -1
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
- package/docs/demos/Wizard/examples/Wizard.md +1960 -748
- package/package.json +1 -1
- package/patternfly-no-reset.css +13 -10
- package/patternfly.css +13 -10
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -995,10 +995,10 @@ wrapperTag: div
|
|
|
995
995
|
</nav>
|
|
996
996
|
<main class="pf-c-wizard__main" tabindex="0">
|
|
997
997
|
<div class="pf-c-wizard__main-body">
|
|
998
|
-
<form
|
|
998
|
+
<form class="pf-c-form pf-m-limit-width" novalidate>
|
|
999
999
|
<div class="pf-c-form__group">
|
|
1000
1000
|
<div class="pf-c-form__group-label">
|
|
1001
|
-
<label class="pf-c-form__label" for="-form-field1">
|
|
1001
|
+
<label class="pf-c-form__label" for="-wizard-form-field1">
|
|
1002
1002
|
<span class="pf-c-form__label-text">Field 1</span>
|
|
1003
1003
|
<span
|
|
1004
1004
|
class="pf-c-form__label-required"
|
|
@@ -1011,14 +1011,14 @@ wrapperTag: div
|
|
|
1011
1011
|
class="pf-c-form-control"
|
|
1012
1012
|
required
|
|
1013
1013
|
type="text"
|
|
1014
|
-
id="-form-field1"
|
|
1015
|
-
name="-form-field1"
|
|
1014
|
+
id="-wizard-form-field1"
|
|
1015
|
+
name="-wizard-form-field1"
|
|
1016
1016
|
/>
|
|
1017
1017
|
</div>
|
|
1018
1018
|
</div>
|
|
1019
1019
|
<div class="pf-c-form__group">
|
|
1020
1020
|
<div class="pf-c-form__group-label">
|
|
1021
|
-
<label class="pf-c-form__label" for="-form-field2">
|
|
1021
|
+
<label class="pf-c-form__label" for="-wizard-form-field2">
|
|
1022
1022
|
<span class="pf-c-form__label-text">Field 2</span>
|
|
1023
1023
|
<span
|
|
1024
1024
|
class="pf-c-form__label-required"
|
|
@@ -1031,14 +1031,14 @@ wrapperTag: div
|
|
|
1031
1031
|
class="pf-c-form-control"
|
|
1032
1032
|
required
|
|
1033
1033
|
type="text"
|
|
1034
|
-
id="-form-field2"
|
|
1035
|
-
name="-form-field2"
|
|
1034
|
+
id="-wizard-form-field2"
|
|
1035
|
+
name="-wizard-form-field2"
|
|
1036
1036
|
/>
|
|
1037
1037
|
</div>
|
|
1038
1038
|
</div>
|
|
1039
1039
|
<div class="pf-c-form__group">
|
|
1040
1040
|
<div class="pf-c-form__group-label">
|
|
1041
|
-
<label class="pf-c-form__label" for="-form-field3">
|
|
1041
|
+
<label class="pf-c-form__label" for="-wizard-form-field3">
|
|
1042
1042
|
<span class="pf-c-form__label-text">Field 3</span>
|
|
1043
1043
|
<span
|
|
1044
1044
|
class="pf-c-form__label-required"
|
|
@@ -1051,14 +1051,14 @@ wrapperTag: div
|
|
|
1051
1051
|
class="pf-c-form-control"
|
|
1052
1052
|
required
|
|
1053
1053
|
type="text"
|
|
1054
|
-
id="-form-field3"
|
|
1055
|
-
name="-form-field3"
|
|
1054
|
+
id="-wizard-form-field3"
|
|
1055
|
+
name="-wizard-form-field3"
|
|
1056
1056
|
/>
|
|
1057
1057
|
</div>
|
|
1058
1058
|
</div>
|
|
1059
1059
|
<div class="pf-c-form__group">
|
|
1060
1060
|
<div class="pf-c-form__group-label">
|
|
1061
|
-
<label class="pf-c-form__label" for="-form-field4">
|
|
1061
|
+
<label class="pf-c-form__label" for="-wizard-form-field4">
|
|
1062
1062
|
<span class="pf-c-form__label-text">Field 4</span>
|
|
1063
1063
|
<span
|
|
1064
1064
|
class="pf-c-form__label-required"
|
|
@@ -1071,14 +1071,14 @@ wrapperTag: div
|
|
|
1071
1071
|
class="pf-c-form-control"
|
|
1072
1072
|
required
|
|
1073
1073
|
type="text"
|
|
1074
|
-
id="-form-field4"
|
|
1075
|
-
name="-form-field4"
|
|
1074
|
+
id="-wizard-form-field4"
|
|
1075
|
+
name="-wizard-form-field4"
|
|
1076
1076
|
/>
|
|
1077
1077
|
</div>
|
|
1078
1078
|
</div>
|
|
1079
1079
|
<div class="pf-c-form__group">
|
|
1080
1080
|
<div class="pf-c-form__group-label">
|
|
1081
|
-
<label class="pf-c-form__label" for="-form-field5">
|
|
1081
|
+
<label class="pf-c-form__label" for="-wizard-form-field5">
|
|
1082
1082
|
<span class="pf-c-form__label-text">Field 5</span>
|
|
1083
1083
|
<span
|
|
1084
1084
|
class="pf-c-form__label-required"
|
|
@@ -1091,14 +1091,14 @@ wrapperTag: div
|
|
|
1091
1091
|
class="pf-c-form-control"
|
|
1092
1092
|
required
|
|
1093
1093
|
type="text"
|
|
1094
|
-
id="-form-field5"
|
|
1095
|
-
name="-form-field5"
|
|
1094
|
+
id="-wizard-form-field5"
|
|
1095
|
+
name="-wizard-form-field5"
|
|
1096
1096
|
/>
|
|
1097
1097
|
</div>
|
|
1098
1098
|
</div>
|
|
1099
1099
|
<div class="pf-c-form__group">
|
|
1100
1100
|
<div class="pf-c-form__group-label">
|
|
1101
|
-
<label class="pf-c-form__label" for="-form-field6">
|
|
1101
|
+
<label class="pf-c-form__label" for="-wizard-form-field6">
|
|
1102
1102
|
<span class="pf-c-form__label-text">Field 6</span>
|
|
1103
1103
|
<span
|
|
1104
1104
|
class="pf-c-form__label-required"
|
|
@@ -1111,14 +1111,14 @@ wrapperTag: div
|
|
|
1111
1111
|
class="pf-c-form-control"
|
|
1112
1112
|
required
|
|
1113
1113
|
type="text"
|
|
1114
|
-
id="-form-field6"
|
|
1115
|
-
name="-form-field6"
|
|
1114
|
+
id="-wizard-form-field6"
|
|
1115
|
+
name="-wizard-form-field6"
|
|
1116
1116
|
/>
|
|
1117
1117
|
</div>
|
|
1118
1118
|
</div>
|
|
1119
1119
|
<div class="pf-c-form__group">
|
|
1120
1120
|
<div class="pf-c-form__group-label">
|
|
1121
|
-
<label class="pf-c-form__label" for="-form-field7">
|
|
1121
|
+
<label class="pf-c-form__label" for="-wizard-form-field7">
|
|
1122
1122
|
<span class="pf-c-form__label-text">Field 7</span>
|
|
1123
1123
|
<span
|
|
1124
1124
|
class="pf-c-form__label-required"
|
|
@@ -1131,8 +1131,8 @@ wrapperTag: div
|
|
|
1131
1131
|
class="pf-c-form-control"
|
|
1132
1132
|
required
|
|
1133
1133
|
type="text"
|
|
1134
|
-
id="-form-field7"
|
|
1135
|
-
name="-form-field7"
|
|
1134
|
+
id="-wizard-form-field7"
|
|
1135
|
+
name="-wizard-form-field7"
|
|
1136
1136
|
/>
|
|
1137
1137
|
</div>
|
|
1138
1138
|
</div>
|
|
@@ -2146,7 +2146,7 @@ wrapperTag: div
|
|
|
2146
2146
|
</nav>
|
|
2147
2147
|
<main class="pf-c-wizard__main" tabindex="0">
|
|
2148
2148
|
<div class="pf-c-wizard__main-body">
|
|
2149
|
-
<form
|
|
2149
|
+
<form class="pf-c-form pf-m-limit-width" novalidate>
|
|
2150
2150
|
<div class="pf-c-form__group">
|
|
2151
2151
|
<div class="pf-c-form__group-label">
|
|
2152
2152
|
<label class="pf-c-form__label" for="-form-field1">
|
|
@@ -3300,10 +3300,13 @@ wrapperTag: div
|
|
|
3300
3300
|
class="pf-c-button pf-u-hidden pf-m-link pf-m-inline pf-u-float-right pf-u-ml-md"
|
|
3301
3301
|
type="button"
|
|
3302
3302
|
>Open drawer</button>
|
|
3303
|
-
<form
|
|
3303
|
+
<form class="pf-c-form pf-m-limit-width" novalidate>
|
|
3304
3304
|
<div class="pf-c-form__group">
|
|
3305
3305
|
<div class="pf-c-form__group-label">
|
|
3306
|
-
<label
|
|
3306
|
+
<label
|
|
3307
|
+
class="pf-c-form__label"
|
|
3308
|
+
for="-wizard-form-field1"
|
|
3309
|
+
>
|
|
3307
3310
|
<span class="pf-c-form__label-text">Field 1</span>
|
|
3308
3311
|
<span
|
|
3309
3312
|
class="pf-c-form__label-required"
|
|
@@ -3316,14 +3319,17 @@ wrapperTag: div
|
|
|
3316
3319
|
class="pf-c-form-control"
|
|
3317
3320
|
required
|
|
3318
3321
|
type="text"
|
|
3319
|
-
id="-form-field1"
|
|
3320
|
-
name="-form-field1"
|
|
3322
|
+
id="-wizard-form-field1"
|
|
3323
|
+
name="-wizard-form-field1"
|
|
3321
3324
|
/>
|
|
3322
3325
|
</div>
|
|
3323
3326
|
</div>
|
|
3324
3327
|
<div class="pf-c-form__group">
|
|
3325
3328
|
<div class="pf-c-form__group-label">
|
|
3326
|
-
<label
|
|
3329
|
+
<label
|
|
3330
|
+
class="pf-c-form__label"
|
|
3331
|
+
for="-wizard-form-field2"
|
|
3332
|
+
>
|
|
3327
3333
|
<span class="pf-c-form__label-text">Field 2</span>
|
|
3328
3334
|
<span
|
|
3329
3335
|
class="pf-c-form__label-required"
|
|
@@ -3336,14 +3342,17 @@ wrapperTag: div
|
|
|
3336
3342
|
class="pf-c-form-control"
|
|
3337
3343
|
required
|
|
3338
3344
|
type="text"
|
|
3339
|
-
id="-form-field2"
|
|
3340
|
-
name="-form-field2"
|
|
3345
|
+
id="-wizard-form-field2"
|
|
3346
|
+
name="-wizard-form-field2"
|
|
3341
3347
|
/>
|
|
3342
3348
|
</div>
|
|
3343
3349
|
</div>
|
|
3344
3350
|
<div class="pf-c-form__group">
|
|
3345
3351
|
<div class="pf-c-form__group-label">
|
|
3346
|
-
<label
|
|
3352
|
+
<label
|
|
3353
|
+
class="pf-c-form__label"
|
|
3354
|
+
for="-wizard-form-field3"
|
|
3355
|
+
>
|
|
3347
3356
|
<span class="pf-c-form__label-text">Field 3</span>
|
|
3348
3357
|
<span
|
|
3349
3358
|
class="pf-c-form__label-required"
|
|
@@ -3356,14 +3365,17 @@ wrapperTag: div
|
|
|
3356
3365
|
class="pf-c-form-control"
|
|
3357
3366
|
required
|
|
3358
3367
|
type="text"
|
|
3359
|
-
id="-form-field3"
|
|
3360
|
-
name="-form-field3"
|
|
3368
|
+
id="-wizard-form-field3"
|
|
3369
|
+
name="-wizard-form-field3"
|
|
3361
3370
|
/>
|
|
3362
3371
|
</div>
|
|
3363
3372
|
</div>
|
|
3364
3373
|
<div class="pf-c-form__group">
|
|
3365
3374
|
<div class="pf-c-form__group-label">
|
|
3366
|
-
<label
|
|
3375
|
+
<label
|
|
3376
|
+
class="pf-c-form__label"
|
|
3377
|
+
for="-wizard-form-field4"
|
|
3378
|
+
>
|
|
3367
3379
|
<span class="pf-c-form__label-text">Field 4</span>
|
|
3368
3380
|
<span
|
|
3369
3381
|
class="pf-c-form__label-required"
|
|
@@ -3376,14 +3388,17 @@ wrapperTag: div
|
|
|
3376
3388
|
class="pf-c-form-control"
|
|
3377
3389
|
required
|
|
3378
3390
|
type="text"
|
|
3379
|
-
id="-form-field4"
|
|
3380
|
-
name="-form-field4"
|
|
3391
|
+
id="-wizard-form-field4"
|
|
3392
|
+
name="-wizard-form-field4"
|
|
3381
3393
|
/>
|
|
3382
3394
|
</div>
|
|
3383
3395
|
</div>
|
|
3384
3396
|
<div class="pf-c-form__group">
|
|
3385
3397
|
<div class="pf-c-form__group-label">
|
|
3386
|
-
<label
|
|
3398
|
+
<label
|
|
3399
|
+
class="pf-c-form__label"
|
|
3400
|
+
for="-wizard-form-field5"
|
|
3401
|
+
>
|
|
3387
3402
|
<span class="pf-c-form__label-text">Field 5</span>
|
|
3388
3403
|
<span
|
|
3389
3404
|
class="pf-c-form__label-required"
|
|
@@ -3396,14 +3411,17 @@ wrapperTag: div
|
|
|
3396
3411
|
class="pf-c-form-control"
|
|
3397
3412
|
required
|
|
3398
3413
|
type="text"
|
|
3399
|
-
id="-form-field5"
|
|
3400
|
-
name="-form-field5"
|
|
3414
|
+
id="-wizard-form-field5"
|
|
3415
|
+
name="-wizard-form-field5"
|
|
3401
3416
|
/>
|
|
3402
3417
|
</div>
|
|
3403
3418
|
</div>
|
|
3404
3419
|
<div class="pf-c-form__group">
|
|
3405
3420
|
<div class="pf-c-form__group-label">
|
|
3406
|
-
<label
|
|
3421
|
+
<label
|
|
3422
|
+
class="pf-c-form__label"
|
|
3423
|
+
for="-wizard-form-field6"
|
|
3424
|
+
>
|
|
3407
3425
|
<span class="pf-c-form__label-text">Field 6</span>
|
|
3408
3426
|
<span
|
|
3409
3427
|
class="pf-c-form__label-required"
|
|
@@ -3416,14 +3434,17 @@ wrapperTag: div
|
|
|
3416
3434
|
class="pf-c-form-control"
|
|
3417
3435
|
required
|
|
3418
3436
|
type="text"
|
|
3419
|
-
id="-form-field6"
|
|
3420
|
-
name="-form-field6"
|
|
3437
|
+
id="-wizard-form-field6"
|
|
3438
|
+
name="-wizard-form-field6"
|
|
3421
3439
|
/>
|
|
3422
3440
|
</div>
|
|
3423
3441
|
</div>
|
|
3424
3442
|
<div class="pf-c-form__group">
|
|
3425
3443
|
<div class="pf-c-form__group-label">
|
|
3426
|
-
<label
|
|
3444
|
+
<label
|
|
3445
|
+
class="pf-c-form__label"
|
|
3446
|
+
for="-wizard-form-field7"
|
|
3447
|
+
>
|
|
3427
3448
|
<span class="pf-c-form__label-text">Field 7</span>
|
|
3428
3449
|
<span
|
|
3429
3450
|
class="pf-c-form__label-required"
|
|
@@ -3436,8 +3457,8 @@ wrapperTag: div
|
|
|
3436
3457
|
class="pf-c-form-control"
|
|
3437
3458
|
required
|
|
3438
3459
|
type="text"
|
|
3439
|
-
id="-form-field7"
|
|
3440
|
-
name="-form-field7"
|
|
3460
|
+
id="-wizard-form-field7"
|
|
3461
|
+
name="-wizard-form-field7"
|
|
3441
3462
|
/>
|
|
3442
3463
|
</div>
|
|
3443
3464
|
</div>
|
|
@@ -4508,10 +4529,13 @@ wrapperTag: div
|
|
|
4508
4529
|
class="pf-c-button pf-u-hidden pf-m-link pf-m-inline pf-u-float-right pf-u-ml-md"
|
|
4509
4530
|
type="button"
|
|
4510
4531
|
>Open drawer</button>
|
|
4511
|
-
<form
|
|
4532
|
+
<form class="pf-c-form pf-m-limit-width" novalidate>
|
|
4512
4533
|
<div class="pf-c-form__group">
|
|
4513
4534
|
<div class="pf-c-form__group-label">
|
|
4514
|
-
<label
|
|
4535
|
+
<label
|
|
4536
|
+
class="pf-c-form__label"
|
|
4537
|
+
for="-wizard-form-field1"
|
|
4538
|
+
>
|
|
4515
4539
|
<span class="pf-c-form__label-text">Field 1</span>
|
|
4516
4540
|
<span
|
|
4517
4541
|
class="pf-c-form__label-required"
|
|
@@ -4524,14 +4548,17 @@ wrapperTag: div
|
|
|
4524
4548
|
class="pf-c-form-control"
|
|
4525
4549
|
required
|
|
4526
4550
|
type="text"
|
|
4527
|
-
id="-form-field1"
|
|
4528
|
-
name="-form-field1"
|
|
4551
|
+
id="-wizard-form-field1"
|
|
4552
|
+
name="-wizard-form-field1"
|
|
4529
4553
|
/>
|
|
4530
4554
|
</div>
|
|
4531
4555
|
</div>
|
|
4532
4556
|
<div class="pf-c-form__group">
|
|
4533
4557
|
<div class="pf-c-form__group-label">
|
|
4534
|
-
<label
|
|
4558
|
+
<label
|
|
4559
|
+
class="pf-c-form__label"
|
|
4560
|
+
for="-wizard-form-field2"
|
|
4561
|
+
>
|
|
4535
4562
|
<span class="pf-c-form__label-text">Field 2</span>
|
|
4536
4563
|
<span
|
|
4537
4564
|
class="pf-c-form__label-required"
|
|
@@ -4544,14 +4571,17 @@ wrapperTag: div
|
|
|
4544
4571
|
class="pf-c-form-control"
|
|
4545
4572
|
required
|
|
4546
4573
|
type="text"
|
|
4547
|
-
id="-form-field2"
|
|
4548
|
-
name="-form-field2"
|
|
4574
|
+
id="-wizard-form-field2"
|
|
4575
|
+
name="-wizard-form-field2"
|
|
4549
4576
|
/>
|
|
4550
4577
|
</div>
|
|
4551
4578
|
</div>
|
|
4552
4579
|
<div class="pf-c-form__group">
|
|
4553
4580
|
<div class="pf-c-form__group-label">
|
|
4554
|
-
<label
|
|
4581
|
+
<label
|
|
4582
|
+
class="pf-c-form__label"
|
|
4583
|
+
for="-wizard-form-field3"
|
|
4584
|
+
>
|
|
4555
4585
|
<span class="pf-c-form__label-text">Field 3</span>
|
|
4556
4586
|
<span
|
|
4557
4587
|
class="pf-c-form__label-required"
|
|
@@ -4564,14 +4594,17 @@ wrapperTag: div
|
|
|
4564
4594
|
class="pf-c-form-control"
|
|
4565
4595
|
required
|
|
4566
4596
|
type="text"
|
|
4567
|
-
id="-form-field3"
|
|
4568
|
-
name="-form-field3"
|
|
4597
|
+
id="-wizard-form-field3"
|
|
4598
|
+
name="-wizard-form-field3"
|
|
4569
4599
|
/>
|
|
4570
4600
|
</div>
|
|
4571
4601
|
</div>
|
|
4572
4602
|
<div class="pf-c-form__group">
|
|
4573
4603
|
<div class="pf-c-form__group-label">
|
|
4574
|
-
<label
|
|
4604
|
+
<label
|
|
4605
|
+
class="pf-c-form__label"
|
|
4606
|
+
for="-wizard-form-field4"
|
|
4607
|
+
>
|
|
4575
4608
|
<span class="pf-c-form__label-text">Field 4</span>
|
|
4576
4609
|
<span
|
|
4577
4610
|
class="pf-c-form__label-required"
|
|
@@ -4584,14 +4617,17 @@ wrapperTag: div
|
|
|
4584
4617
|
class="pf-c-form-control"
|
|
4585
4618
|
required
|
|
4586
4619
|
type="text"
|
|
4587
|
-
id="-form-field4"
|
|
4588
|
-
name="-form-field4"
|
|
4620
|
+
id="-wizard-form-field4"
|
|
4621
|
+
name="-wizard-form-field4"
|
|
4589
4622
|
/>
|
|
4590
4623
|
</div>
|
|
4591
4624
|
</div>
|
|
4592
4625
|
<div class="pf-c-form__group">
|
|
4593
4626
|
<div class="pf-c-form__group-label">
|
|
4594
|
-
<label
|
|
4627
|
+
<label
|
|
4628
|
+
class="pf-c-form__label"
|
|
4629
|
+
for="-wizard-form-field5"
|
|
4630
|
+
>
|
|
4595
4631
|
<span class="pf-c-form__label-text">Field 5</span>
|
|
4596
4632
|
<span
|
|
4597
4633
|
class="pf-c-form__label-required"
|
|
@@ -4604,14 +4640,17 @@ wrapperTag: div
|
|
|
4604
4640
|
class="pf-c-form-control"
|
|
4605
4641
|
required
|
|
4606
4642
|
type="text"
|
|
4607
|
-
id="-form-field5"
|
|
4608
|
-
name="-form-field5"
|
|
4643
|
+
id="-wizard-form-field5"
|
|
4644
|
+
name="-wizard-form-field5"
|
|
4609
4645
|
/>
|
|
4610
4646
|
</div>
|
|
4611
4647
|
</div>
|
|
4612
4648
|
<div class="pf-c-form__group">
|
|
4613
4649
|
<div class="pf-c-form__group-label">
|
|
4614
|
-
<label
|
|
4650
|
+
<label
|
|
4651
|
+
class="pf-c-form__label"
|
|
4652
|
+
for="-wizard-form-field6"
|
|
4653
|
+
>
|
|
4615
4654
|
<span class="pf-c-form__label-text">Field 6</span>
|
|
4616
4655
|
<span
|
|
4617
4656
|
class="pf-c-form__label-required"
|
|
@@ -4624,14 +4663,17 @@ wrapperTag: div
|
|
|
4624
4663
|
class="pf-c-form-control"
|
|
4625
4664
|
required
|
|
4626
4665
|
type="text"
|
|
4627
|
-
id="-form-field6"
|
|
4628
|
-
name="-form-field6"
|
|
4666
|
+
id="-wizard-form-field6"
|
|
4667
|
+
name="-wizard-form-field6"
|
|
4629
4668
|
/>
|
|
4630
4669
|
</div>
|
|
4631
4670
|
</div>
|
|
4632
4671
|
<div class="pf-c-form__group">
|
|
4633
4672
|
<div class="pf-c-form__group-label">
|
|
4634
|
-
<label
|
|
4673
|
+
<label
|
|
4674
|
+
class="pf-c-form__label"
|
|
4675
|
+
for="-wizard-form-field7"
|
|
4676
|
+
>
|
|
4635
4677
|
<span class="pf-c-form__label-text">Field 7</span>
|
|
4636
4678
|
<span
|
|
4637
4679
|
class="pf-c-form__label-required"
|
|
@@ -4644,8 +4686,8 @@ wrapperTag: div
|
|
|
4644
4686
|
class="pf-c-form-control"
|
|
4645
4687
|
required
|
|
4646
4688
|
type="text"
|
|
4647
|
-
id="-form-field7"
|
|
4648
|
-
name="-form-field7"
|
|
4689
|
+
id="-wizard-form-field7"
|
|
4690
|
+
name="-wizard-form-field7"
|
|
4649
4691
|
/>
|
|
4650
4692
|
</div>
|
|
4651
4693
|
</div>
|
|
@@ -6662,222 +6704,241 @@ wrapperTag: div
|
|
|
6662
6704
|
</div>
|
|
6663
6705
|
</section>
|
|
6664
6706
|
|
|
6665
|
-
<section class="pf-c-page__main-wizard
|
|
6666
|
-
<div class="pf-c-
|
|
6667
|
-
<
|
|
6668
|
-
|
|
6669
|
-
|
|
6670
|
-
|
|
6671
|
-
|
|
6672
|
-
>
|
|
6673
|
-
<span class="pf-c-wizard__toggle-list">
|
|
6674
|
-
<span class="pf-c-wizard__toggle-
|
|
6675
|
-
|
|
6676
|
-
|
|
6677
|
-
|
|
6678
|
-
|
|
6679
|
-
|
|
6680
|
-
></i>
|
|
6681
|
-
</span>
|
|
6682
|
-
<span class="pf-c-wizard__toggle-list-item">Substep B</span>
|
|
6683
|
-
</span>
|
|
6684
|
-
<span class="pf-c-wizard__toggle-icon">
|
|
6685
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
6707
|
+
<section class="pf-c-page__main-wizard">
|
|
6708
|
+
<div class="pf-c-wizard">
|
|
6709
|
+
<button
|
|
6710
|
+
aria-label="Wizard Header Toggle"
|
|
6711
|
+
class="pf-c-wizard__toggle"
|
|
6712
|
+
aria-expanded="false"
|
|
6713
|
+
>
|
|
6714
|
+
<span class="pf-c-wizard__toggle-list">
|
|
6715
|
+
<span class="pf-c-wizard__toggle-list-item">
|
|
6716
|
+
<span class="pf-c-wizard__toggle-num">2</span>
|
|
6717
|
+
Configuration
|
|
6718
|
+
<i
|
|
6719
|
+
class="fas fa-angle-right pf-c-wizard__toggle-separator"
|
|
6720
|
+
aria-hidden="true"
|
|
6721
|
+
></i>
|
|
6686
6722
|
</span>
|
|
6687
|
-
|
|
6688
|
-
|
|
6689
|
-
|
|
6690
|
-
|
|
6691
|
-
|
|
6692
|
-
|
|
6693
|
-
|
|
6694
|
-
|
|
6695
|
-
|
|
6696
|
-
|
|
6697
|
-
|
|
6698
|
-
|
|
6699
|
-
|
|
6700
|
-
|
|
6701
|
-
|
|
6702
|
-
|
|
6703
|
-
|
|
6704
|
-
|
|
6705
|
-
|
|
6706
|
-
|
|
6707
|
-
|
|
6708
|
-
|
|
6709
|
-
<
|
|
6710
|
-
|
|
6711
|
-
|
|
6712
|
-
|
|
6713
|
-
|
|
6714
|
-
|
|
6715
|
-
|
|
6716
|
-
|
|
6717
|
-
|
|
6718
|
-
|
|
6719
|
-
|
|
6720
|
-
|
|
6721
|
-
|
|
6722
|
-
|
|
6723
|
-
|
|
6724
|
-
|
|
6725
|
-
|
|
6726
|
-
|
|
6727
|
-
|
|
6728
|
-
|
|
6729
|
-
|
|
6730
|
-
|
|
6731
|
-
|
|
6732
|
-
|
|
6733
|
-
|
|
6734
|
-
|
|
6735
|
-
|
|
6736
|
-
|
|
6737
|
-
|
|
6738
|
-
|
|
6739
|
-
|
|
6740
|
-
<
|
|
6741
|
-
|
|
6742
|
-
required
|
|
6743
|
-
|
|
6744
|
-
|
|
6745
|
-
|
|
6746
|
-
/>
|
|
6747
|
-
</div>
|
|
6723
|
+
<span class="pf-c-wizard__toggle-list-item">Substep B</span>
|
|
6724
|
+
</span>
|
|
6725
|
+
<span class="pf-c-wizard__toggle-icon">
|
|
6726
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
6727
|
+
</span>
|
|
6728
|
+
</button>
|
|
6729
|
+
<div class="pf-c-wizard__outer-wrap">
|
|
6730
|
+
<div class="pf-c-wizard__inner-wrap">
|
|
6731
|
+
<nav class="pf-c-wizard__nav" aria-label="Steps">
|
|
6732
|
+
<ol class="pf-c-wizard__nav-list">
|
|
6733
|
+
<li class="pf-c-wizard__nav-item">
|
|
6734
|
+
<button class="pf-c-wizard__nav-link">Information</button>
|
|
6735
|
+
</li>
|
|
6736
|
+
<li class="pf-c-wizard__nav-item">
|
|
6737
|
+
<button
|
|
6738
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
6739
|
+
>Configuration</button>
|
|
6740
|
+
<ol class="pf-c-wizard__nav-list">
|
|
6741
|
+
<li class="pf-c-wizard__nav-item">
|
|
6742
|
+
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
6743
|
+
</li>
|
|
6744
|
+
<li class="pf-c-wizard__nav-item">
|
|
6745
|
+
<button
|
|
6746
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
6747
|
+
aria-current="page"
|
|
6748
|
+
>Substep B</button>
|
|
6749
|
+
</li>
|
|
6750
|
+
<li class="pf-c-wizard__nav-item">
|
|
6751
|
+
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
6752
|
+
</li>
|
|
6753
|
+
</ol>
|
|
6754
|
+
</li>
|
|
6755
|
+
<li class="pf-c-wizard__nav-item">
|
|
6756
|
+
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
6757
|
+
</li>
|
|
6758
|
+
<li class="pf-c-wizard__nav-item">
|
|
6759
|
+
<button
|
|
6760
|
+
class="pf-c-wizard__nav-link pf-m-disabled"
|
|
6761
|
+
aria-disabled="true"
|
|
6762
|
+
tabindex="-1"
|
|
6763
|
+
>Review</button>
|
|
6764
|
+
</li>
|
|
6765
|
+
</ol>
|
|
6766
|
+
</nav>
|
|
6767
|
+
<div class="pf-c-wizard__main" tabindex="0">
|
|
6768
|
+
<div class="pf-c-wizard__main-body">
|
|
6769
|
+
<form class="pf-c-form pf-m-limit-width" novalidate>
|
|
6770
|
+
<div class="pf-c-form__group">
|
|
6771
|
+
<div class="pf-c-form__group-label">
|
|
6772
|
+
<label
|
|
6773
|
+
class="pf-c-form__label"
|
|
6774
|
+
for="wizard-in-page-example-wizard-form-field1"
|
|
6775
|
+
>
|
|
6776
|
+
<span class="pf-c-form__label-text">Field 1</span>
|
|
6777
|
+
<span
|
|
6778
|
+
class="pf-c-form__label-required"
|
|
6779
|
+
aria-hidden="true"
|
|
6780
|
+
>*</span>
|
|
6781
|
+
</label>
|
|
6748
6782
|
</div>
|
|
6749
|
-
<div class="pf-c-form__group">
|
|
6750
|
-
<
|
|
6751
|
-
|
|
6752
|
-
|
|
6753
|
-
|
|
6754
|
-
|
|
6755
|
-
|
|
6756
|
-
|
|
6757
|
-
</label>
|
|
6758
|
-
</div>
|
|
6759
|
-
<div class="pf-c-form__group-control">
|
|
6760
|
-
<input
|
|
6761
|
-
class="pf-c-form-control"
|
|
6762
|
-
required
|
|
6763
|
-
type="text"
|
|
6764
|
-
id="-form-field2"
|
|
6765
|
-
name="-form-field2"
|
|
6766
|
-
/>
|
|
6767
|
-
</div>
|
|
6783
|
+
<div class="pf-c-form__group-control">
|
|
6784
|
+
<input
|
|
6785
|
+
class="pf-c-form-control"
|
|
6786
|
+
required
|
|
6787
|
+
type="text"
|
|
6788
|
+
id="wizard-in-page-example-wizard-form-field1"
|
|
6789
|
+
name="wizard-in-page-example-wizard-form-field1"
|
|
6790
|
+
/>
|
|
6768
6791
|
</div>
|
|
6769
|
-
|
|
6770
|
-
|
|
6771
|
-
|
|
6772
|
-
|
|
6773
|
-
|
|
6774
|
-
|
|
6775
|
-
|
|
6776
|
-
|
|
6777
|
-
|
|
6778
|
-
|
|
6779
|
-
|
|
6780
|
-
|
|
6781
|
-
|
|
6782
|
-
required
|
|
6783
|
-
type="text"
|
|
6784
|
-
id="-form-field3"
|
|
6785
|
-
name="-form-field3"
|
|
6786
|
-
/>
|
|
6787
|
-
</div>
|
|
6792
|
+
</div>
|
|
6793
|
+
<div class="pf-c-form__group">
|
|
6794
|
+
<div class="pf-c-form__group-label">
|
|
6795
|
+
<label
|
|
6796
|
+
class="pf-c-form__label"
|
|
6797
|
+
for="wizard-in-page-example-wizard-form-field2"
|
|
6798
|
+
>
|
|
6799
|
+
<span class="pf-c-form__label-text">Field 2</span>
|
|
6800
|
+
<span
|
|
6801
|
+
class="pf-c-form__label-required"
|
|
6802
|
+
aria-hidden="true"
|
|
6803
|
+
>*</span>
|
|
6804
|
+
</label>
|
|
6788
6805
|
</div>
|
|
6789
|
-
<div class="pf-c-form__group">
|
|
6790
|
-
<
|
|
6791
|
-
|
|
6792
|
-
|
|
6793
|
-
|
|
6794
|
-
|
|
6795
|
-
|
|
6796
|
-
|
|
6797
|
-
</label>
|
|
6798
|
-
</div>
|
|
6799
|
-
<div class="pf-c-form__group-control">
|
|
6800
|
-
<input
|
|
6801
|
-
class="pf-c-form-control"
|
|
6802
|
-
required
|
|
6803
|
-
type="text"
|
|
6804
|
-
id="-form-field4"
|
|
6805
|
-
name="-form-field4"
|
|
6806
|
-
/>
|
|
6807
|
-
</div>
|
|
6806
|
+
<div class="pf-c-form__group-control">
|
|
6807
|
+
<input
|
|
6808
|
+
class="pf-c-form-control"
|
|
6809
|
+
required
|
|
6810
|
+
type="text"
|
|
6811
|
+
id="wizard-in-page-example-wizard-form-field2"
|
|
6812
|
+
name="wizard-in-page-example-wizard-form-field2"
|
|
6813
|
+
/>
|
|
6808
6814
|
</div>
|
|
6809
|
-
|
|
6810
|
-
|
|
6811
|
-
|
|
6812
|
-
|
|
6813
|
-
|
|
6814
|
-
|
|
6815
|
-
|
|
6816
|
-
|
|
6817
|
-
|
|
6818
|
-
|
|
6819
|
-
|
|
6820
|
-
|
|
6821
|
-
|
|
6822
|
-
required
|
|
6823
|
-
type="text"
|
|
6824
|
-
id="-form-field5"
|
|
6825
|
-
name="-form-field5"
|
|
6826
|
-
/>
|
|
6827
|
-
</div>
|
|
6815
|
+
</div>
|
|
6816
|
+
<div class="pf-c-form__group">
|
|
6817
|
+
<div class="pf-c-form__group-label">
|
|
6818
|
+
<label
|
|
6819
|
+
class="pf-c-form__label"
|
|
6820
|
+
for="wizard-in-page-example-wizard-form-field3"
|
|
6821
|
+
>
|
|
6822
|
+
<span class="pf-c-form__label-text">Field 3</span>
|
|
6823
|
+
<span
|
|
6824
|
+
class="pf-c-form__label-required"
|
|
6825
|
+
aria-hidden="true"
|
|
6826
|
+
>*</span>
|
|
6827
|
+
</label>
|
|
6828
6828
|
</div>
|
|
6829
|
-
<div class="pf-c-form__group">
|
|
6830
|
-
<
|
|
6831
|
-
|
|
6832
|
-
|
|
6833
|
-
|
|
6834
|
-
|
|
6835
|
-
|
|
6836
|
-
|
|
6837
|
-
</label>
|
|
6838
|
-
</div>
|
|
6839
|
-
<div class="pf-c-form__group-control">
|
|
6840
|
-
<input
|
|
6841
|
-
class="pf-c-form-control"
|
|
6842
|
-
required
|
|
6843
|
-
type="text"
|
|
6844
|
-
id="-form-field6"
|
|
6845
|
-
name="-form-field6"
|
|
6846
|
-
/>
|
|
6847
|
-
</div>
|
|
6829
|
+
<div class="pf-c-form__group-control">
|
|
6830
|
+
<input
|
|
6831
|
+
class="pf-c-form-control"
|
|
6832
|
+
required
|
|
6833
|
+
type="text"
|
|
6834
|
+
id="wizard-in-page-example-wizard-form-field3"
|
|
6835
|
+
name="wizard-in-page-example-wizard-form-field3"
|
|
6836
|
+
/>
|
|
6848
6837
|
</div>
|
|
6849
|
-
|
|
6850
|
-
|
|
6851
|
-
|
|
6852
|
-
|
|
6853
|
-
|
|
6854
|
-
|
|
6855
|
-
|
|
6856
|
-
|
|
6857
|
-
|
|
6858
|
-
|
|
6859
|
-
|
|
6860
|
-
|
|
6861
|
-
|
|
6862
|
-
required
|
|
6863
|
-
type="text"
|
|
6864
|
-
id="-form-field7"
|
|
6865
|
-
name="-form-field7"
|
|
6866
|
-
/>
|
|
6867
|
-
</div>
|
|
6838
|
+
</div>
|
|
6839
|
+
<div class="pf-c-form__group">
|
|
6840
|
+
<div class="pf-c-form__group-label">
|
|
6841
|
+
<label
|
|
6842
|
+
class="pf-c-form__label"
|
|
6843
|
+
for="wizard-in-page-example-wizard-form-field4"
|
|
6844
|
+
>
|
|
6845
|
+
<span class="pf-c-form__label-text">Field 4</span>
|
|
6846
|
+
<span
|
|
6847
|
+
class="pf-c-form__label-required"
|
|
6848
|
+
aria-hidden="true"
|
|
6849
|
+
>*</span>
|
|
6850
|
+
</label>
|
|
6868
6851
|
</div>
|
|
6869
|
-
|
|
6870
|
-
|
|
6852
|
+
<div class="pf-c-form__group-control">
|
|
6853
|
+
<input
|
|
6854
|
+
class="pf-c-form-control"
|
|
6855
|
+
required
|
|
6856
|
+
type="text"
|
|
6857
|
+
id="wizard-in-page-example-wizard-form-field4"
|
|
6858
|
+
name="wizard-in-page-example-wizard-form-field4"
|
|
6859
|
+
/>
|
|
6860
|
+
</div>
|
|
6861
|
+
</div>
|
|
6862
|
+
<div class="pf-c-form__group">
|
|
6863
|
+
<div class="pf-c-form__group-label">
|
|
6864
|
+
<label
|
|
6865
|
+
class="pf-c-form__label"
|
|
6866
|
+
for="wizard-in-page-example-wizard-form-field5"
|
|
6867
|
+
>
|
|
6868
|
+
<span class="pf-c-form__label-text">Field 5</span>
|
|
6869
|
+
<span
|
|
6870
|
+
class="pf-c-form__label-required"
|
|
6871
|
+
aria-hidden="true"
|
|
6872
|
+
>*</span>
|
|
6873
|
+
</label>
|
|
6874
|
+
</div>
|
|
6875
|
+
<div class="pf-c-form__group-control">
|
|
6876
|
+
<input
|
|
6877
|
+
class="pf-c-form-control"
|
|
6878
|
+
required
|
|
6879
|
+
type="text"
|
|
6880
|
+
id="wizard-in-page-example-wizard-form-field5"
|
|
6881
|
+
name="wizard-in-page-example-wizard-form-field5"
|
|
6882
|
+
/>
|
|
6883
|
+
</div>
|
|
6884
|
+
</div>
|
|
6885
|
+
<div class="pf-c-form__group">
|
|
6886
|
+
<div class="pf-c-form__group-label">
|
|
6887
|
+
<label
|
|
6888
|
+
class="pf-c-form__label"
|
|
6889
|
+
for="wizard-in-page-example-wizard-form-field6"
|
|
6890
|
+
>
|
|
6891
|
+
<span class="pf-c-form__label-text">Field 6</span>
|
|
6892
|
+
<span
|
|
6893
|
+
class="pf-c-form__label-required"
|
|
6894
|
+
aria-hidden="true"
|
|
6895
|
+
>*</span>
|
|
6896
|
+
</label>
|
|
6897
|
+
</div>
|
|
6898
|
+
<div class="pf-c-form__group-control">
|
|
6899
|
+
<input
|
|
6900
|
+
class="pf-c-form-control"
|
|
6901
|
+
required
|
|
6902
|
+
type="text"
|
|
6903
|
+
id="wizard-in-page-example-wizard-form-field6"
|
|
6904
|
+
name="wizard-in-page-example-wizard-form-field6"
|
|
6905
|
+
/>
|
|
6906
|
+
</div>
|
|
6907
|
+
</div>
|
|
6908
|
+
<div class="pf-c-form__group">
|
|
6909
|
+
<div class="pf-c-form__group-label">
|
|
6910
|
+
<label
|
|
6911
|
+
class="pf-c-form__label"
|
|
6912
|
+
for="wizard-in-page-example-wizard-form-field7"
|
|
6913
|
+
>
|
|
6914
|
+
<span class="pf-c-form__label-text">Field 7</span>
|
|
6915
|
+
<span
|
|
6916
|
+
class="pf-c-form__label-required"
|
|
6917
|
+
aria-hidden="true"
|
|
6918
|
+
>*</span>
|
|
6919
|
+
</label>
|
|
6920
|
+
</div>
|
|
6921
|
+
<div class="pf-c-form__group-control">
|
|
6922
|
+
<input
|
|
6923
|
+
class="pf-c-form-control"
|
|
6924
|
+
required
|
|
6925
|
+
type="text"
|
|
6926
|
+
id="wizard-in-page-example-wizard-form-field7"
|
|
6927
|
+
name="wizard-in-page-example-wizard-form-field7"
|
|
6928
|
+
/>
|
|
6929
|
+
</div>
|
|
6930
|
+
</div>
|
|
6931
|
+
</form>
|
|
6871
6932
|
</div>
|
|
6872
6933
|
</div>
|
|
6873
|
-
<footer class="pf-c-wizard__footer">
|
|
6874
|
-
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
6875
|
-
<button class="pf-c-button pf-m-secondary" type="button">Back</button>
|
|
6876
|
-
<div class="pf-c-wizard__footer-cancel">
|
|
6877
|
-
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
6878
|
-
</div>
|
|
6879
|
-
</footer>
|
|
6880
6934
|
</div>
|
|
6935
|
+
<footer class="pf-c-wizard__footer">
|
|
6936
|
+
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
6937
|
+
<button class="pf-c-button pf-m-secondary" type="button">Back</button>
|
|
6938
|
+
<div class="pf-c-wizard__footer-cancel">
|
|
6939
|
+
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
6940
|
+
</div>
|
|
6941
|
+
</footer>
|
|
6881
6942
|
</div>
|
|
6882
6943
|
</div>
|
|
6883
6944
|
</section>
|
|
@@ -7757,223 +7818,1383 @@ wrapperTag: div
|
|
|
7757
7818
|
</div>
|
|
7758
7819
|
</section>
|
|
7759
7820
|
|
|
7760
|
-
<section class="pf-c-page__main-wizard
|
|
7761
|
-
<div class="pf-c-
|
|
7762
|
-
<
|
|
7763
|
-
|
|
7764
|
-
|
|
7765
|
-
|
|
7766
|
-
|
|
7767
|
-
>
|
|
7768
|
-
<span class="pf-c-wizard__toggle-list">
|
|
7769
|
-
<span class="pf-c-wizard__toggle-
|
|
7770
|
-
|
|
7771
|
-
|
|
7772
|
-
|
|
7773
|
-
|
|
7774
|
-
|
|
7775
|
-
|
|
7821
|
+
<section class="pf-c-page__main-wizard">
|
|
7822
|
+
<div class="pf-c-wizard">
|
|
7823
|
+
<button
|
|
7824
|
+
aria-label="Wizard Header Toggle"
|
|
7825
|
+
class="pf-c-wizard__toggle pf-m-expanded"
|
|
7826
|
+
aria-expanded="true"
|
|
7827
|
+
>
|
|
7828
|
+
<span class="pf-c-wizard__toggle-list">
|
|
7829
|
+
<span class="pf-c-wizard__toggle-list-item">
|
|
7830
|
+
<span class="pf-c-wizard__toggle-num">2</span>
|
|
7831
|
+
Configuration
|
|
7832
|
+
<i
|
|
7833
|
+
class="fas fa-angle-right pf-c-wizard__toggle-separator"
|
|
7834
|
+
aria-hidden="true"
|
|
7835
|
+
></i>
|
|
7836
|
+
</span>
|
|
7837
|
+
<span class="pf-c-wizard__toggle-list-item">Substep B</span>
|
|
7838
|
+
</span>
|
|
7839
|
+
<span class="pf-c-wizard__toggle-icon">
|
|
7840
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
7841
|
+
</span>
|
|
7842
|
+
</button>
|
|
7843
|
+
<div class="pf-c-wizard__outer-wrap">
|
|
7844
|
+
<div class="pf-c-wizard__inner-wrap">
|
|
7845
|
+
<nav class="pf-c-wizard__nav pf-m-expanded" aria-label="Steps">
|
|
7846
|
+
<ol class="pf-c-wizard__nav-list">
|
|
7847
|
+
<li class="pf-c-wizard__nav-item">
|
|
7848
|
+
<button class="pf-c-wizard__nav-link">Information</button>
|
|
7849
|
+
</li>
|
|
7850
|
+
<li class="pf-c-wizard__nav-item">
|
|
7851
|
+
<button
|
|
7852
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
7853
|
+
>Configuration</button>
|
|
7854
|
+
<ol class="pf-c-wizard__nav-list">
|
|
7855
|
+
<li class="pf-c-wizard__nav-item">
|
|
7856
|
+
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
7857
|
+
</li>
|
|
7858
|
+
<li class="pf-c-wizard__nav-item">
|
|
7859
|
+
<button
|
|
7860
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
7861
|
+
aria-current="page"
|
|
7862
|
+
>Substep B</button>
|
|
7863
|
+
</li>
|
|
7864
|
+
<li class="pf-c-wizard__nav-item">
|
|
7865
|
+
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
7866
|
+
</li>
|
|
7867
|
+
</ol>
|
|
7868
|
+
</li>
|
|
7869
|
+
<li class="pf-c-wizard__nav-item">
|
|
7870
|
+
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
7871
|
+
</li>
|
|
7872
|
+
<li class="pf-c-wizard__nav-item">
|
|
7873
|
+
<button
|
|
7874
|
+
class="pf-c-wizard__nav-link pf-m-disabled"
|
|
7875
|
+
aria-disabled="true"
|
|
7876
|
+
tabindex="-1"
|
|
7877
|
+
>Review</button>
|
|
7878
|
+
</li>
|
|
7879
|
+
</ol>
|
|
7880
|
+
</nav>
|
|
7881
|
+
<div class="pf-c-wizard__main" tabindex="0">
|
|
7882
|
+
<div class="pf-c-wizard__main-body">
|
|
7883
|
+
<form class="pf-c-form pf-m-limit-width" novalidate>
|
|
7884
|
+
<div class="pf-c-form__group">
|
|
7885
|
+
<div class="pf-c-form__group-label">
|
|
7886
|
+
<label class="pf-c-form__label" for="-form-field1">
|
|
7887
|
+
<span class="pf-c-form__label-text">Field 1</span>
|
|
7888
|
+
<span
|
|
7889
|
+
class="pf-c-form__label-required"
|
|
7890
|
+
aria-hidden="true"
|
|
7891
|
+
>*</span>
|
|
7892
|
+
</label>
|
|
7893
|
+
</div>
|
|
7894
|
+
<div class="pf-c-form__group-control">
|
|
7895
|
+
<input
|
|
7896
|
+
class="pf-c-form-control"
|
|
7897
|
+
required
|
|
7898
|
+
type="text"
|
|
7899
|
+
id="-form-field1"
|
|
7900
|
+
name="-form-field1"
|
|
7901
|
+
/>
|
|
7902
|
+
</div>
|
|
7903
|
+
</div>
|
|
7904
|
+
<div class="pf-c-form__group">
|
|
7905
|
+
<div class="pf-c-form__group-label">
|
|
7906
|
+
<label class="pf-c-form__label" for="-form-field2">
|
|
7907
|
+
<span class="pf-c-form__label-text">Field 2</span>
|
|
7908
|
+
<span
|
|
7909
|
+
class="pf-c-form__label-required"
|
|
7910
|
+
aria-hidden="true"
|
|
7911
|
+
>*</span>
|
|
7912
|
+
</label>
|
|
7913
|
+
</div>
|
|
7914
|
+
<div class="pf-c-form__group-control">
|
|
7915
|
+
<input
|
|
7916
|
+
class="pf-c-form-control"
|
|
7917
|
+
required
|
|
7918
|
+
type="text"
|
|
7919
|
+
id="-form-field2"
|
|
7920
|
+
name="-form-field2"
|
|
7921
|
+
/>
|
|
7922
|
+
</div>
|
|
7923
|
+
</div>
|
|
7924
|
+
<div class="pf-c-form__group">
|
|
7925
|
+
<div class="pf-c-form__group-label">
|
|
7926
|
+
<label class="pf-c-form__label" for="-form-field3">
|
|
7927
|
+
<span class="pf-c-form__label-text">Field 3</span>
|
|
7928
|
+
<span
|
|
7929
|
+
class="pf-c-form__label-required"
|
|
7930
|
+
aria-hidden="true"
|
|
7931
|
+
>*</span>
|
|
7932
|
+
</label>
|
|
7933
|
+
</div>
|
|
7934
|
+
<div class="pf-c-form__group-control">
|
|
7935
|
+
<input
|
|
7936
|
+
class="pf-c-form-control"
|
|
7937
|
+
required
|
|
7938
|
+
type="text"
|
|
7939
|
+
id="-form-field3"
|
|
7940
|
+
name="-form-field3"
|
|
7941
|
+
/>
|
|
7942
|
+
</div>
|
|
7943
|
+
</div>
|
|
7944
|
+
<div class="pf-c-form__group">
|
|
7945
|
+
<div class="pf-c-form__group-label">
|
|
7946
|
+
<label class="pf-c-form__label" for="-form-field4">
|
|
7947
|
+
<span class="pf-c-form__label-text">Field 4</span>
|
|
7948
|
+
<span
|
|
7949
|
+
class="pf-c-form__label-required"
|
|
7950
|
+
aria-hidden="true"
|
|
7951
|
+
>*</span>
|
|
7952
|
+
</label>
|
|
7953
|
+
</div>
|
|
7954
|
+
<div class="pf-c-form__group-control">
|
|
7955
|
+
<input
|
|
7956
|
+
class="pf-c-form-control"
|
|
7957
|
+
required
|
|
7958
|
+
type="text"
|
|
7959
|
+
id="-form-field4"
|
|
7960
|
+
name="-form-field4"
|
|
7961
|
+
/>
|
|
7962
|
+
</div>
|
|
7963
|
+
</div>
|
|
7964
|
+
<div class="pf-c-form__group">
|
|
7965
|
+
<div class="pf-c-form__group-label">
|
|
7966
|
+
<label class="pf-c-form__label" for="-form-field5">
|
|
7967
|
+
<span class="pf-c-form__label-text">Field 5</span>
|
|
7968
|
+
<span
|
|
7969
|
+
class="pf-c-form__label-required"
|
|
7970
|
+
aria-hidden="true"
|
|
7971
|
+
>*</span>
|
|
7972
|
+
</label>
|
|
7973
|
+
</div>
|
|
7974
|
+
<div class="pf-c-form__group-control">
|
|
7975
|
+
<input
|
|
7976
|
+
class="pf-c-form-control"
|
|
7977
|
+
required
|
|
7978
|
+
type="text"
|
|
7979
|
+
id="-form-field5"
|
|
7980
|
+
name="-form-field5"
|
|
7981
|
+
/>
|
|
7982
|
+
</div>
|
|
7983
|
+
</div>
|
|
7984
|
+
<div class="pf-c-form__group">
|
|
7985
|
+
<div class="pf-c-form__group-label">
|
|
7986
|
+
<label class="pf-c-form__label" for="-form-field6">
|
|
7987
|
+
<span class="pf-c-form__label-text">Field 6</span>
|
|
7988
|
+
<span
|
|
7989
|
+
class="pf-c-form__label-required"
|
|
7990
|
+
aria-hidden="true"
|
|
7991
|
+
>*</span>
|
|
7992
|
+
</label>
|
|
7993
|
+
</div>
|
|
7994
|
+
<div class="pf-c-form__group-control">
|
|
7995
|
+
<input
|
|
7996
|
+
class="pf-c-form-control"
|
|
7997
|
+
required
|
|
7998
|
+
type="text"
|
|
7999
|
+
id="-form-field6"
|
|
8000
|
+
name="-form-field6"
|
|
8001
|
+
/>
|
|
8002
|
+
</div>
|
|
8003
|
+
</div>
|
|
8004
|
+
<div class="pf-c-form__group">
|
|
8005
|
+
<div class="pf-c-form__group-label">
|
|
8006
|
+
<label class="pf-c-form__label" for="-form-field7">
|
|
8007
|
+
<span class="pf-c-form__label-text">Field 7</span>
|
|
8008
|
+
<span
|
|
8009
|
+
class="pf-c-form__label-required"
|
|
8010
|
+
aria-hidden="true"
|
|
8011
|
+
>*</span>
|
|
8012
|
+
</label>
|
|
8013
|
+
</div>
|
|
8014
|
+
<div class="pf-c-form__group-control">
|
|
8015
|
+
<input
|
|
8016
|
+
class="pf-c-form-control"
|
|
8017
|
+
required
|
|
8018
|
+
type="text"
|
|
8019
|
+
id="-form-field7"
|
|
8020
|
+
name="-form-field7"
|
|
8021
|
+
/>
|
|
8022
|
+
</div>
|
|
8023
|
+
</div>
|
|
8024
|
+
</form>
|
|
8025
|
+
</div>
|
|
8026
|
+
</div>
|
|
8027
|
+
</div>
|
|
8028
|
+
<footer class="pf-c-wizard__footer">
|
|
8029
|
+
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
8030
|
+
<button class="pf-c-button pf-m-secondary" type="button">Back</button>
|
|
8031
|
+
<div class="pf-c-wizard__footer-cancel">
|
|
8032
|
+
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
8033
|
+
</div>
|
|
8034
|
+
</footer>
|
|
8035
|
+
</div>
|
|
8036
|
+
</div>
|
|
8037
|
+
</section>
|
|
8038
|
+
</main>
|
|
8039
|
+
</div>
|
|
8040
|
+
|
|
8041
|
+
```
|
|
8042
|
+
|
|
8043
|
+
### With drawer, in page
|
|
8044
|
+
|
|
8045
|
+
```html isFullscreen
|
|
8046
|
+
<div class="pf-c-page" id="wizard-with-drawer-in-page-example">
|
|
8047
|
+
<a
|
|
8048
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
8049
|
+
href="#main-content-wizard-with-drawer-in-page-example"
|
|
8050
|
+
>Skip to content</a>
|
|
8051
|
+
<header
|
|
8052
|
+
class="pf-c-masthead"
|
|
8053
|
+
id="wizard-with-drawer-in-page-example-masthead"
|
|
8054
|
+
>
|
|
8055
|
+
<span class="pf-c-masthead__toggle">
|
|
8056
|
+
<button
|
|
8057
|
+
class="pf-c-button pf-m-plain"
|
|
8058
|
+
type="button"
|
|
8059
|
+
aria-label="Global navigation"
|
|
8060
|
+
>
|
|
8061
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
8062
|
+
</button>
|
|
8063
|
+
</span>
|
|
8064
|
+
<div class="pf-c-masthead__main">
|
|
8065
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
8066
|
+
<picture
|
|
8067
|
+
class="pf-c-brand pf-m-picture"
|
|
8068
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
8069
|
+
>
|
|
8070
|
+
<source
|
|
8071
|
+
media="(min-width: 768px)"
|
|
8072
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
8073
|
+
/>
|
|
8074
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
8075
|
+
<img
|
|
8076
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
8077
|
+
alt="Fallback patternFly default logo"
|
|
8078
|
+
/>
|
|
8079
|
+
</picture>
|
|
8080
|
+
</a>
|
|
8081
|
+
</div>
|
|
8082
|
+
<div class="pf-c-masthead__content">
|
|
8083
|
+
<div
|
|
8084
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
8085
|
+
id="wizard-with-drawer-in-page-example-masthead-toolbar"
|
|
8086
|
+
>
|
|
8087
|
+
<div class="pf-c-toolbar__content">
|
|
8088
|
+
<div class="pf-c-toolbar__content-section">
|
|
8089
|
+
<div
|
|
8090
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
8091
|
+
>
|
|
8092
|
+
<div
|
|
8093
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
8094
|
+
>
|
|
8095
|
+
<div class="pf-c-toolbar__item">
|
|
8096
|
+
<nav
|
|
8097
|
+
class="pf-c-app-launcher"
|
|
8098
|
+
aria-label="Application launcher"
|
|
8099
|
+
id="wizard-with-drawer-in-page-example-masthead-application-launcher"
|
|
8100
|
+
>
|
|
8101
|
+
<button
|
|
8102
|
+
class="pf-c-app-launcher__toggle"
|
|
8103
|
+
type="button"
|
|
8104
|
+
id="wizard-with-drawer-in-page-example-masthead-application-launcher-button"
|
|
8105
|
+
aria-expanded="false"
|
|
8106
|
+
aria-label="Application launcher"
|
|
8107
|
+
>
|
|
8108
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
8109
|
+
</button>
|
|
8110
|
+
<div
|
|
8111
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
8112
|
+
hidden
|
|
8113
|
+
>
|
|
8114
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
8115
|
+
<div class="pf-c-search-input">
|
|
8116
|
+
<div class="pf-c-search-input__bar">
|
|
8117
|
+
<span class="pf-c-search-input__text">
|
|
8118
|
+
<span class="pf-c-search-input__icon">
|
|
8119
|
+
<i
|
|
8120
|
+
class="fas fa-search fa-fw"
|
|
8121
|
+
aria-hidden="true"
|
|
8122
|
+
></i>
|
|
8123
|
+
</span>
|
|
8124
|
+
<input
|
|
8125
|
+
class="pf-c-search-input__text-input"
|
|
8126
|
+
type="text"
|
|
8127
|
+
placeholder="Filter by name"
|
|
8128
|
+
aria-label="Filter by name"
|
|
8129
|
+
/>
|
|
8130
|
+
</span>
|
|
8131
|
+
</div>
|
|
8132
|
+
</div>
|
|
8133
|
+
</div>
|
|
8134
|
+
<section class="pf-c-app-launcher__group">
|
|
8135
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
8136
|
+
<ul>
|
|
8137
|
+
<li
|
|
8138
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
8139
|
+
>
|
|
8140
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
8141
|
+
Link 1
|
|
8142
|
+
<span
|
|
8143
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
8144
|
+
>
|
|
8145
|
+
<i
|
|
8146
|
+
class="fas fa-external-link-alt"
|
|
8147
|
+
aria-hidden="true"
|
|
8148
|
+
></i>
|
|
8149
|
+
</span>
|
|
8150
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
8151
|
+
</a>
|
|
8152
|
+
<button
|
|
8153
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
8154
|
+
type="button"
|
|
8155
|
+
aria-label="Favorite"
|
|
8156
|
+
>
|
|
8157
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
8158
|
+
</button>
|
|
8159
|
+
</li>
|
|
8160
|
+
<li
|
|
8161
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
8162
|
+
>
|
|
8163
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
8164
|
+
Link 2
|
|
8165
|
+
<span
|
|
8166
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
8167
|
+
>
|
|
8168
|
+
<i
|
|
8169
|
+
class="fas fa-external-link-alt"
|
|
8170
|
+
aria-hidden="true"
|
|
8171
|
+
></i>
|
|
8172
|
+
</span>
|
|
8173
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
8174
|
+
</a>
|
|
8175
|
+
<button
|
|
8176
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
8177
|
+
type="button"
|
|
8178
|
+
aria-label="Favorite"
|
|
8179
|
+
>
|
|
8180
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
8181
|
+
</button>
|
|
8182
|
+
</li>
|
|
8183
|
+
</ul>
|
|
8184
|
+
</section>
|
|
8185
|
+
<hr class="pf-c-divider" />
|
|
8186
|
+
<section class="pf-c-app-launcher__group">
|
|
8187
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
8188
|
+
<ul>
|
|
8189
|
+
<li
|
|
8190
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
8191
|
+
>
|
|
8192
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
8193
|
+
Link 1
|
|
8194
|
+
<span
|
|
8195
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
8196
|
+
>
|
|
8197
|
+
<i
|
|
8198
|
+
class="fas fa-external-link-alt"
|
|
8199
|
+
aria-hidden="true"
|
|
8200
|
+
></i>
|
|
8201
|
+
</span>
|
|
8202
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
8203
|
+
</a>
|
|
8204
|
+
<button
|
|
8205
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
8206
|
+
type="button"
|
|
8207
|
+
aria-label="Favorite"
|
|
8208
|
+
>
|
|
8209
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
8210
|
+
</button>
|
|
8211
|
+
</li>
|
|
8212
|
+
<li
|
|
8213
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
8214
|
+
>
|
|
8215
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
8216
|
+
Link 2
|
|
8217
|
+
<span
|
|
8218
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
8219
|
+
>
|
|
8220
|
+
<i
|
|
8221
|
+
class="fas fa-external-link-alt"
|
|
8222
|
+
aria-hidden="true"
|
|
8223
|
+
></i>
|
|
8224
|
+
</span>
|
|
8225
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
8226
|
+
</a>
|
|
8227
|
+
<button
|
|
8228
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
8229
|
+
type="button"
|
|
8230
|
+
aria-label="Favorite"
|
|
8231
|
+
>
|
|
8232
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
8233
|
+
</button>
|
|
8234
|
+
</li>
|
|
8235
|
+
</ul>
|
|
8236
|
+
</section>
|
|
8237
|
+
</div>
|
|
8238
|
+
</nav>
|
|
8239
|
+
</div>
|
|
8240
|
+
<div class="pf-c-toolbar__item">
|
|
8241
|
+
<div class="pf-c-dropdown">
|
|
8242
|
+
<button
|
|
8243
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
8244
|
+
id="wizard-with-drawer-in-page-example-masthead-settings-button"
|
|
8245
|
+
aria-expanded="false"
|
|
8246
|
+
type="button"
|
|
8247
|
+
aria-label="Settings"
|
|
8248
|
+
>
|
|
8249
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
8250
|
+
</button>
|
|
8251
|
+
<ul
|
|
8252
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
8253
|
+
aria-labelledby="wizard-with-drawer-in-page-example-masthead-settings-button"
|
|
8254
|
+
hidden
|
|
8255
|
+
>
|
|
8256
|
+
<li>
|
|
8257
|
+
<button
|
|
8258
|
+
class="pf-c-dropdown__menu-item"
|
|
8259
|
+
type="button"
|
|
8260
|
+
>Settings</button>
|
|
8261
|
+
</li>
|
|
8262
|
+
<li>
|
|
8263
|
+
<button
|
|
8264
|
+
class="pf-c-dropdown__menu-item"
|
|
8265
|
+
type="button"
|
|
8266
|
+
>Use the beta release</button>
|
|
8267
|
+
</li>
|
|
8268
|
+
</ul>
|
|
8269
|
+
</div>
|
|
8270
|
+
</div>
|
|
8271
|
+
<div class="pf-c-toolbar__item">
|
|
8272
|
+
<div class="pf-c-dropdown">
|
|
8273
|
+
<button
|
|
8274
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
8275
|
+
id="wizard-with-drawer-in-page-example-masthead-help-button"
|
|
8276
|
+
aria-expanded="false"
|
|
8277
|
+
type="button"
|
|
8278
|
+
aria-label="Help"
|
|
8279
|
+
>
|
|
8280
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
8281
|
+
</button>
|
|
8282
|
+
<ul
|
|
8283
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
8284
|
+
aria-labelledby="wizard-with-drawer-in-page-example-masthead-help-button"
|
|
8285
|
+
hidden
|
|
8286
|
+
>
|
|
8287
|
+
<li>
|
|
8288
|
+
<button
|
|
8289
|
+
class="pf-c-dropdown__menu-item"
|
|
8290
|
+
type="button"
|
|
8291
|
+
>Support options</button>
|
|
8292
|
+
</li>
|
|
8293
|
+
<li>
|
|
8294
|
+
<button
|
|
8295
|
+
class="pf-c-dropdown__menu-item"
|
|
8296
|
+
type="button"
|
|
8297
|
+
>Open support case</button>
|
|
8298
|
+
</li>
|
|
8299
|
+
<li>
|
|
8300
|
+
<button
|
|
8301
|
+
class="pf-c-dropdown__menu-item"
|
|
8302
|
+
type="button"
|
|
8303
|
+
>API documentation</button>
|
|
8304
|
+
</li>
|
|
8305
|
+
</ul>
|
|
8306
|
+
</div>
|
|
8307
|
+
</div>
|
|
8308
|
+
</div>
|
|
8309
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
8310
|
+
<div class="pf-c-dropdown">
|
|
8311
|
+
<button
|
|
8312
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
8313
|
+
type="button"
|
|
8314
|
+
aria-expanded="false"
|
|
8315
|
+
aria-label="Actions"
|
|
8316
|
+
>
|
|
8317
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
8318
|
+
</button>
|
|
8319
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
8320
|
+
<div class="pf-c-menu__content">
|
|
8321
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
8322
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
8323
|
+
<li
|
|
8324
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
8325
|
+
role="none"
|
|
8326
|
+
>
|
|
8327
|
+
<button
|
|
8328
|
+
class="pf-c-menu__item"
|
|
8329
|
+
type="button"
|
|
8330
|
+
disabled
|
|
8331
|
+
role="menuitem"
|
|
8332
|
+
>
|
|
8333
|
+
<span class="pf-c-menu__item-description">
|
|
8334
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
8335
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
8336
|
+
</span>
|
|
8337
|
+
</button>
|
|
8338
|
+
</li>
|
|
8339
|
+
<li
|
|
8340
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
8341
|
+
role="none"
|
|
8342
|
+
>
|
|
8343
|
+
<button
|
|
8344
|
+
class="pf-c-menu__item"
|
|
8345
|
+
type="button"
|
|
8346
|
+
disabled
|
|
8347
|
+
role="menuitem"
|
|
8348
|
+
>
|
|
8349
|
+
<span class="pf-c-menu__item-description">
|
|
8350
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
8351
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
8352
|
+
</span>
|
|
8353
|
+
</button>
|
|
8354
|
+
</li>
|
|
8355
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
8356
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8357
|
+
<button
|
|
8358
|
+
class="pf-c-menu__item"
|
|
8359
|
+
type="button"
|
|
8360
|
+
role="menuitem"
|
|
8361
|
+
>
|
|
8362
|
+
<span class="pf-c-menu__item-main">
|
|
8363
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
8364
|
+
</span>
|
|
8365
|
+
</button>
|
|
8366
|
+
</li>
|
|
8367
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8368
|
+
<button
|
|
8369
|
+
class="pf-c-menu__item"
|
|
8370
|
+
type="button"
|
|
8371
|
+
role="menuitem"
|
|
8372
|
+
>
|
|
8373
|
+
<span class="pf-c-menu__item-main">
|
|
8374
|
+
<span
|
|
8375
|
+
class="pf-c-menu__item-text"
|
|
8376
|
+
>User management</span>
|
|
8377
|
+
</span>
|
|
8378
|
+
</button>
|
|
8379
|
+
</li>
|
|
8380
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8381
|
+
<button
|
|
8382
|
+
class="pf-c-menu__item"
|
|
8383
|
+
type="button"
|
|
8384
|
+
role="menuitem"
|
|
8385
|
+
>
|
|
8386
|
+
<span class="pf-c-menu__item-main">
|
|
8387
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
8388
|
+
</span>
|
|
8389
|
+
</button>
|
|
8390
|
+
</li>
|
|
8391
|
+
</ul>
|
|
8392
|
+
</section>
|
|
8393
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
8394
|
+
<section class="pf-c-menu__group">
|
|
8395
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
8396
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8397
|
+
<button
|
|
8398
|
+
class="pf-c-menu__item"
|
|
8399
|
+
type="button"
|
|
8400
|
+
role="menuitem"
|
|
8401
|
+
aria-expanded="false"
|
|
8402
|
+
>
|
|
8403
|
+
<span class="pf-c-menu__item-main">
|
|
8404
|
+
<span class="pf-c-menu__item-icon">
|
|
8405
|
+
<i
|
|
8406
|
+
class="fas fa-fw fa-cog"
|
|
8407
|
+
aria-hidden="true"
|
|
8408
|
+
></i>
|
|
8409
|
+
</span>
|
|
8410
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
8411
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
8412
|
+
<i class="fas fa-angle-right"></i>
|
|
8413
|
+
</span>
|
|
8414
|
+
</span>
|
|
8415
|
+
</button>
|
|
8416
|
+
<div class="pf-c-menu" hidden>
|
|
8417
|
+
<div class="pf-c-menu__content">
|
|
8418
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
8419
|
+
<li
|
|
8420
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
8421
|
+
role="none"
|
|
8422
|
+
>
|
|
8423
|
+
<button
|
|
8424
|
+
class="pf-c-menu__item"
|
|
8425
|
+
type="button"
|
|
8426
|
+
role="menuitem"
|
|
8427
|
+
>
|
|
8428
|
+
<span class="pf-c-menu__item-main">
|
|
8429
|
+
<span
|
|
8430
|
+
class="pf-c-menu__item-toggle-icon"
|
|
8431
|
+
>
|
|
8432
|
+
<i class="fas fa-angle-left"></i>
|
|
8433
|
+
</span>
|
|
8434
|
+
<span class="pf-c-menu__item-icon">
|
|
8435
|
+
<i
|
|
8436
|
+
class="fas fa-fw fa-cog"
|
|
8437
|
+
aria-hidden="true"
|
|
8438
|
+
></i>
|
|
8439
|
+
</span>
|
|
8440
|
+
<span
|
|
8441
|
+
class="pf-c-menu__item-text"
|
|
8442
|
+
>Settings</span>
|
|
8443
|
+
</span>
|
|
8444
|
+
</button>
|
|
8445
|
+
</li>
|
|
8446
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
8447
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8448
|
+
<a
|
|
8449
|
+
class="pf-c-menu__item"
|
|
8450
|
+
href="#"
|
|
8451
|
+
role="menuitem"
|
|
8452
|
+
>
|
|
8453
|
+
<span class="pf-c-menu__item-main">
|
|
8454
|
+
<span
|
|
8455
|
+
class="pf-c-menu__item-text"
|
|
8456
|
+
>Customer support</span>
|
|
8457
|
+
</span>
|
|
8458
|
+
</a>
|
|
8459
|
+
</li>
|
|
8460
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8461
|
+
<a
|
|
8462
|
+
class="pf-c-menu__item"
|
|
8463
|
+
href="#"
|
|
8464
|
+
role="menuitem"
|
|
8465
|
+
>
|
|
8466
|
+
<span class="pf-c-menu__item-main">
|
|
8467
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
8468
|
+
</span>
|
|
8469
|
+
</a>
|
|
8470
|
+
</li>
|
|
8471
|
+
</ul>
|
|
8472
|
+
</div>
|
|
8473
|
+
</div>
|
|
8474
|
+
</li>
|
|
8475
|
+
|
|
8476
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8477
|
+
<button
|
|
8478
|
+
class="pf-c-menu__item"
|
|
8479
|
+
type="button"
|
|
8480
|
+
role="menuitem"
|
|
8481
|
+
aria-expanded="false"
|
|
8482
|
+
>
|
|
8483
|
+
<span class="pf-c-menu__item-main">
|
|
8484
|
+
<span class="pf-c-menu__item-icon">
|
|
8485
|
+
<i
|
|
8486
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
8487
|
+
aria-hidden="true"
|
|
8488
|
+
></i>
|
|
8489
|
+
</span>
|
|
8490
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
8491
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
8492
|
+
<i class="fas fa-angle-right"></i>
|
|
8493
|
+
</span>
|
|
8494
|
+
</span>
|
|
8495
|
+
</button>
|
|
8496
|
+
<div class="pf-c-menu" hidden>
|
|
8497
|
+
<div class="pf-c-menu__content">
|
|
8498
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
8499
|
+
<li
|
|
8500
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
8501
|
+
role="none"
|
|
8502
|
+
>
|
|
8503
|
+
<button
|
|
8504
|
+
class="pf-c-menu__item"
|
|
8505
|
+
type="button"
|
|
8506
|
+
role="menuitem"
|
|
8507
|
+
>
|
|
8508
|
+
<span class="pf-c-menu__item-main">
|
|
8509
|
+
<span
|
|
8510
|
+
class="pf-c-menu__item-toggle-icon"
|
|
8511
|
+
>
|
|
8512
|
+
<i class="fas fa-angle-left"></i>
|
|
8513
|
+
</span>
|
|
8514
|
+
<span class="pf-c-menu__item-icon">
|
|
8515
|
+
<i
|
|
8516
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
8517
|
+
aria-hidden="true"
|
|
8518
|
+
></i>
|
|
8519
|
+
</span>
|
|
8520
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
8521
|
+
</span>
|
|
8522
|
+
</button>
|
|
8523
|
+
</li>
|
|
8524
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
8525
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8526
|
+
<a
|
|
8527
|
+
class="pf-c-menu__item"
|
|
8528
|
+
href="#"
|
|
8529
|
+
role="menuitem"
|
|
8530
|
+
>
|
|
8531
|
+
<span class="pf-c-menu__item-main">
|
|
8532
|
+
<span
|
|
8533
|
+
class="pf-c-menu__item-text"
|
|
8534
|
+
>Support options</span>
|
|
8535
|
+
</span>
|
|
8536
|
+
</a>
|
|
8537
|
+
</li>
|
|
8538
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8539
|
+
<a
|
|
8540
|
+
class="pf-c-menu__item"
|
|
8541
|
+
href="#"
|
|
8542
|
+
role="menuitem"
|
|
8543
|
+
>
|
|
8544
|
+
<span class="pf-c-menu__item-main">
|
|
8545
|
+
<span
|
|
8546
|
+
class="pf-c-menu__item-text"
|
|
8547
|
+
>Open support case</span>
|
|
8548
|
+
</span>
|
|
8549
|
+
</a>
|
|
8550
|
+
</li>
|
|
8551
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8552
|
+
<a
|
|
8553
|
+
class="pf-c-menu__item"
|
|
8554
|
+
href="#"
|
|
8555
|
+
role="menuitem"
|
|
8556
|
+
>
|
|
8557
|
+
<span class="pf-c-menu__item-main">
|
|
8558
|
+
<span
|
|
8559
|
+
class="pf-c-menu__item-text"
|
|
8560
|
+
>API documentation</span>
|
|
8561
|
+
</span>
|
|
8562
|
+
</a>
|
|
8563
|
+
</li>
|
|
8564
|
+
</ul>
|
|
8565
|
+
</div>
|
|
8566
|
+
</div>
|
|
8567
|
+
</li>
|
|
8568
|
+
|
|
8569
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8570
|
+
<button
|
|
8571
|
+
class="pf-c-menu__item"
|
|
8572
|
+
type="button"
|
|
8573
|
+
role="menuitem"
|
|
8574
|
+
>
|
|
8575
|
+
<span class="pf-c-menu__item-main">
|
|
8576
|
+
<span class="pf-c-menu__item-icon">
|
|
8577
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
8578
|
+
</span>
|
|
8579
|
+
<span
|
|
8580
|
+
class="pf-c-menu__item-text"
|
|
8581
|
+
>Application launcher</span>
|
|
8582
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
8583
|
+
<i class="fas fa-angle-right"></i>
|
|
8584
|
+
</span>
|
|
8585
|
+
</span>
|
|
8586
|
+
</button>
|
|
8587
|
+
<div class="pf-c-menu" hidden>
|
|
8588
|
+
<div class="pf-c-menu__header">
|
|
8589
|
+
<button
|
|
8590
|
+
class="pf-c-menu__item"
|
|
8591
|
+
type="button"
|
|
8592
|
+
role="menuitem"
|
|
8593
|
+
>
|
|
8594
|
+
<span class="pf-c-menu__item-main">
|
|
8595
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
8596
|
+
<i class="fas fa-angle-left"></i>
|
|
8597
|
+
</span>
|
|
8598
|
+
<span class="pf-c-menu__item-icon">
|
|
8599
|
+
<i
|
|
8600
|
+
class="fas fa-fw fa-th"
|
|
8601
|
+
aria-hidden="true"
|
|
8602
|
+
></i>
|
|
8603
|
+
</span>
|
|
8604
|
+
<span
|
|
8605
|
+
class="pf-c-menu__item-text"
|
|
8606
|
+
>Application launcher</span>
|
|
8607
|
+
</span>
|
|
8608
|
+
</button>
|
|
8609
|
+
</div>
|
|
8610
|
+
<div class="pf-c-menu__search">
|
|
8611
|
+
<div class="pf-c-menu__search-input">
|
|
8612
|
+
<div class="pf-c-search-input">
|
|
8613
|
+
<div class="pf-c-search-input__bar">
|
|
8614
|
+
<span class="pf-c-search-input__text">
|
|
8615
|
+
<span class="pf-c-search-input__icon">
|
|
8616
|
+
<i
|
|
8617
|
+
class="fas fa-search fa-fw"
|
|
8618
|
+
aria-hidden="true"
|
|
8619
|
+
></i>
|
|
8620
|
+
</span>
|
|
8621
|
+
<input
|
|
8622
|
+
class="pf-c-search-input__text-input"
|
|
8623
|
+
type="text"
|
|
8624
|
+
placeholder="Search"
|
|
8625
|
+
aria-label="Search"
|
|
8626
|
+
/>
|
|
8627
|
+
</span>
|
|
8628
|
+
</div>
|
|
8629
|
+
</div>
|
|
8630
|
+
</div>
|
|
8631
|
+
</div>
|
|
8632
|
+
<hr class="pf-c-divider" />
|
|
8633
|
+
<section class="pf-c-menu__group">
|
|
8634
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
8635
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
8636
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8637
|
+
<a
|
|
8638
|
+
class="pf-c-menu__item"
|
|
8639
|
+
href="#"
|
|
8640
|
+
role="menuitem"
|
|
8641
|
+
>
|
|
8642
|
+
<span class="pf-c-menu__item-main">
|
|
8643
|
+
<span
|
|
8644
|
+
class="pf-c-menu__item-text"
|
|
8645
|
+
>Link 1</span>
|
|
8646
|
+
</span>
|
|
8647
|
+
</a>
|
|
8648
|
+
<button
|
|
8649
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
8650
|
+
type="button"
|
|
8651
|
+
aria-label="Starred"
|
|
8652
|
+
>
|
|
8653
|
+
<span class="pf-c-menu__item-action-icon">
|
|
8654
|
+
<i
|
|
8655
|
+
class="fas fa-star"
|
|
8656
|
+
aria-hidden="true"
|
|
8657
|
+
></i>
|
|
8658
|
+
</span>
|
|
8659
|
+
</button>
|
|
8660
|
+
</li>
|
|
8661
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8662
|
+
<a
|
|
8663
|
+
class="pf-c-menu__item"
|
|
8664
|
+
href="#"
|
|
8665
|
+
role="menuitem"
|
|
8666
|
+
target="_blank"
|
|
8667
|
+
>
|
|
8668
|
+
<span class="pf-c-menu__item-main">
|
|
8669
|
+
<span
|
|
8670
|
+
class="pf-c-menu__item-text"
|
|
8671
|
+
>Link 2</span>
|
|
8672
|
+
<span
|
|
8673
|
+
class="pf-c-menu__item-external-icon"
|
|
8674
|
+
>
|
|
8675
|
+
<i
|
|
8676
|
+
class="fas fa-external-link-alt"
|
|
8677
|
+
aria-hidden="true"
|
|
8678
|
+
></i>
|
|
8679
|
+
</span>
|
|
8680
|
+
<span
|
|
8681
|
+
class="pf-screen-reader"
|
|
8682
|
+
>(opens new window)</span>
|
|
8683
|
+
</span>
|
|
8684
|
+
</a>
|
|
8685
|
+
<button
|
|
8686
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
8687
|
+
type="button"
|
|
8688
|
+
aria-label="Not starred"
|
|
8689
|
+
>
|
|
8690
|
+
<span class="pf-c-menu__item-action-icon">
|
|
8691
|
+
<i
|
|
8692
|
+
class="fas fa-star"
|
|
8693
|
+
aria-hidden="true"
|
|
8694
|
+
></i>
|
|
8695
|
+
</span>
|
|
8696
|
+
</button>
|
|
8697
|
+
</li>
|
|
8698
|
+
</ul>
|
|
8699
|
+
</section>
|
|
8700
|
+
<hr class="pf-c-divider" />
|
|
8701
|
+
<section class="pf-c-menu__group">
|
|
8702
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
8703
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
8704
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8705
|
+
<a
|
|
8706
|
+
class="pf-c-menu__item"
|
|
8707
|
+
href="#"
|
|
8708
|
+
role="menuitem"
|
|
8709
|
+
>
|
|
8710
|
+
<span class="pf-c-menu__item-main">
|
|
8711
|
+
<span
|
|
8712
|
+
class="pf-c-menu__item-text"
|
|
8713
|
+
>Link 1</span>
|
|
8714
|
+
</span>
|
|
8715
|
+
</a>
|
|
8716
|
+
<button
|
|
8717
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
8718
|
+
type="button"
|
|
8719
|
+
aria-label="Not starred"
|
|
8720
|
+
>
|
|
8721
|
+
<span class="pf-c-menu__item-action-icon">
|
|
8722
|
+
<i
|
|
8723
|
+
class="fas fa-star"
|
|
8724
|
+
aria-hidden="true"
|
|
8725
|
+
></i>
|
|
8726
|
+
</span>
|
|
8727
|
+
</button>
|
|
8728
|
+
</li>
|
|
8729
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
8730
|
+
<a
|
|
8731
|
+
class="pf-c-menu__item"
|
|
8732
|
+
href="#"
|
|
8733
|
+
role="menuitem"
|
|
8734
|
+
target="_blank"
|
|
8735
|
+
>
|
|
8736
|
+
<span class="pf-c-menu__item-main">
|
|
8737
|
+
<span
|
|
8738
|
+
class="pf-c-menu__item-text"
|
|
8739
|
+
>Link 2</span>
|
|
8740
|
+
<span
|
|
8741
|
+
class="pf-c-menu__item-external-icon"
|
|
8742
|
+
>
|
|
8743
|
+
<i
|
|
8744
|
+
class="fas fa-external-link-alt"
|
|
8745
|
+
aria-hidden="true"
|
|
8746
|
+
></i>
|
|
8747
|
+
</span>
|
|
8748
|
+
<span
|
|
8749
|
+
class="pf-screen-reader"
|
|
8750
|
+
>(opens new window)</span>
|
|
8751
|
+
</span>
|
|
8752
|
+
</a>
|
|
8753
|
+
<button
|
|
8754
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
8755
|
+
type="button"
|
|
8756
|
+
aria-label="Starred"
|
|
8757
|
+
>
|
|
8758
|
+
<span class="pf-c-menu__item-action-icon">
|
|
8759
|
+
<i
|
|
8760
|
+
class="fas fa-star"
|
|
8761
|
+
aria-hidden="true"
|
|
8762
|
+
></i>
|
|
8763
|
+
</span>
|
|
8764
|
+
</button>
|
|
8765
|
+
</li>
|
|
8766
|
+
</ul>
|
|
8767
|
+
</section>
|
|
8768
|
+
</div>
|
|
8769
|
+
</li>
|
|
8770
|
+
</ul>
|
|
8771
|
+
</section>
|
|
8772
|
+
</div>
|
|
8773
|
+
</div>
|
|
8774
|
+
</div>
|
|
8775
|
+
</div>
|
|
8776
|
+
</div>
|
|
8777
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
8778
|
+
<div
|
|
8779
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
8780
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
8781
|
+
>
|
|
8782
|
+
<button
|
|
8783
|
+
class="pf-c-dropdown__toggle"
|
|
8784
|
+
id="wizard-with-drawer-in-page-example-masthead-profile-button"
|
|
8785
|
+
aria-expanded="false"
|
|
8786
|
+
type="button"
|
|
8787
|
+
>
|
|
8788
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
8789
|
+
<img
|
|
8790
|
+
class="pf-c-avatar"
|
|
8791
|
+
alt="Avatar image"
|
|
8792
|
+
src="/assets/images/img_avatar-light.svg"
|
|
8793
|
+
/>
|
|
8794
|
+
</span>
|
|
8795
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
8796
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
8797
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
8798
|
+
</span>
|
|
8799
|
+
</button>
|
|
8800
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
8801
|
+
<section class="pf-c-dropdown__group">
|
|
8802
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
8803
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
8804
|
+
<div>123456789</div>
|
|
8805
|
+
</div>
|
|
8806
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
8807
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
8808
|
+
<div>mshaksho@redhat.com</div>
|
|
8809
|
+
</div>
|
|
8810
|
+
</section>
|
|
8811
|
+
<hr class="pf-c-divider" />
|
|
8812
|
+
<section class="pf-c-dropdown__group">
|
|
8813
|
+
<ul>
|
|
8814
|
+
<li>
|
|
8815
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
8816
|
+
</li>
|
|
8817
|
+
<li>
|
|
8818
|
+
<a
|
|
8819
|
+
class="pf-c-dropdown__menu-item"
|
|
8820
|
+
href="#"
|
|
8821
|
+
>User management</a>
|
|
8822
|
+
</li>
|
|
8823
|
+
<li>
|
|
8824
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
8825
|
+
</li>
|
|
8826
|
+
</ul>
|
|
8827
|
+
</section>
|
|
8828
|
+
</div>
|
|
8829
|
+
</div>
|
|
8830
|
+
</div>
|
|
8831
|
+
</div>
|
|
8832
|
+
</div>
|
|
8833
|
+
</div>
|
|
8834
|
+
</div>
|
|
8835
|
+
</header>
|
|
8836
|
+
<div class="pf-c-page__sidebar">
|
|
8837
|
+
<div class="pf-c-page__sidebar-body">
|
|
8838
|
+
<nav
|
|
8839
|
+
class="pf-c-nav"
|
|
8840
|
+
id="wizard-with-drawer-in-page-example-primary-nav"
|
|
8841
|
+
aria-label="Global"
|
|
8842
|
+
>
|
|
8843
|
+
<ul class="pf-c-nav__list">
|
|
8844
|
+
<li class="pf-c-nav__item">
|
|
8845
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
8846
|
+
</li>
|
|
8847
|
+
<li class="pf-c-nav__item">
|
|
8848
|
+
<a
|
|
8849
|
+
href="#"
|
|
8850
|
+
class="pf-c-nav__link pf-m-current"
|
|
8851
|
+
aria-current="page"
|
|
8852
|
+
>Policy</a>
|
|
8853
|
+
</li>
|
|
8854
|
+
<li class="pf-c-nav__item">
|
|
8855
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
8856
|
+
</li>
|
|
8857
|
+
<li class="pf-c-nav__item">
|
|
8858
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
8859
|
+
</li>
|
|
8860
|
+
<li class="pf-c-nav__item">
|
|
8861
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
8862
|
+
</li>
|
|
8863
|
+
</ul>
|
|
8864
|
+
</nav>
|
|
8865
|
+
</div>
|
|
8866
|
+
</div>
|
|
8867
|
+
<main
|
|
8868
|
+
class="pf-c-page__main"
|
|
8869
|
+
tabindex="-1"
|
|
8870
|
+
id="main-content-wizard-with-drawer-in-page-example"
|
|
8871
|
+
>
|
|
8872
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
8873
|
+
<div class="pf-c-page__main-body">
|
|
8874
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
8875
|
+
<ol class="pf-c-breadcrumb__list">
|
|
8876
|
+
<li class="pf-c-breadcrumb__item">
|
|
8877
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
8878
|
+
</li>
|
|
8879
|
+
<li class="pf-c-breadcrumb__item">
|
|
8880
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
8881
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
7776
8882
|
</span>
|
|
7777
|
-
|
|
7778
|
-
|
|
7779
|
-
|
|
7780
|
-
|
|
8883
|
+
|
|
8884
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
8885
|
+
</li>
|
|
8886
|
+
<li class="pf-c-breadcrumb__item">
|
|
8887
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
8888
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
8889
|
+
</span>
|
|
8890
|
+
|
|
8891
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
8892
|
+
</li>
|
|
8893
|
+
<li class="pf-c-breadcrumb__item">
|
|
8894
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
8895
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
8896
|
+
</span>
|
|
8897
|
+
|
|
8898
|
+
<a
|
|
8899
|
+
href="#"
|
|
8900
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
8901
|
+
aria-current="page"
|
|
8902
|
+
>Section landing</a>
|
|
8903
|
+
</li>
|
|
8904
|
+
</ol>
|
|
8905
|
+
</nav>
|
|
8906
|
+
</div>
|
|
8907
|
+
</section>
|
|
8908
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
8909
|
+
<div class="pf-c-page__main-body">
|
|
8910
|
+
<div class="pf-c-content">
|
|
8911
|
+
<h1>Main title</h1>
|
|
8912
|
+
<p>This is a full page demo.</p>
|
|
8913
|
+
</div>
|
|
8914
|
+
</div>
|
|
8915
|
+
</section>
|
|
8916
|
+
|
|
8917
|
+
<section class="pf-c-page__main-wizard pf-m-light-200">
|
|
8918
|
+
<div class="pf-c-wizard">
|
|
8919
|
+
<button
|
|
8920
|
+
aria-label="Wizard Header Toggle"
|
|
8921
|
+
class="pf-c-wizard__toggle"
|
|
8922
|
+
aria-expanded="false"
|
|
8923
|
+
>
|
|
8924
|
+
<span class="pf-c-wizard__toggle-list">
|
|
8925
|
+
<span class="pf-c-wizard__toggle-list-item">
|
|
8926
|
+
<span class="pf-c-wizard__toggle-num">2</span>
|
|
8927
|
+
Configuration
|
|
8928
|
+
<i
|
|
8929
|
+
class="fas fa-angle-right pf-c-wizard__toggle-separator"
|
|
8930
|
+
aria-hidden="true"
|
|
8931
|
+
></i>
|
|
7781
8932
|
</span>
|
|
7782
|
-
|
|
7783
|
-
|
|
7784
|
-
|
|
7785
|
-
|
|
7786
|
-
|
|
7787
|
-
|
|
7788
|
-
|
|
7789
|
-
|
|
7790
|
-
|
|
7791
|
-
|
|
7792
|
-
|
|
7793
|
-
|
|
8933
|
+
<span class="pf-c-wizard__toggle-list-item">Substep B</span>
|
|
8934
|
+
</span>
|
|
8935
|
+
<span class="pf-c-wizard__toggle-icon">
|
|
8936
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
8937
|
+
</span>
|
|
8938
|
+
</button>
|
|
8939
|
+
<div class="pf-c-drawer pf-m-inline">
|
|
8940
|
+
<div class="pf-c-drawer__main">
|
|
8941
|
+
<div class="pf-c-drawer__content">
|
|
8942
|
+
<div class="pf-c-wizard__outer-wrap">
|
|
8943
|
+
<div class="pf-c-wizard__inner-wrap">
|
|
8944
|
+
<nav class="pf-c-wizard__nav" aria-label="Steps">
|
|
7794
8945
|
<ol class="pf-c-wizard__nav-list">
|
|
7795
8946
|
<li class="pf-c-wizard__nav-item">
|
|
7796
|
-
<button class="pf-c-wizard__nav-link">
|
|
8947
|
+
<button class="pf-c-wizard__nav-link">Information</button>
|
|
7797
8948
|
</li>
|
|
7798
8949
|
<li class="pf-c-wizard__nav-item">
|
|
7799
8950
|
<button
|
|
7800
8951
|
class="pf-c-wizard__nav-link pf-m-current"
|
|
7801
|
-
|
|
7802
|
-
|
|
8952
|
+
>Configuration</button>
|
|
8953
|
+
<ol class="pf-c-wizard__nav-list">
|
|
8954
|
+
<li class="pf-c-wizard__nav-item">
|
|
8955
|
+
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
8956
|
+
</li>
|
|
8957
|
+
<li class="pf-c-wizard__nav-item">
|
|
8958
|
+
<button
|
|
8959
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
8960
|
+
aria-current="page"
|
|
8961
|
+
>Substep B</button>
|
|
8962
|
+
</li>
|
|
8963
|
+
<li class="pf-c-wizard__nav-item">
|
|
8964
|
+
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
8965
|
+
</li>
|
|
8966
|
+
</ol>
|
|
8967
|
+
</li>
|
|
8968
|
+
<li class="pf-c-wizard__nav-item">
|
|
8969
|
+
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
7803
8970
|
</li>
|
|
7804
8971
|
<li class="pf-c-wizard__nav-item">
|
|
7805
|
-
<button class="pf-c-wizard__nav-link">
|
|
8972
|
+
<button class="pf-c-wizard__nav-link" disabled>Review</button>
|
|
7806
8973
|
</li>
|
|
7807
8974
|
</ol>
|
|
7808
|
-
</
|
|
7809
|
-
<
|
|
7810
|
-
<
|
|
7811
|
-
|
|
7812
|
-
|
|
7813
|
-
|
|
7814
|
-
|
|
7815
|
-
|
|
7816
|
-
|
|
7817
|
-
|
|
7818
|
-
|
|
7819
|
-
|
|
7820
|
-
|
|
7821
|
-
|
|
7822
|
-
|
|
7823
|
-
|
|
7824
|
-
|
|
7825
|
-
|
|
7826
|
-
|
|
7827
|
-
|
|
7828
|
-
|
|
7829
|
-
|
|
7830
|
-
|
|
7831
|
-
|
|
7832
|
-
|
|
7833
|
-
|
|
7834
|
-
|
|
7835
|
-
|
|
7836
|
-
|
|
7837
|
-
|
|
7838
|
-
|
|
7839
|
-
|
|
7840
|
-
|
|
7841
|
-
|
|
7842
|
-
|
|
7843
|
-
|
|
7844
|
-
|
|
7845
|
-
|
|
7846
|
-
|
|
7847
|
-
|
|
7848
|
-
|
|
7849
|
-
|
|
7850
|
-
|
|
7851
|
-
|
|
7852
|
-
|
|
7853
|
-
|
|
7854
|
-
|
|
7855
|
-
|
|
7856
|
-
|
|
7857
|
-
|
|
7858
|
-
|
|
7859
|
-
|
|
7860
|
-
|
|
7861
|
-
|
|
7862
|
-
|
|
7863
|
-
|
|
7864
|
-
|
|
7865
|
-
|
|
7866
|
-
|
|
7867
|
-
|
|
7868
|
-
|
|
7869
|
-
|
|
7870
|
-
|
|
7871
|
-
|
|
7872
|
-
|
|
7873
|
-
|
|
7874
|
-
|
|
7875
|
-
|
|
7876
|
-
class="pf-c-
|
|
7877
|
-
|
|
7878
|
-
|
|
7879
|
-
|
|
7880
|
-
|
|
7881
|
-
|
|
7882
|
-
|
|
7883
|
-
|
|
7884
|
-
|
|
7885
|
-
|
|
7886
|
-
<
|
|
7887
|
-
<
|
|
7888
|
-
|
|
7889
|
-
|
|
7890
|
-
|
|
7891
|
-
|
|
7892
|
-
|
|
7893
|
-
|
|
7894
|
-
|
|
7895
|
-
|
|
7896
|
-
|
|
7897
|
-
|
|
7898
|
-
|
|
7899
|
-
|
|
7900
|
-
|
|
7901
|
-
|
|
7902
|
-
|
|
7903
|
-
|
|
7904
|
-
|
|
7905
|
-
|
|
7906
|
-
|
|
7907
|
-
|
|
7908
|
-
|
|
7909
|
-
|
|
7910
|
-
|
|
7911
|
-
|
|
7912
|
-
|
|
7913
|
-
|
|
7914
|
-
|
|
7915
|
-
|
|
7916
|
-
|
|
7917
|
-
|
|
7918
|
-
|
|
7919
|
-
|
|
7920
|
-
|
|
7921
|
-
|
|
7922
|
-
|
|
7923
|
-
|
|
7924
|
-
|
|
7925
|
-
|
|
7926
|
-
|
|
7927
|
-
|
|
7928
|
-
|
|
7929
|
-
|
|
7930
|
-
|
|
7931
|
-
|
|
7932
|
-
|
|
7933
|
-
|
|
7934
|
-
|
|
7935
|
-
|
|
7936
|
-
|
|
7937
|
-
|
|
7938
|
-
|
|
7939
|
-
|
|
7940
|
-
|
|
7941
|
-
|
|
7942
|
-
|
|
8975
|
+
</nav>
|
|
8976
|
+
<main class="pf-c-wizard__main" tabindex="0">
|
|
8977
|
+
<div class="pf-c-wizard__main-body">
|
|
8978
|
+
<button
|
|
8979
|
+
class="pf-c-button pf-m-link pf-m-inline pf-u-float-right pf-u-ml-md"
|
|
8980
|
+
type="button"
|
|
8981
|
+
aria-expanded="true"
|
|
8982
|
+
>Open drawer</button>
|
|
8983
|
+
<form class="pf-c-form pf-m-limit-width" novalidate>
|
|
8984
|
+
<div class="pf-c-form__group">
|
|
8985
|
+
<div class="pf-c-form__group-label">
|
|
8986
|
+
<label
|
|
8987
|
+
class="pf-c-form__label"
|
|
8988
|
+
for="wizard-with-drawer-in-page-example-wizard-form-field1"
|
|
8989
|
+
>
|
|
8990
|
+
<span class="pf-c-form__label-text">Field 1</span>
|
|
8991
|
+
<span
|
|
8992
|
+
class="pf-c-form__label-required"
|
|
8993
|
+
aria-hidden="true"
|
|
8994
|
+
>*</span>
|
|
8995
|
+
</label>
|
|
8996
|
+
</div>
|
|
8997
|
+
<div class="pf-c-form__group-control">
|
|
8998
|
+
<input
|
|
8999
|
+
class="pf-c-form-control"
|
|
9000
|
+
required
|
|
9001
|
+
type="text"
|
|
9002
|
+
id="wizard-with-drawer-in-page-example-wizard-form-field1"
|
|
9003
|
+
name="wizard-with-drawer-in-page-example-wizard-form-field1"
|
|
9004
|
+
/>
|
|
9005
|
+
</div>
|
|
9006
|
+
</div>
|
|
9007
|
+
<div class="pf-c-form__group">
|
|
9008
|
+
<div class="pf-c-form__group-label">
|
|
9009
|
+
<label
|
|
9010
|
+
class="pf-c-form__label"
|
|
9011
|
+
for="wizard-with-drawer-in-page-example-wizard-form-field2"
|
|
9012
|
+
>
|
|
9013
|
+
<span class="pf-c-form__label-text">Field 2</span>
|
|
9014
|
+
<span
|
|
9015
|
+
class="pf-c-form__label-required"
|
|
9016
|
+
aria-hidden="true"
|
|
9017
|
+
>*</span>
|
|
9018
|
+
</label>
|
|
9019
|
+
</div>
|
|
9020
|
+
<div class="pf-c-form__group-control">
|
|
9021
|
+
<input
|
|
9022
|
+
class="pf-c-form-control"
|
|
9023
|
+
required
|
|
9024
|
+
type="text"
|
|
9025
|
+
id="wizard-with-drawer-in-page-example-wizard-form-field2"
|
|
9026
|
+
name="wizard-with-drawer-in-page-example-wizard-form-field2"
|
|
9027
|
+
/>
|
|
9028
|
+
</div>
|
|
9029
|
+
</div>
|
|
9030
|
+
<div class="pf-c-form__group">
|
|
9031
|
+
<div class="pf-c-form__group-label">
|
|
9032
|
+
<label
|
|
9033
|
+
class="pf-c-form__label"
|
|
9034
|
+
for="wizard-with-drawer-in-page-example-wizard-form-field3"
|
|
9035
|
+
>
|
|
9036
|
+
<span class="pf-c-form__label-text">Field 3</span>
|
|
9037
|
+
<span
|
|
9038
|
+
class="pf-c-form__label-required"
|
|
9039
|
+
aria-hidden="true"
|
|
9040
|
+
>*</span>
|
|
9041
|
+
</label>
|
|
9042
|
+
</div>
|
|
9043
|
+
<div class="pf-c-form__group-control">
|
|
9044
|
+
<input
|
|
9045
|
+
class="pf-c-form-control"
|
|
9046
|
+
required
|
|
9047
|
+
type="text"
|
|
9048
|
+
id="wizard-with-drawer-in-page-example-wizard-form-field3"
|
|
9049
|
+
name="wizard-with-drawer-in-page-example-wizard-form-field3"
|
|
9050
|
+
/>
|
|
9051
|
+
</div>
|
|
9052
|
+
</div>
|
|
9053
|
+
<div class="pf-c-form__group">
|
|
9054
|
+
<div class="pf-c-form__group-label">
|
|
9055
|
+
<label
|
|
9056
|
+
class="pf-c-form__label"
|
|
9057
|
+
for="wizard-with-drawer-in-page-example-wizard-form-field4"
|
|
9058
|
+
>
|
|
9059
|
+
<span class="pf-c-form__label-text">Field 4</span>
|
|
9060
|
+
<span
|
|
9061
|
+
class="pf-c-form__label-required"
|
|
9062
|
+
aria-hidden="true"
|
|
9063
|
+
>*</span>
|
|
9064
|
+
</label>
|
|
9065
|
+
</div>
|
|
9066
|
+
<div class="pf-c-form__group-control">
|
|
9067
|
+
<input
|
|
9068
|
+
class="pf-c-form-control"
|
|
9069
|
+
required
|
|
9070
|
+
type="text"
|
|
9071
|
+
id="wizard-with-drawer-in-page-example-wizard-form-field4"
|
|
9072
|
+
name="wizard-with-drawer-in-page-example-wizard-form-field4"
|
|
9073
|
+
/>
|
|
9074
|
+
</div>
|
|
9075
|
+
</div>
|
|
9076
|
+
<div class="pf-c-form__group">
|
|
9077
|
+
<div class="pf-c-form__group-label">
|
|
9078
|
+
<label
|
|
9079
|
+
class="pf-c-form__label"
|
|
9080
|
+
for="wizard-with-drawer-in-page-example-wizard-form-field5"
|
|
9081
|
+
>
|
|
9082
|
+
<span class="pf-c-form__label-text">Field 5</span>
|
|
9083
|
+
<span
|
|
9084
|
+
class="pf-c-form__label-required"
|
|
9085
|
+
aria-hidden="true"
|
|
9086
|
+
>*</span>
|
|
9087
|
+
</label>
|
|
9088
|
+
</div>
|
|
9089
|
+
<div class="pf-c-form__group-control">
|
|
9090
|
+
<input
|
|
9091
|
+
class="pf-c-form-control"
|
|
9092
|
+
required
|
|
9093
|
+
type="text"
|
|
9094
|
+
id="wizard-with-drawer-in-page-example-wizard-form-field5"
|
|
9095
|
+
name="wizard-with-drawer-in-page-example-wizard-form-field5"
|
|
9096
|
+
/>
|
|
9097
|
+
</div>
|
|
9098
|
+
</div>
|
|
9099
|
+
<div class="pf-c-form__group">
|
|
9100
|
+
<div class="pf-c-form__group-label">
|
|
9101
|
+
<label
|
|
9102
|
+
class="pf-c-form__label"
|
|
9103
|
+
for="wizard-with-drawer-in-page-example-wizard-form-field6"
|
|
9104
|
+
>
|
|
9105
|
+
<span class="pf-c-form__label-text">Field 6</span>
|
|
9106
|
+
<span
|
|
9107
|
+
class="pf-c-form__label-required"
|
|
9108
|
+
aria-hidden="true"
|
|
9109
|
+
>*</span>
|
|
9110
|
+
</label>
|
|
9111
|
+
</div>
|
|
9112
|
+
<div class="pf-c-form__group-control">
|
|
9113
|
+
<input
|
|
9114
|
+
class="pf-c-form-control"
|
|
9115
|
+
required
|
|
9116
|
+
type="text"
|
|
9117
|
+
id="wizard-with-drawer-in-page-example-wizard-form-field6"
|
|
9118
|
+
name="wizard-with-drawer-in-page-example-wizard-form-field6"
|
|
9119
|
+
/>
|
|
9120
|
+
</div>
|
|
9121
|
+
</div>
|
|
9122
|
+
<div class="pf-c-form__group">
|
|
9123
|
+
<div class="pf-c-form__group-label">
|
|
9124
|
+
<label
|
|
9125
|
+
class="pf-c-form__label"
|
|
9126
|
+
for="wizard-with-drawer-in-page-example-wizard-form-field7"
|
|
9127
|
+
>
|
|
9128
|
+
<span class="pf-c-form__label-text">Field 7</span>
|
|
9129
|
+
<span
|
|
9130
|
+
class="pf-c-form__label-required"
|
|
9131
|
+
aria-hidden="true"
|
|
9132
|
+
>*</span>
|
|
9133
|
+
</label>
|
|
9134
|
+
</div>
|
|
9135
|
+
<div class="pf-c-form__group-control">
|
|
9136
|
+
<input
|
|
9137
|
+
class="pf-c-form-control"
|
|
9138
|
+
required
|
|
9139
|
+
type="text"
|
|
9140
|
+
id="wizard-with-drawer-in-page-example-wizard-form-field7"
|
|
9141
|
+
name="wizard-with-drawer-in-page-example-wizard-form-field7"
|
|
9142
|
+
/>
|
|
9143
|
+
</div>
|
|
9144
|
+
</div>
|
|
9145
|
+
</form>
|
|
7943
9146
|
</div>
|
|
7944
|
-
|
|
7945
|
-
|
|
7946
|
-
|
|
7947
|
-
|
|
7948
|
-
|
|
7949
|
-
|
|
7950
|
-
|
|
7951
|
-
|
|
7952
|
-
|
|
7953
|
-
|
|
7954
|
-
<
|
|
7955
|
-
|
|
7956
|
-
|
|
7957
|
-
|
|
7958
|
-
|
|
7959
|
-
|
|
7960
|
-
|
|
7961
|
-
/>
|
|
7962
|
-
</div>
|
|
9147
|
+
</main>
|
|
9148
|
+
</div>
|
|
9149
|
+
</div>
|
|
9150
|
+
</div>
|
|
9151
|
+
<div class="pf-c-drawer__panel pf-m-light-200 pf-m-width-33" hidden>
|
|
9152
|
+
<div class="pf-c-drawer__body">
|
|
9153
|
+
<div class="pf-c-drawer__head">
|
|
9154
|
+
<h2 class="pf-c-title pf-m-xl">Register with Red Hat connector</h2>
|
|
9155
|
+
<div class="pf-c-drawer__actions">
|
|
9156
|
+
<div class="pf-c-drawer__close">
|
|
9157
|
+
<button
|
|
9158
|
+
class="pf-c-button pf-m-plain"
|
|
9159
|
+
type="button"
|
|
9160
|
+
aria-label="Close drawer panel"
|
|
9161
|
+
>
|
|
9162
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
9163
|
+
</button>
|
|
7963
9164
|
</div>
|
|
7964
|
-
</
|
|
9165
|
+
</div>
|
|
9166
|
+
</div>
|
|
9167
|
+
</div>
|
|
9168
|
+
<div class="pf-c-drawer__body">
|
|
9169
|
+
<div class="pf-c-content">
|
|
9170
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.</p>
|
|
9171
|
+
|
|
9172
|
+
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc auctor tortor eget ex mattis sagittis. Praesent aliquet, sem ut aliquet posuere, ante neque convallis velit, sit amet dictum nisi odio sed purus. Vestibulum congue eros nisl, faucibus sollicitudin nisi rutrum quis. Nam lacus risus, fringilla sed imperdiet sit amet, eleifend id nulla. Pellentesque posuere purus ex, sed ultricies leo vehicula vitae. Pellentesque lacinia, lacus interdum consequat molestie, urna quam rutrum nisi, at rhoncus dolor justo nec ante. Ut semper nisi ipsum, vel varius elit facilisis et. Nulla bibendum elit sed varius suscipit. Curabitur imperdiet ligula at pellentesque pretium. Sed eu porta erat.</p>
|
|
9173
|
+
|
|
9174
|
+
<p>
|
|
9175
|
+
Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
|
|
9176
|
+
<a
|
|
9177
|
+
href="#"
|
|
9178
|
+
>Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
|
|
9179
|
+
</p>
|
|
9180
|
+
<a href="#">
|
|
9181
|
+
<span class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
|
|
9182
|
+
<span>Learn about Red Hat connector</span>
|
|
9183
|
+
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
9184
|
+
</span>
|
|
9185
|
+
</a>
|
|
7965
9186
|
</div>
|
|
7966
9187
|
</div>
|
|
7967
9188
|
</div>
|
|
7968
|
-
<footer class="pf-c-wizard__footer">
|
|
7969
|
-
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
7970
|
-
<button class="pf-c-button pf-m-secondary" type="button">Back</button>
|
|
7971
|
-
<div class="pf-c-wizard__footer-cancel">
|
|
7972
|
-
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
7973
|
-
</div>
|
|
7974
|
-
</footer>
|
|
7975
9189
|
</div>
|
|
7976
9190
|
</div>
|
|
9191
|
+
<footer class="pf-c-wizard__footer">
|
|
9192
|
+
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
9193
|
+
<button class="pf-c-button pf-m-secondary" type="button">Back</button>
|
|
9194
|
+
<div class="pf-c-wizard__footer-cancel">
|
|
9195
|
+
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
9196
|
+
</div>
|
|
9197
|
+
</footer>
|
|
7977
9198
|
</div>
|
|
7978
9199
|
</section>
|
|
7979
9200
|
</main>
|
|
@@ -7981,17 +9202,17 @@ wrapperTag: div
|
|
|
7981
9202
|
|
|
7982
9203
|
```
|
|
7983
9204
|
|
|
7984
|
-
### With drawer, in page
|
|
9205
|
+
### With drawer, in page, expanded
|
|
7985
9206
|
|
|
7986
9207
|
```html isFullscreen
|
|
7987
|
-
<div class="pf-c-page" id="wizard-with-drawer-in-page-example">
|
|
9208
|
+
<div class="pf-c-page" id="wizard-with-drawer-in-page-expanded-example">
|
|
7988
9209
|
<a
|
|
7989
9210
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
7990
|
-
href="#main-content-wizard-with-drawer-in-page-example"
|
|
9211
|
+
href="#main-content-wizard-with-drawer-in-page-expanded-example"
|
|
7991
9212
|
>Skip to content</a>
|
|
7992
9213
|
<header
|
|
7993
9214
|
class="pf-c-masthead"
|
|
7994
|
-
id="wizard-with-drawer-in-page-example-masthead"
|
|
9215
|
+
id="wizard-with-drawer-in-page-expanded-example-masthead"
|
|
7995
9216
|
>
|
|
7996
9217
|
<span class="pf-c-masthead__toggle">
|
|
7997
9218
|
<button
|
|
@@ -8023,7 +9244,7 @@ wrapperTag: div
|
|
|
8023
9244
|
<div class="pf-c-masthead__content">
|
|
8024
9245
|
<div
|
|
8025
9246
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
8026
|
-
id="wizard-with-drawer-in-page-example-masthead-toolbar"
|
|
9247
|
+
id="wizard-with-drawer-in-page-expanded-example-masthead-toolbar"
|
|
8027
9248
|
>
|
|
8028
9249
|
<div class="pf-c-toolbar__content">
|
|
8029
9250
|
<div class="pf-c-toolbar__content-section">
|
|
@@ -8037,12 +9258,12 @@ wrapperTag: div
|
|
|
8037
9258
|
<nav
|
|
8038
9259
|
class="pf-c-app-launcher"
|
|
8039
9260
|
aria-label="Application launcher"
|
|
8040
|
-
id="wizard-with-drawer-in-page-example-masthead-application-launcher"
|
|
9261
|
+
id="wizard-with-drawer-in-page-expanded-example-masthead-application-launcher"
|
|
8041
9262
|
>
|
|
8042
9263
|
<button
|
|
8043
9264
|
class="pf-c-app-launcher__toggle"
|
|
8044
9265
|
type="button"
|
|
8045
|
-
id="wizard-with-drawer-in-page-example-masthead-application-launcher-button"
|
|
9266
|
+
id="wizard-with-drawer-in-page-expanded-example-masthead-application-launcher-button"
|
|
8046
9267
|
aria-expanded="false"
|
|
8047
9268
|
aria-label="Application launcher"
|
|
8048
9269
|
>
|
|
@@ -8182,7 +9403,7 @@ wrapperTag: div
|
|
|
8182
9403
|
<div class="pf-c-dropdown">
|
|
8183
9404
|
<button
|
|
8184
9405
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
8185
|
-
id="wizard-with-drawer-in-page-example-masthead-settings-button"
|
|
9406
|
+
id="wizard-with-drawer-in-page-expanded-example-masthead-settings-button"
|
|
8186
9407
|
aria-expanded="false"
|
|
8187
9408
|
type="button"
|
|
8188
9409
|
aria-label="Settings"
|
|
@@ -8191,7 +9412,7 @@ wrapperTag: div
|
|
|
8191
9412
|
</button>
|
|
8192
9413
|
<ul
|
|
8193
9414
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
8194
|
-
aria-labelledby="wizard-with-drawer-in-page-example-masthead-settings-button"
|
|
9415
|
+
aria-labelledby="wizard-with-drawer-in-page-expanded-example-masthead-settings-button"
|
|
8195
9416
|
hidden
|
|
8196
9417
|
>
|
|
8197
9418
|
<li>
|
|
@@ -8213,7 +9434,7 @@ wrapperTag: div
|
|
|
8213
9434
|
<div class="pf-c-dropdown">
|
|
8214
9435
|
<button
|
|
8215
9436
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
8216
|
-
id="wizard-with-drawer-in-page-example-masthead-help-button"
|
|
9437
|
+
id="wizard-with-drawer-in-page-expanded-example-masthead-help-button"
|
|
8217
9438
|
aria-expanded="false"
|
|
8218
9439
|
type="button"
|
|
8219
9440
|
aria-label="Help"
|
|
@@ -8222,7 +9443,7 @@ wrapperTag: div
|
|
|
8222
9443
|
</button>
|
|
8223
9444
|
<ul
|
|
8224
9445
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
8225
|
-
aria-labelledby="wizard-with-drawer-in-page-example-masthead-help-button"
|
|
9446
|
+
aria-labelledby="wizard-with-drawer-in-page-expanded-example-masthead-help-button"
|
|
8226
9447
|
hidden
|
|
8227
9448
|
>
|
|
8228
9449
|
<li>
|
|
@@ -8722,7 +9943,7 @@ wrapperTag: div
|
|
|
8722
9943
|
>
|
|
8723
9944
|
<button
|
|
8724
9945
|
class="pf-c-dropdown__toggle"
|
|
8725
|
-
id="wizard-with-drawer-in-page-example-masthead-profile-button"
|
|
9946
|
+
id="wizard-with-drawer-in-page-expanded-example-masthead-profile-button"
|
|
8726
9947
|
aria-expanded="false"
|
|
8727
9948
|
type="button"
|
|
8728
9949
|
>
|
|
@@ -8778,7 +9999,7 @@ wrapperTag: div
|
|
|
8778
9999
|
<div class="pf-c-page__sidebar-body">
|
|
8779
10000
|
<nav
|
|
8780
10001
|
class="pf-c-nav"
|
|
8781
|
-
id="wizard-with-drawer-in-page-example-primary-nav"
|
|
10002
|
+
id="wizard-with-drawer-in-page-expanded-example-primary-nav"
|
|
8782
10003
|
aria-label="Global"
|
|
8783
10004
|
>
|
|
8784
10005
|
<ul class="pf-c-nav__list">
|
|
@@ -8808,7 +10029,7 @@ wrapperTag: div
|
|
|
8808
10029
|
<main
|
|
8809
10030
|
class="pf-c-page__main"
|
|
8810
10031
|
tabindex="-1"
|
|
8811
|
-
id="main-content-wizard-with-drawer-in-page-example"
|
|
10032
|
+
id="main-content-wizard-with-drawer-in-page-expanded-example"
|
|
8812
10033
|
>
|
|
8813
10034
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
8814
10035
|
<div class="pf-c-page__main-body">
|
|
@@ -8855,291 +10076,282 @@ wrapperTag: div
|
|
|
8855
10076
|
</div>
|
|
8856
10077
|
</section>
|
|
8857
10078
|
|
|
8858
|
-
<section class="pf-c-page__main-wizard pf-m-
|
|
8859
|
-
<div class="pf-c-
|
|
8860
|
-
<
|
|
8861
|
-
|
|
8862
|
-
|
|
8863
|
-
|
|
8864
|
-
|
|
8865
|
-
>
|
|
8866
|
-
<span class="pf-c-wizard__toggle-list">
|
|
8867
|
-
<span class="pf-c-wizard__toggle-
|
|
8868
|
-
|
|
8869
|
-
|
|
8870
|
-
|
|
8871
|
-
|
|
8872
|
-
|
|
8873
|
-
></i>
|
|
8874
|
-
</span>
|
|
8875
|
-
<span class="pf-c-wizard__toggle-list-item">Substep B</span>
|
|
8876
|
-
</span>
|
|
8877
|
-
<span class="pf-c-wizard__toggle-icon">
|
|
8878
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
10079
|
+
<section class="pf-c-page__main-wizard pf-m-light-200">
|
|
10080
|
+
<div class="pf-c-wizard">
|
|
10081
|
+
<button
|
|
10082
|
+
aria-label="Wizard Header Toggle"
|
|
10083
|
+
class="pf-c-wizard__toggle"
|
|
10084
|
+
aria-expanded="false"
|
|
10085
|
+
>
|
|
10086
|
+
<span class="pf-c-wizard__toggle-list">
|
|
10087
|
+
<span class="pf-c-wizard__toggle-list-item">
|
|
10088
|
+
<span class="pf-c-wizard__toggle-num">2</span>
|
|
10089
|
+
Configuration
|
|
10090
|
+
<i
|
|
10091
|
+
class="fas fa-angle-right pf-c-wizard__toggle-separator"
|
|
10092
|
+
aria-hidden="true"
|
|
10093
|
+
></i>
|
|
8879
10094
|
</span>
|
|
8880
|
-
|
|
8881
|
-
|
|
8882
|
-
|
|
8883
|
-
|
|
8884
|
-
|
|
8885
|
-
|
|
8886
|
-
|
|
8887
|
-
|
|
8888
|
-
|
|
8889
|
-
|
|
8890
|
-
|
|
8891
|
-
|
|
8892
|
-
|
|
8893
|
-
|
|
8894
|
-
|
|
8895
|
-
|
|
8896
|
-
|
|
8897
|
-
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
8898
|
-
</li>
|
|
8899
|
-
<li class="pf-c-wizard__nav-item">
|
|
8900
|
-
<button
|
|
8901
|
-
class="pf-c-wizard__nav-link pf-m-current"
|
|
8902
|
-
aria-current="page"
|
|
8903
|
-
>Substep B</button>
|
|
8904
|
-
</li>
|
|
8905
|
-
<li class="pf-c-wizard__nav-item">
|
|
8906
|
-
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
8907
|
-
</li>
|
|
8908
|
-
</ol>
|
|
8909
|
-
</li>
|
|
8910
|
-
<li class="pf-c-wizard__nav-item">
|
|
8911
|
-
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
8912
|
-
</li>
|
|
8913
|
-
<li class="pf-c-wizard__nav-item">
|
|
8914
|
-
<button class="pf-c-wizard__nav-link" disabled>Review</button>
|
|
8915
|
-
</li>
|
|
8916
|
-
</ol>
|
|
8917
|
-
</nav>
|
|
8918
|
-
<main class="pf-c-wizard__main" tabindex="0">
|
|
8919
|
-
<div class="pf-c-wizard__main-body">
|
|
10095
|
+
<span class="pf-c-wizard__toggle-list-item">Substep B</span>
|
|
10096
|
+
</span>
|
|
10097
|
+
<span class="pf-c-wizard__toggle-icon">
|
|
10098
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
10099
|
+
</span>
|
|
10100
|
+
</button>
|
|
10101
|
+
<div class="pf-c-drawer pf-m-expanded pf-m-inline">
|
|
10102
|
+
<div class="pf-c-drawer__main">
|
|
10103
|
+
<div class="pf-c-drawer__content">
|
|
10104
|
+
<div class="pf-c-wizard__outer-wrap">
|
|
10105
|
+
<div class="pf-c-wizard__inner-wrap">
|
|
10106
|
+
<nav class="pf-c-wizard__nav" aria-label="Steps">
|
|
10107
|
+
<ol class="pf-c-wizard__nav-list">
|
|
10108
|
+
<li class="pf-c-wizard__nav-item">
|
|
10109
|
+
<button class="pf-c-wizard__nav-link">Information</button>
|
|
10110
|
+
</li>
|
|
10111
|
+
<li class="pf-c-wizard__nav-item">
|
|
8920
10112
|
<button
|
|
8921
|
-
class="pf-c-
|
|
8922
|
-
|
|
8923
|
-
|
|
8924
|
-
|
|
8925
|
-
|
|
8926
|
-
|
|
8927
|
-
|
|
8928
|
-
|
|
8929
|
-
|
|
8930
|
-
|
|
8931
|
-
|
|
8932
|
-
|
|
8933
|
-
|
|
8934
|
-
|
|
8935
|
-
|
|
8936
|
-
|
|
8937
|
-
|
|
8938
|
-
|
|
8939
|
-
|
|
8940
|
-
|
|
8941
|
-
|
|
8942
|
-
|
|
8943
|
-
|
|
8944
|
-
|
|
8945
|
-
|
|
8946
|
-
|
|
8947
|
-
|
|
10113
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
10114
|
+
>Configuration</button>
|
|
10115
|
+
<ol class="pf-c-wizard__nav-list">
|
|
10116
|
+
<li class="pf-c-wizard__nav-item">
|
|
10117
|
+
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
10118
|
+
</li>
|
|
10119
|
+
<li class="pf-c-wizard__nav-item">
|
|
10120
|
+
<button
|
|
10121
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
10122
|
+
aria-current="page"
|
|
10123
|
+
>Substep B</button>
|
|
10124
|
+
</li>
|
|
10125
|
+
<li class="pf-c-wizard__nav-item">
|
|
10126
|
+
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
10127
|
+
</li>
|
|
10128
|
+
</ol>
|
|
10129
|
+
</li>
|
|
10130
|
+
<li class="pf-c-wizard__nav-item">
|
|
10131
|
+
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
10132
|
+
</li>
|
|
10133
|
+
<li class="pf-c-wizard__nav-item">
|
|
10134
|
+
<button class="pf-c-wizard__nav-link" disabled>Review</button>
|
|
10135
|
+
</li>
|
|
10136
|
+
</ol>
|
|
10137
|
+
</nav>
|
|
10138
|
+
<main class="pf-c-wizard__main" tabindex="0">
|
|
10139
|
+
<div class="pf-c-wizard__main-body">
|
|
10140
|
+
<form class="pf-c-form pf-m-limit-width" novalidate>
|
|
10141
|
+
<div class="pf-c-form__group">
|
|
10142
|
+
<div class="pf-c-form__group-label">
|
|
10143
|
+
<label
|
|
10144
|
+
class="pf-c-form__label"
|
|
10145
|
+
for="wizard-with-drawer-in-page-expanded-example-wizard-form-field1"
|
|
10146
|
+
>
|
|
10147
|
+
<span class="pf-c-form__label-text">Field 1</span>
|
|
10148
|
+
<span
|
|
10149
|
+
class="pf-c-form__label-required"
|
|
10150
|
+
aria-hidden="true"
|
|
10151
|
+
>*</span>
|
|
10152
|
+
</label>
|
|
8948
10153
|
</div>
|
|
8949
|
-
<div class="pf-c-form__group">
|
|
8950
|
-
<
|
|
8951
|
-
|
|
8952
|
-
|
|
8953
|
-
|
|
8954
|
-
|
|
8955
|
-
|
|
8956
|
-
|
|
8957
|
-
class="pf-c-form__label-required"
|
|
8958
|
-
aria-hidden="true"
|
|
8959
|
-
>*</span>
|
|
8960
|
-
</label>
|
|
8961
|
-
</div>
|
|
8962
|
-
<div class="pf-c-form__group-control">
|
|
8963
|
-
<input
|
|
8964
|
-
class="pf-c-form-control"
|
|
8965
|
-
required
|
|
8966
|
-
type="text"
|
|
8967
|
-
id="-form-field2"
|
|
8968
|
-
name="-form-field2"
|
|
8969
|
-
/>
|
|
8970
|
-
</div>
|
|
10154
|
+
<div class="pf-c-form__group-control">
|
|
10155
|
+
<input
|
|
10156
|
+
class="pf-c-form-control"
|
|
10157
|
+
required
|
|
10158
|
+
type="text"
|
|
10159
|
+
id="wizard-with-drawer-in-page-expanded-example-wizard-form-field1"
|
|
10160
|
+
name="wizard-with-drawer-in-page-expanded-example-wizard-form-field1"
|
|
10161
|
+
/>
|
|
8971
10162
|
</div>
|
|
8972
|
-
|
|
8973
|
-
|
|
8974
|
-
|
|
8975
|
-
|
|
8976
|
-
|
|
8977
|
-
|
|
8978
|
-
|
|
8979
|
-
|
|
8980
|
-
|
|
8981
|
-
|
|
8982
|
-
|
|
8983
|
-
|
|
8984
|
-
</
|
|
8985
|
-
<div class="pf-c-form__group-control">
|
|
8986
|
-
<input
|
|
8987
|
-
class="pf-c-form-control"
|
|
8988
|
-
required
|
|
8989
|
-
type="text"
|
|
8990
|
-
id="-form-field3"
|
|
8991
|
-
name="-form-field3"
|
|
8992
|
-
/>
|
|
8993
|
-
</div>
|
|
10163
|
+
</div>
|
|
10164
|
+
<div class="pf-c-form__group">
|
|
10165
|
+
<div class="pf-c-form__group-label">
|
|
10166
|
+
<label
|
|
10167
|
+
class="pf-c-form__label"
|
|
10168
|
+
for="wizard-with-drawer-in-page-expanded-example-wizard-form-field2"
|
|
10169
|
+
>
|
|
10170
|
+
<span class="pf-c-form__label-text">Field 2</span>
|
|
10171
|
+
<span
|
|
10172
|
+
class="pf-c-form__label-required"
|
|
10173
|
+
aria-hidden="true"
|
|
10174
|
+
>*</span>
|
|
10175
|
+
</label>
|
|
8994
10176
|
</div>
|
|
8995
|
-
<div class="pf-c-form__group">
|
|
8996
|
-
<
|
|
8997
|
-
|
|
8998
|
-
|
|
8999
|
-
|
|
9000
|
-
|
|
9001
|
-
|
|
9002
|
-
|
|
9003
|
-
class="pf-c-form__label-required"
|
|
9004
|
-
aria-hidden="true"
|
|
9005
|
-
>*</span>
|
|
9006
|
-
</label>
|
|
9007
|
-
</div>
|
|
9008
|
-
<div class="pf-c-form__group-control">
|
|
9009
|
-
<input
|
|
9010
|
-
class="pf-c-form-control"
|
|
9011
|
-
required
|
|
9012
|
-
type="text"
|
|
9013
|
-
id="-form-field4"
|
|
9014
|
-
name="-form-field4"
|
|
9015
|
-
/>
|
|
9016
|
-
</div>
|
|
10177
|
+
<div class="pf-c-form__group-control">
|
|
10178
|
+
<input
|
|
10179
|
+
class="pf-c-form-control"
|
|
10180
|
+
required
|
|
10181
|
+
type="text"
|
|
10182
|
+
id="wizard-with-drawer-in-page-expanded-example-wizard-form-field2"
|
|
10183
|
+
name="wizard-with-drawer-in-page-expanded-example-wizard-form-field2"
|
|
10184
|
+
/>
|
|
9017
10185
|
</div>
|
|
9018
|
-
|
|
9019
|
-
|
|
9020
|
-
|
|
9021
|
-
|
|
9022
|
-
|
|
9023
|
-
|
|
9024
|
-
|
|
9025
|
-
|
|
9026
|
-
|
|
9027
|
-
|
|
9028
|
-
|
|
9029
|
-
|
|
9030
|
-
</
|
|
9031
|
-
<div class="pf-c-form__group-control">
|
|
9032
|
-
<input
|
|
9033
|
-
class="pf-c-form-control"
|
|
9034
|
-
required
|
|
9035
|
-
type="text"
|
|
9036
|
-
id="-form-field5"
|
|
9037
|
-
name="-form-field5"
|
|
9038
|
-
/>
|
|
9039
|
-
</div>
|
|
10186
|
+
</div>
|
|
10187
|
+
<div class="pf-c-form__group">
|
|
10188
|
+
<div class="pf-c-form__group-label">
|
|
10189
|
+
<label
|
|
10190
|
+
class="pf-c-form__label"
|
|
10191
|
+
for="wizard-with-drawer-in-page-expanded-example-wizard-form-field3"
|
|
10192
|
+
>
|
|
10193
|
+
<span class="pf-c-form__label-text">Field 3</span>
|
|
10194
|
+
<span
|
|
10195
|
+
class="pf-c-form__label-required"
|
|
10196
|
+
aria-hidden="true"
|
|
10197
|
+
>*</span>
|
|
10198
|
+
</label>
|
|
9040
10199
|
</div>
|
|
9041
|
-
<div class="pf-c-form__group">
|
|
9042
|
-
<
|
|
9043
|
-
|
|
9044
|
-
|
|
9045
|
-
|
|
9046
|
-
|
|
9047
|
-
|
|
9048
|
-
|
|
9049
|
-
class="pf-c-form__label-required"
|
|
9050
|
-
aria-hidden="true"
|
|
9051
|
-
>*</span>
|
|
9052
|
-
</label>
|
|
9053
|
-
</div>
|
|
9054
|
-
<div class="pf-c-form__group-control">
|
|
9055
|
-
<input
|
|
9056
|
-
class="pf-c-form-control"
|
|
9057
|
-
required
|
|
9058
|
-
type="text"
|
|
9059
|
-
id="-form-field6"
|
|
9060
|
-
name="-form-field6"
|
|
9061
|
-
/>
|
|
9062
|
-
</div>
|
|
10200
|
+
<div class="pf-c-form__group-control">
|
|
10201
|
+
<input
|
|
10202
|
+
class="pf-c-form-control"
|
|
10203
|
+
required
|
|
10204
|
+
type="text"
|
|
10205
|
+
id="wizard-with-drawer-in-page-expanded-example-wizard-form-field3"
|
|
10206
|
+
name="wizard-with-drawer-in-page-expanded-example-wizard-form-field3"
|
|
10207
|
+
/>
|
|
9063
10208
|
</div>
|
|
9064
|
-
|
|
9065
|
-
|
|
9066
|
-
|
|
9067
|
-
|
|
9068
|
-
|
|
9069
|
-
|
|
9070
|
-
|
|
9071
|
-
|
|
9072
|
-
|
|
9073
|
-
|
|
9074
|
-
|
|
9075
|
-
|
|
9076
|
-
</
|
|
9077
|
-
<div class="pf-c-form__group-control">
|
|
9078
|
-
<input
|
|
9079
|
-
class="pf-c-form-control"
|
|
9080
|
-
required
|
|
9081
|
-
type="text"
|
|
9082
|
-
id="-form-field7"
|
|
9083
|
-
name="-form-field7"
|
|
9084
|
-
/>
|
|
9085
|
-
</div>
|
|
10209
|
+
</div>
|
|
10210
|
+
<div class="pf-c-form__group">
|
|
10211
|
+
<div class="pf-c-form__group-label">
|
|
10212
|
+
<label
|
|
10213
|
+
class="pf-c-form__label"
|
|
10214
|
+
for="wizard-with-drawer-in-page-expanded-example-wizard-form-field4"
|
|
10215
|
+
>
|
|
10216
|
+
<span class="pf-c-form__label-text">Field 4</span>
|
|
10217
|
+
<span
|
|
10218
|
+
class="pf-c-form__label-required"
|
|
10219
|
+
aria-hidden="true"
|
|
10220
|
+
>*</span>
|
|
10221
|
+
</label>
|
|
9086
10222
|
</div>
|
|
9087
|
-
|
|
9088
|
-
|
|
9089
|
-
|
|
9090
|
-
|
|
10223
|
+
<div class="pf-c-form__group-control">
|
|
10224
|
+
<input
|
|
10225
|
+
class="pf-c-form-control"
|
|
10226
|
+
required
|
|
10227
|
+
type="text"
|
|
10228
|
+
id="wizard-with-drawer-in-page-expanded-example-wizard-form-field4"
|
|
10229
|
+
name="wizard-with-drawer-in-page-expanded-example-wizard-form-field4"
|
|
10230
|
+
/>
|
|
10231
|
+
</div>
|
|
10232
|
+
</div>
|
|
10233
|
+
<div class="pf-c-form__group">
|
|
10234
|
+
<div class="pf-c-form__group-label">
|
|
10235
|
+
<label
|
|
10236
|
+
class="pf-c-form__label"
|
|
10237
|
+
for="wizard-with-drawer-in-page-expanded-example-wizard-form-field5"
|
|
10238
|
+
>
|
|
10239
|
+
<span class="pf-c-form__label-text">Field 5</span>
|
|
10240
|
+
<span
|
|
10241
|
+
class="pf-c-form__label-required"
|
|
10242
|
+
aria-hidden="true"
|
|
10243
|
+
>*</span>
|
|
10244
|
+
</label>
|
|
10245
|
+
</div>
|
|
10246
|
+
<div class="pf-c-form__group-control">
|
|
10247
|
+
<input
|
|
10248
|
+
class="pf-c-form-control"
|
|
10249
|
+
required
|
|
10250
|
+
type="text"
|
|
10251
|
+
id="wizard-with-drawer-in-page-expanded-example-wizard-form-field5"
|
|
10252
|
+
name="wizard-with-drawer-in-page-expanded-example-wizard-form-field5"
|
|
10253
|
+
/>
|
|
10254
|
+
</div>
|
|
10255
|
+
</div>
|
|
10256
|
+
<div class="pf-c-form__group">
|
|
10257
|
+
<div class="pf-c-form__group-label">
|
|
10258
|
+
<label
|
|
10259
|
+
class="pf-c-form__label"
|
|
10260
|
+
for="wizard-with-drawer-in-page-expanded-example-wizard-form-field6"
|
|
10261
|
+
>
|
|
10262
|
+
<span class="pf-c-form__label-text">Field 6</span>
|
|
10263
|
+
<span
|
|
10264
|
+
class="pf-c-form__label-required"
|
|
10265
|
+
aria-hidden="true"
|
|
10266
|
+
>*</span>
|
|
10267
|
+
</label>
|
|
10268
|
+
</div>
|
|
10269
|
+
<div class="pf-c-form__group-control">
|
|
10270
|
+
<input
|
|
10271
|
+
class="pf-c-form-control"
|
|
10272
|
+
required
|
|
10273
|
+
type="text"
|
|
10274
|
+
id="wizard-with-drawer-in-page-expanded-example-wizard-form-field6"
|
|
10275
|
+
name="wizard-with-drawer-in-page-expanded-example-wizard-form-field6"
|
|
10276
|
+
/>
|
|
10277
|
+
</div>
|
|
10278
|
+
</div>
|
|
10279
|
+
<div class="pf-c-form__group">
|
|
10280
|
+
<div class="pf-c-form__group-label">
|
|
10281
|
+
<label
|
|
10282
|
+
class="pf-c-form__label"
|
|
10283
|
+
for="wizard-with-drawer-in-page-expanded-example-wizard-form-field7"
|
|
10284
|
+
>
|
|
10285
|
+
<span class="pf-c-form__label-text">Field 7</span>
|
|
10286
|
+
<span
|
|
10287
|
+
class="pf-c-form__label-required"
|
|
10288
|
+
aria-hidden="true"
|
|
10289
|
+
>*</span>
|
|
10290
|
+
</label>
|
|
10291
|
+
</div>
|
|
10292
|
+
<div class="pf-c-form__group-control">
|
|
10293
|
+
<input
|
|
10294
|
+
class="pf-c-form-control"
|
|
10295
|
+
required
|
|
10296
|
+
type="text"
|
|
10297
|
+
id="wizard-with-drawer-in-page-expanded-example-wizard-form-field7"
|
|
10298
|
+
name="wizard-with-drawer-in-page-expanded-example-wizard-form-field7"
|
|
10299
|
+
/>
|
|
10300
|
+
</div>
|
|
10301
|
+
</div>
|
|
10302
|
+
</form>
|
|
10303
|
+
</div>
|
|
10304
|
+
</main>
|
|
9091
10305
|
</div>
|
|
9092
10306
|
</div>
|
|
9093
|
-
|
|
9094
|
-
|
|
9095
|
-
|
|
9096
|
-
|
|
9097
|
-
|
|
9098
|
-
|
|
9099
|
-
<div class="pf-c-
|
|
9100
|
-
<
|
|
9101
|
-
|
|
9102
|
-
|
|
9103
|
-
|
|
9104
|
-
|
|
9105
|
-
>
|
|
9106
|
-
|
|
9107
|
-
</button>
|
|
9108
|
-
</div>
|
|
10307
|
+
</div>
|
|
10308
|
+
<div class="pf-c-drawer__panel pf-m-light-200 pf-m-width-33">
|
|
10309
|
+
<div class="pf-c-drawer__body">
|
|
10310
|
+
<div class="pf-c-drawer__head">
|
|
10311
|
+
<h2 class="pf-c-title pf-m-xl">Register with Red Hat connector</h2>
|
|
10312
|
+
<div class="pf-c-drawer__actions">
|
|
10313
|
+
<div class="pf-c-drawer__close">
|
|
10314
|
+
<button
|
|
10315
|
+
class="pf-c-button pf-m-plain"
|
|
10316
|
+
type="button"
|
|
10317
|
+
aria-label="Close drawer panel"
|
|
10318
|
+
>
|
|
10319
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
10320
|
+
</button>
|
|
9109
10321
|
</div>
|
|
9110
10322
|
</div>
|
|
9111
10323
|
</div>
|
|
9112
|
-
|
|
9113
|
-
|
|
9114
|
-
|
|
10324
|
+
</div>
|
|
10325
|
+
<div class="pf-c-drawer__body">
|
|
10326
|
+
<div class="pf-c-content">
|
|
10327
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.</p>
|
|
9115
10328
|
|
|
9116
|
-
|
|
10329
|
+
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc auctor tortor eget ex mattis sagittis. Praesent aliquet, sem ut aliquet posuere, ante neque convallis velit, sit amet dictum nisi odio sed purus. Vestibulum congue eros nisl, faucibus sollicitudin nisi rutrum quis. Nam lacus risus, fringilla sed imperdiet sit amet, eleifend id nulla. Pellentesque posuere purus ex, sed ultricies leo vehicula vitae. Pellentesque lacinia, lacus interdum consequat molestie, urna quam rutrum nisi, at rhoncus dolor justo nec ante. Ut semper nisi ipsum, vel varius elit facilisis et. Nulla bibendum elit sed varius suscipit. Curabitur imperdiet ligula at pellentesque pretium. Sed eu porta erat.</p>
|
|
9117
10330
|
|
|
9118
|
-
|
|
9119
|
-
|
|
9120
|
-
|
|
9121
|
-
|
|
9122
|
-
|
|
9123
|
-
|
|
9124
|
-
|
|
9125
|
-
|
|
9126
|
-
|
|
9127
|
-
|
|
9128
|
-
|
|
9129
|
-
|
|
9130
|
-
</div>
|
|
10331
|
+
<p>
|
|
10332
|
+
Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
|
|
10333
|
+
<a
|
|
10334
|
+
href="#"
|
|
10335
|
+
>Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
|
|
10336
|
+
</p>
|
|
10337
|
+
<a href="#">
|
|
10338
|
+
<span class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
|
|
10339
|
+
<span>Learn about Red Hat connector</span>
|
|
10340
|
+
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
10341
|
+
</span>
|
|
10342
|
+
</a>
|
|
9131
10343
|
</div>
|
|
9132
10344
|
</div>
|
|
9133
10345
|
</div>
|
|
9134
10346
|
</div>
|
|
9135
|
-
<footer class="pf-c-wizard__footer">
|
|
9136
|
-
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
9137
|
-
<button class="pf-c-button pf-m-secondary" type="button">Back</button>
|
|
9138
|
-
<div class="pf-c-wizard__footer-cancel">
|
|
9139
|
-
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
9140
|
-
</div>
|
|
9141
|
-
</footer>
|
|
9142
10347
|
</div>
|
|
10348
|
+
<footer class="pf-c-wizard__footer">
|
|
10349
|
+
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
10350
|
+
<button class="pf-c-button pf-m-secondary" type="button">Back</button>
|
|
10351
|
+
<div class="pf-c-wizard__footer-cancel">
|
|
10352
|
+
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
10353
|
+
</div>
|
|
10354
|
+
</footer>
|
|
9143
10355
|
</div>
|
|
9144
10356
|
</section>
|
|
9145
10357
|
</main>
|