Stepper

Where someone is in a process.

IzzyBlazor.Stepper in the IzzyBlazor.Core package, generated from the 0.1.0-alpha.17 assembly and its doc comments.

Properties (6)

ChildContentRenderFragment?

The Steps, in order.

Currentint = 1

The current step, counting from 1. Steps before it show as done. Past the last step, every step is done; 0 means none has started.

OrientationOrientation = Orientation.Horizontal

A row (the default) or a column. On phones a row shows only the current step's label; the other steps are markers, and a finished step with an Href is still a link on its marker.

Labelstring? = "Progress"

The list's accessible name. Defaults to "Progress".

CompletedLabelstring? = "(completed)"

Read after a finished step's label, in place of its check mark. Defaults to "(completed)".

SizeControlSize = ControlSize.Md

The marker and text size. Defaults to ControlSize.Md.

Item props (from LayoutItemBase)

MarginResponsive<int>Responsive

Margin on all sides, in spacing steps (-16 to 16; one step = 4px).

MarginXResponsive<int>Responsive

Horizontal margin. When set, replaces Margin on this axis.

MarginYResponsive<int>Responsive

Vertical margin. When set, replaces Margin on this axis.

MarginTopResponsive<int>Responsive

Top margin. When set, replaces MarginY and Margin on this side.

MarginBottomResponsive<int>Responsive

Bottom margin. When set, replaces MarginY and Margin on this side.

MarginStartResponsive<int>Responsive

Margin at the start (left in left-to-right text, right in right-to-left). Replaces MarginX and Margin on this side.

MarginEndResponsive<int>Responsive

Margin at the end (right in left-to-right text, left in right-to-left). Replaces MarginX and Margin on this side.

WidthResponsive<Length>Responsive

Width.

MinWidthResponsive<Length>Responsive

Minimum width.

MaxWidthResponsive<Length>Responsive

Maximum width.

Growbool = false

Whether to grow into free space inside a Stack, Row or Column: <Box Grow>.

Shrinkbool = true

Whether to shrink when space is short inside a Stack, Row or Column. Defaults to true; Shrink="false" keeps the size.

BasisResponsive<Length>Responsive

Starting size inside a Stack, before growing or shrinking.

AlignSelfResponsive<Align>Responsive

Alignment across the parent's direction, overriding the parent's Align for this component only, such as a button lined up with the bottom of labeled fields in a Row.

ColSpanResponsive<int>Responsive

How many columns it spans in a Form or Fieldset with Columns, or a Grid; GridSpan.Full for the whole row. Never more than the columns shown, so a form that narrows to one column needs no breakpoints.

NewRowbool = false

Starts a new row in a Form or Fieldset with Columns, or a Grid, leaving the rest of the row before it empty.

Common props (from IzzyComponentBase)

Classstring?

Extra CSS classes, merged after the component's own classes.

Stylestring?

Inline style, appended after the component's generated custom properties.

HiddenFromBreakpoint?

Hides the component from this breakpoint up, such as a menu button only phones need.

VisibleFromBreakpoint?

Shows the component only from this breakpoint up, such as header links for wide screens.

Events (0)

No events.

Parts (1)

Components written inside Stepper, documented here with it.

`Step`

One step in a Stepper: a numbered marker (a check once done), its label and an optional description. For a step that only sometimes applies, set Hidden rather than wrapping it in @if: Blazor renders a step added later after the others, which would number it out of order.

Labelstring?

The step's name, such as "Shipping".

Descriptionstring?

A muted line under the label.

Hrefstring?

Makes the label a link, such as back to a finished step.

Hiddenbool = false

Leaves the step out (not rendered, not numbered) while keeping its place, for a step that only sometimes applies. Use this rather than @if, which would number a step that appears later out of order.

IconIconData?

An icon in the marker in place of the number (until the step is done).

Plus 4 common props.

Types (2)

`ControlSize`

enum

The height of interactive controls. Shared by buttons and form fields, so a button and an input of the same size line up in a row.

ControlSize values
Value	Description
`Sm`	32px tall, small text.
`Md`	36px tall (the default).
`Lg`	44px tall, large text. For touch-first and marketing pages.

`Orientation`

enum

Whether items run across or down.

Orientation values
Value	Description
`Vertical`	Top to bottom.
`Horizontal`	Side by side, wrapping when space runs out.