@unc-dsi/unc-horizontal-stepper
v0.0.4
Published
unc-horizontal-stepper
Downloads
8
Maintainers
Readme
<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