Step Component synced with Web Awesome 3.7.0
wa-step is one stage inside a wa-stepper. Import WaStepDirective from angular-awesome and place each step inside a stepper.
Overview
| Input | Type | Purpose | | --- | --- | --- | | `name` | `string` | Identifies the step for navigation and events. | | `completed`, `loading`, `disabled` | `boolean` | Control the step status. | | `variant` | `neutral`, `brand`, `success`, `warning`, `danger` | Marker color. | | `attention` | `none`, `pulse`, `bounce` | Marker animation. | | `withDescription` | `boolean` | Include a slotted description in server-rendered markup. | | `active` | `boolean` | Mark this step active for server rendering; the parent controls it after hydration. |
Import
Import the step directive from the angular-awesome package:
// Import the step directive
import { WaStepDirective } from 'angular-awesome/step';
Examples
Step examples
<wa-step name="cart" [completed]="cartComplete">Cart</wa-step>
<wa-step name="shipping" attention="pulse" [withDescription]="true">
Shipping <span slot="description">Choose an address</span>
</wa-step>
<wa-step name="payment" [disabled]="paymentLocked" variant="warning">Payment</wa-step>
Place these elements inside a <wa-stepper> and import WaStepDirective with WaStepperDirective.