You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/react-renderer-demo/src/app/src/doc-components/pf4-wizard.md
+22-8Lines changed: 22 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,6 +16,8 @@ Don't forget hide form controls by setting \`showFormControls\` to \`false\` as
16
16
| setFullWidth | bool | undefined | see Patternfly |
17
17
| setFullHeight | bool | undefined | see Patternfly |
18
18
| isDynamic | bool | undefined | will dynamically generate steps navigation (=progressive wizard), please use if you use any condition fields which changes any field in other steps (wizards with conditional steps are dynamic by default) |
19
+
|showTitles|bool|undefined|If true, step titles will be shown in the wizard body|
20
+
|predictSteps|bool|undefined|If true, dynamic wizard will predict steps in the navigation.|
19
21
20
22
## Default buttonLabels
21
23
@@ -27,7 +29,6 @@ Don't forget hide form controls by setting \`showFormControls\` to \`false\` as
27
29
submit:'Submit',
28
30
}
29
31
```
30
-
31
32
You can rewrite only selection of them, e.g.
32
33
33
34
```jsx
@@ -45,9 +46,13 @@ You can rewrite only selection of them, e.g.
45
46
| stepKey | string, number | For first step: 1, otherwise anything |
46
47
| nextStep | object/stepKey of next step | See below |
47
48
| fields | array | As usual |
48
-
|substep| string | Substep title (steps are grouped by this title) |
49
+
|substepOf| string | Substep title (steps are grouped by this title) |
|showTitle|bool|If true, step titles will (not if false) be shown in the wizard body|
53
+
|customTitle|node|Use if you want to render as the title different/custom title (for example, title with a popover|
54
+
|disableForwardJumping|bool|When use return to this step, jumping forward in the navigation is disabled.|
55
+
51
56
52
57
- nextStep can be stepKey of the next step
53
58
- or you can branch the way by using of object:
@@ -63,6 +68,12 @@ nextStep: {
63
68
},
64
69
```
65
70
71
+
- another option is to use custom function. The custom function receives as the first argument an object with values and the function has to return a `stepKey` in string.
@@ -98,9 +109,10 @@ The components receives these props:
98
109
|buttonLabels|Object with labels.|
99
110
|renderNextButton|Function which completely handle the next/submit button.|
100
111
112
+
101
113
## How to do substeps
102
114
103
-
Field in Wizard fields should contain `substep` <`string`> which is title of the primary step. Steps with the same substep are grouped together by the title of primary step.
115
+
Field in Wizard fields should contain `substepOf` <`string`> which is title of the primary step. Steps with the same substepOf are grouped together by the title of primary step.
104
116
105
117
### Example
106
118
@@ -126,20 +138,20 @@ Schema: [
126
138
stepKey:'security',
127
139
title:'Security',
128
140
nextStep:'credentials',
129
-
substep:'Configuration'
141
+
substepOf:'Configuration'
130
142
},{
131
143
stepKey:'credentials',
132
144
title:'Credentials',
133
145
nextStep:'summary',
134
-
substep:'Configuration'
146
+
substepOf:'Configuration'
135
147
},{
136
148
stepKey:'summary',
137
149
title:'Summary'
138
150
},
139
151
]
140
152
```
141
153
142
-
Progressive Wizard works same way. It checks if previous step has the same \`substep\` value and if so, it grouped them together.
154
+
Progressive Wizard works same way. It checks if previous step has the same \`substepOf\` value and if so, it grouped them together.
143
155
If the value is different, a new primary step is created with the step as a substep.
144
156
145
157
## First step
@@ -162,11 +174,13 @@ First step should have `stepKey: 1` or as a string: `'1'`
162
174
- steps are visible as user visits them
163
175
- user can jump only back
164
176
- use `isDynamic` prop to enforce it
177
+
- use `predictSteps` to allow navigation to show future steps
178
+
- if you have any conditional fields in the step, you should use `disableForwardJumping` in the step definition, to disable jumping forward in the navigation, otherwise user could miss the changed fields in next steps.
0 commit comments