1.0.3 • Published 4 years ago
Install
npm install jcb-stepper
Usage example
index.html
<!DOCTYPE html>
<body>
<jcb-stepper id="stepper" value="1">
<jcb-stepper-item complete>Saisie des informations</jcb-stepper-item>
<jcb-stepper-item error>Confirmation</jcb-stepper-item>
<jcb-stepper-item>Terminé</jcb-stepper-item>
</jcb-stepper>
<label>
Numéro d'étape
<jcb-input id="step" type="number" placeholder="step" value="2"></jcb-input>
</label>
</body>
<script>
import 'jcb-stepper'
import 'jcb-input'
import "@fontsource/roboto/300.css"
document.getElementById('stepper').setAttribute('value', document.getElementById('step').getAttribute('value'))
document.getElementById('step').addEventListener('input', (event) => {
console.log('input', event.target.value)
document.getElementById('stepper').setAttribute('value', event.target.value)
})
</script>
<style>
:root {
--jcb-stepper-text-color: white;
--jcb-stepper-line-color: #f0f0f0;
--jcb-stepper-active-color: gray;
--jcb-stepper-inactive-color: lightgray;
--jcb-stepper-complete-color: green;
--jcb-stepper-error-color: red;
font-family: "Roboto";
font-weight: 300;
}
</style>
npm i jcb-stepper
npm i jcb-input
npm i @fontsource/roboto
npm i parcel -g
parcel index.html
API references
jcb-stepper
Properties
| Name | Type | Default | Description |
|---|
value | Number | false | Curent active step index, starts at 1 |
CSS variables
| Name | Description |
|---|
--jcb-stepper-text-color | text color in circles and labels |
--jcb-stepper-line-color | line color |
--jcb-stepper-active-color | color of text and cicle background for active steps |
--jcb-stepper-inactive-color | color of text and cicle background for inactive steps |
--jcb-stepper-complete-color | color of text and cicle background for completed steps |
--jcb-stepper-error-color | color of text and cicle background for error steps |
jcb-stepper-item
Properties
| Name | Type | Default | Description |
|---|
complete | Boolean | false | True when step is completed |
error | Boolean | false | True when step is in error |