Stepper
-
Style Class: mfx-stepper
-
Default Stylesheet: MFXStepper.css
-
Default Skin: MFXStepperSkin.java
| Property | Description | Type |
|---|---|---|
| stepperToggles | The stepper's toggles list, each toggle is a step | ObservableList |
| animationDuration | Specifies, in milliseconds, the duration of the progress bar animation | Duration |
| progress | Specifies the stepper's progress, the number of COMPLETED toggles divided by the total number of toggles. The values go from 0.0 to 1.0 | Double |
| currentIndex | Specifies the selected toggle position in the toggles list. The index is updated by the next() and previous() methods |
Integer |
| currentContent | Convenience property that holds the selected toggle content node. In case one of the toggles has a null content the content pane's children list is cleared |
Node |
| lastToggle | Convenience property that specifies if the last toggle is selected | Boolean |
| enableContentValidationOnError | Specifies if all the controls that implement the Validated interface should be validated when the next button is pressed and the toggle state is ERROR | Boolean |
| Property | Description | CSS Property | Type | Default Value |
|---|---|---|---|---|
| spacing | Specifies the spacing between toggles | -mfx-spacing | Double | 128.0 |
| extraSpacing | Specifies the extra length (at the start and at the end) of the progress bar | -mfx-extra-spacing | Double | 64.0 |
| alignment | Specifies the alignment of the toggles. Steppers are usually centered though |
-mfx-alignment | Pos[Enum] | Pos.CENTER |
| baseColor | Specifies the stepper's primary color | -mfx-base-color | Paint | Color.web("7F0FFF") |
| altColor | Specifies the stepper's secondary color | -mfx-alt-color | Paint | Color.web("BEBEBE") |
| progressBarBorderRadius | Specifies the borders radius of the progress bar | -mfx-bar-borders-radius | Double | 7.0 |
| progressBarBackground | Specifies the progress bar track color | -mfx-bar-background | Paint | Color.web("#F8F8FF") |
| progressColor | Specifies the progress color | -mfx-progress-color | Paint | Color.web("#7F0FFF") |
| animated | Specifies if the progress bar should be animated or not | -mfx-bar-animated | Boolean | true |
-
.mfx-stepper
-
.mfx-stepper .track (progress bar's track)
-
.mfx-stepper .bar (progress bar's progress)
-
.mfx-stepper .mfx-stepper-toggle
-
.mfx-stepper .content-pane (the pane containing the toggle's specified content)
-
.mfx-stepper .buttons-box (the footer containing the previous and next buttons)
-
.mfx-stepper .buttons-box .mfx-button
-
Style Class: mfx-stepper-toggle
-
Default Stylesheet: MFXStepperToggle.css
-
Default Skin: MFXStepperToggleSkin.java
| Property | Description | Type |
|---|---|---|
| showErrorIcon | Specifies if a little error icon should be shown when the state is ERROR in the upper right corner of the toggle (default position defined in the skin) | Boolean |
| content | The content to be shown in the stepper when selected | Node |
| text | Specifies the text to be shown above or below the toggle | String |
| icon | Specifies the icon shown in the circle of the toggle | Node |
| state | Specifies the state of the toggle | StepperToggleState[Enum] |
| Property | Description | CSS Property | Type | Default Value |
|---|---|---|---|---|
| labelTextGap | Specifies the gap between the toggle's circle and the label | -mfx-label-text-gap | Double | 10.0 |
| textPosition | Specifies the position of the label | -mfx-text-position | TextPosition[Enum] | TextPosition.BOTTOM |
| size | Specifies the radius of the toggle's circle | -mfx-size | Double | 22.0 |
| strokeWidth | Specifies the stroke width of the toggle's circle | -mfx-stroke-width | Double | 2.0 |
-
.mfx-stepper-toggle
-
.mfx-stepper-toggle .mfx-text-field