zidanecomponents/StepFrame
import { … } from 'zidane-ui'ui/src/components/StepFrame.tsx
Components#
StepActionsComponent#
The usual step footer: Back on the left, and Skip and Continue on the right. Continue has its
↵ keycap. A missing handler hides its button.
function StepActions(props: StepActionsProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | StepActionsProps | Component props. |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| busy? | boolean | Continue is working. It shows as pressed, and the user cannot press it again. |
| className? | string | Extra classes on the root element. |
| continueDisabled? | boolean | The user cannot press Continue yet, such as before a provider is ready. |
| continueLabel? | ReactNode | Text of the Continue button. Defaults to the |
| note? | ReactNode | Muted text before the buttons on the right, such as why Continue is off. |
| onBack? | () => void | Goes to the previous step. Absent: no Back button. |
| onContinue? | () => void | Moves on. Absent: no Continue button. |
| onSkip? | () => void | Leaves this step's choices as they were and moves on. Absent: no Skip button. |
| skipLabel? | ReactNode | Text of the Skip button. Defaults to the |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
StepFrameComponent#
Renders a wizard step's page: its heading, its body, an optional side pane, and a footer.
function StepFrame(props: StepFrameProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | StepFrameProps | Component props. |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| aside? | ReactNode | A side pane, such as a live preview: beside the body from 1024px wide, pinned 48px below the top of the scroller as the body scrolls, and under the body below that width. |
| children? | ReactNode | The step's body. |
| className? | string | Extra classes on the page. |
| eyebrow? | ReactNode | Small label above the title, such as the step's name. |
| footer? | ReactNode | The footer, usually |
| lede? | ReactNode | One sentence under the title. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
| title | ReactNode | The step's question or heading. |
Interfaces#
StepActionsPropsInterface#
Props for StepActions.
interface StepActionsPropsProperties
| Name | Type | Description |
|---|---|---|
| busy? | boolean | Continue is working. It shows as pressed, and the user cannot press it again. |
| className? | string | Extra classes on the root element. |
| continueDisabled? | boolean | The user cannot press Continue yet, such as before a provider is ready. |
| continueLabel? | ReactNode | Text of the Continue button. Defaults to the |
| note? | ReactNode | Muted text before the buttons on the right, such as why Continue is off. |
| onBack? | () => void | Goes to the previous step. Absent: no Back button. |
| onContinue? | () => void | Moves on. Absent: no Continue button. |
| onSkip? | () => void | Leaves this step's choices as they were and moves on. Absent: no Skip button. |
| skipLabel? | ReactNode | Text of the Skip button. Defaults to the |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
StepFramePropsInterface#
Props for StepFrame.
interface StepFramePropsProperties
| Name | Type | Description |
|---|---|---|
| aside? | ReactNode | A side pane, such as a live preview: beside the body from 1024px wide, pinned 48px below the top of the scroller as the body scrolls, and under the body below that width. |
| children? | ReactNode | The step's body. |
| className? | string | Extra classes on the page. |
| eyebrow? | ReactNode | Small label above the title, such as the step's name. |
| footer? | ReactNode | The footer, usually |
| lede? | ReactNode | One sentence under the title. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
| title | ReactNode | The step's question or heading. |