jcb-stepper
1.0.3 • Public • Published
npm install jcb-stepper
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
| Name |
Type |
Default |
Description |
value |
Number |
false |
Curent active step index, starts at 1 |
| 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 |
| Name |
Type |
Default |
Description |
complete |
Boolean |
false |
True when step is completed |
error |
Boolean |
false |
True when step is in error |
Package Sidebar
Install
Weekly Downloads