0.0.4 • Published 2 years ago
@unc-dsi/unc-horizontal-stepper v0.0.4
<unc-horizontal-stepper>
<unc-horizontal-stepper> is helpful for creating wizard.
<unc-horizontal-stepper current-step="1">
<unc-horizontal-step>Step 1</unc-horizontal-step>
<unc-horizontal-step>Step 2</unc-horizontal-step>
<unc-horizontal-step>Step 3</unc-horizontal-step>
</unc-horizontal-stepper>
Attributes / Properties
Attribute | Property | Description |
---|---|---|
current-step | currentStep | Set/get the current step |
Events
Name | Description |
---|---|
select | Fire when the current step change. Returns the new current step index : {detail: { currentStep }} |
Styling
Name | Default Lumo value | Default value | Description |
---|---|---|---|
--unc-horizontal-stepper-border-radius | --lumo-border-radius-l | .5em | Radius of the rounded corners |
--unc-horizontal-stepper-box-shadow | --lumo-box-shadow-xl | 0 4px 24px -3px hsla(214, 53%, 23%, 0.16), 0 18px 64px -8px hsla(214, 47%, 21%, 0.38 | Shadow around the stepper |
--unc-horizontal-stepper-background-color | --lumo-primary-color | hsl(214, 90%, 50%) | Background color of the stepper |
--unc-horizontal-step-dot-color-active | --lumo-base-color | #fff | Dot's color of an active dot |
--unc-horizontal-step-color-inactive | --lumo-disabled-text-color | hsla(214, 50%, 22%, 0.26) | Dot's color of an inactive dot |
--unc-horizontal-step-dot-size | N/A | 13px | Size of a dot |
--unc-horizontal-step-line-height | N/A | 2px | Height of line between dots |
License
Apache License 2.0