Twitter2.6k

Building Blocks with spartan/ui

Clean, modern building blocks for your Angular applications.

Get StartedComponents
SidebarLoginSignupCalendarStepper
A basic horizontal stepper Open in
stepper-basicstepper-basic
A vertical stepper Open in

Set orientation="vertical" when content is dense or horizontal space is limited.

stepper-verticalstepper-vertical
A responsive stepper Open in

Drive orientation from a BreakpointObserver to switch layout based on the viewport. Resize the preview to see it change.

stepper-responsivestepper-responsive
A linear stepper with validation Open in

With linear enabled, the current step must be valid before advancing.

stepper-linearstepper-linear
A stepper with lazy content Open in

Use spartanStepContent to attach a step's body lazily, keeping the initial render lighter.

stepper-lazy-contentstepper-lazy-content
A stepper with layout controls Open in

Control horizontal layout with labelPosition and headerPosition .

stepper-layoutstepper-layout
A stepper with animation controls Open in

Toggle animations and transition duration per instance with animationsEnabled and animationDuration , or set defaults globally with provideHlmStepperConfig .

stepper-animationsstepper-animations
A stepper with indicator modes Open in

Switch the indicator with indicatorMode between number , state , and icon .

stepper-indicatorsstepper-indicators
A stepper with error states Open in

Enable showError through STEPPER_GLOBAL_OPTIONS to surface a step's error message in its header.

stepper-errorstepper-error
A stepper with RTL support Open in

The stepper mirrors automatically under a right-to-left dir . Switch the docs language to a RTL locale to preview it.

stepper-rtlstepper-rtl