Table of Contents

Class TwStepperTheme

Namespace
TwBlazor.Configuration.Components
Assembly
TwBlazor.dll

Theme configuration for the stepper components (TwStepper, TwStep). Override any property to customize stepper styles globally.

[ExcludeFromCodeCoverage]
public class TwStepperTheme
Inheritance
TwStepperTheme
Inherited Members

Constructors

TwStepperTheme()

public TwStepperTheme()

Properties

Circle

Gets or sets the shared base classes for a step's circular indicator button, regardless of orientation or status.

public required string Circle { get; set; }

Property Value

string

CircleClickable

Gets or sets the classes applied to a step's circle when it can be clicked to navigate to it.

public required string CircleClickable { get; set; }

Property Value

string

CircleDisabled

Gets or sets the classes applied to a disabled step's circle.

public required string CircleDisabled { get; set; }

Property Value

string

CircleIcon

Gets or sets the classes for the checkmark/custom icon rendered inside a step's circle. The icon is a font glyph, so it's sized via Circle's own font size rather than an explicit width/height - this only needs to tighten its line height for centering within the circle.

public required string CircleIcon { get; set; }

Property Value

string

CircleUpcoming

Gets or sets the classes applied to an upcoming (not yet reached) step's circle.

public required string CircleUpcoming { get; set; }

Property Value

string

Connector

Gets or sets the structural (colorless) classes for the horizontal connector between two steps - a flex-growing <li> sibling to Step that alone stretches to fill the row, so the (content-sized) steps stay evenly connected regardless of container width. Its color comes from ConnectorNeutral or the active Color.

public required string Connector { get; set; }

Property Value

string

ConnectorNeutral

Gets or sets the neutral border color applied to a connector that hasn't been reached yet.

public required string ConnectorNeutral { get; set; }

Property Value

string

Content

Gets or sets the classes for the shared panel that renders the active step's content below the horizontal step row.

public required string Content { get; set; }

Property Value

string

Description

Gets or sets the text classes for a step's secondary description.

public required string Description { get; set; }

Property Value

string

HorizontalList

Gets or sets the classes for the horizontal orientation's <ol>. Hidden below the "sm" breakpoint, where the mobile fallback (MobileContainer) is shown instead.

public required string HorizontalList { get; set; }

Property Value

string

Label

Gets or sets the text classes for an active or completed step's label.

public required string Label { get; set; }

Property Value

string

LabelUpcoming

Gets or sets the text classes for an upcoming step's label.

public required string LabelUpcoming { get; set; }

Property Value

string

MobileContainer

Gets or sets the classes for the mobile fallback container (progress bar + "Step X of N" text), shown below the "sm" breakpoint instead of HorizontalList.

public required string MobileContainer { get; set; }

Property Value

string

MobileLabel

Gets or sets the text classes for the "Step X of N: Label" text in the mobile fallback.

public required string MobileLabel { get; set; }

Property Value

string

MobileProgressLabel

Gets or sets the classes applied to the mobile fallback progress bar's visible label, kept for its accessible name but visually hidden since MobileLabel already shows the same information beneath it.

public required string MobileProgressLabel { get; set; }

Property Value

string

Step

Gets or sets the classes for a single step's <li> in the horizontal orientation - a content-sized column holding the circle, label, and description. Sits alongside separate connector <li>s (see Connector) which alone stretch to fill the row.

public required string Step { get; set; }

Property Value

string

VerticalConnector

Gets or sets the structural (colorless) classes for the vertical connector between two steps. Its color comes from ConnectorNeutral or the active Color.

public required string VerticalConnector { get; set; }

Property Value

string

VerticalContent

Gets or sets the classes for the wrapper around a vertical step's inline content, rendered beneath its label while that step is active.

public required string VerticalContent { get; set; }

Property Value

string

VerticalContentColumn

Gets or sets the classes for the label+description+content column within a vertical step.

public required string VerticalContentColumn { get; set; }

Property Value

string

VerticalIndicatorColumn

Gets or sets the classes for the circle+connector column within a vertical step.

public required string VerticalIndicatorColumn { get; set; }

Property Value

string

VerticalList

Gets or sets the classes for the vertical orientation's <ol>.

public required string VerticalList { get; set; }

Property Value

string

VerticalStep

Gets or sets the classes for a single step's <li> in the vertical orientation.

public required string VerticalStep { get; set; }

Property Value

string