@kano/kwc-number-inputs
v0.0.11
Published
<br/>
Downloads
18
Maintainers
Keywords
Readme
kwc-number-inputs
Hey you, do you want the doc for a specific component?
Click here and go to docs
Tests / Demo
To run test:
yarn serve-test
To run demo:
yarn serve
<kwc-numpad>
Usage:
<kwc-numpad></kwc-numpad>
or
<kwc-numpad limited></kwc-numpad>
Properties:
CSS variables:
--kwc-numpad-background
--kwc-numpad-button-background
--kwc-numpad-button-background-hover
--kwc-numpad-button-color
--kwc-numpad-button-color-hover
--kwc-numpad-button-width
--kwc-numpad-button-height
HTML attributes:
limited
- optional
- default is
false
<kwc-slider>
Usage:
<kwc-slider></kwc-slider>
or
<kwc-slider min="0" max="150"></kwc-slider>
Properties:
CSS variables:
--kwc-numpad-background
--kwc-numpad-slider-background
--kwc-numpad-slider-background-hover
--kwc-numpad-slider-color
--kwc-numpad-slider-color-hover
--kwc-numpad-slider-border-color
--kwc-numpad-slider-border-color-hover
HTML attributes:
min
- optional
- default is
0
max
- optional
- default is
100
<kwc-dial>
Usage:
<kwc-dial></kwc-dial>
or
<kwc-dial prefix="$" suffix="°"></kwc-dial>
Properties:
CSS variables:
--kwc-numpad-background
--kwc-numpad-dial-background
--kwc-numpad-dial-background-hover
--kwc-numpad-dial-text-color
--kwc-numpad-dial-text-color-hover
--kwc-numpad-dial-color
--kwc-numpad-dial-color-hover
--kwc-numpad-dial-border-color
--kwc-numpad-dial-border-color-hover
--kwc-numpad-dial-round-text
--kwc-numpad-dial-round-text-hover
--kwc-numpad-dial-center-text
--kwc-numpad-dial-center-text-hover
HTML attributes:
prefix
- optional
suffix
- optional
<kwc-slider-numpad>
Usage:
<kwc-slider-numpad></kwc-slider-numpad>
or
<kwc-slider-numpad min="0" max="150"></kwc-slider-numpad>
Properties:
CSS variables:
--kwc-numpad-background
--kwc-numpad-button-background
--kwc-numpad-button-background-hover
--kwc-numpad-button-color
--kwc-numpad-button-color-hover
--kwc-numpad-button-width
--kwc-numpad-button-height
--kwc-numpad-slider-background
--kwc-numpad-slider-background-hover
--kwc-numpad-slider-color
--kwc-numpad-slider-color-hover
--kwc-numpad-slider-border-color
--kwc-numpad-slider-border-color-hover
HTML attributes:
min
- optional
- default is
0
max
- optional
- default is
100
<kwc-dial-numpad>
Usage:
<kwc-dial-numpad></kwc-dial-numpad>
or
<kwc-dial-numpad prefix="$" suffix="°"></kwc-dial-numpad>
Properties:
CSS variables:
--kwc-numpad-background
--kwc-numpad-button-background
--kwc-numpad-button-background-hover
--kwc-numpad-button-color
--kwc-numpad-button-color-hover
--kwc-numpad-button-width
--kwc-numpad-button-height
--kwc-numpad-dial-background
--kwc-numpad-dial-background-hover
--kwc-numpad-dial-text-color
--kwc-numpad-dial-text-color-hover
--kwc-numpad-dial-color
--kwc-numpad-dial-color-hover
--kwc-numpad-dial-border-color
--kwc-numpad-dial-border-color-hover
--kwc-numpad-dial-round-text
--kwc-numpad-dial-round-text-hover
--kwc-numpad-dial-center-text
--kwc-numpad-dial-center-text-hover
HTML attributes:
prefix
- optional
suffix
- optional
<kwc-dial-slider>
Usage:
<kwc-dial-slider></kwc-dial-slider>
or
<kwc-dial-slider
prefix="$"
suffix="°"
min="0"
max="150">
</kwc-dial-slider>
Properties:
CSS variables:
--kwc-numpad-background
--kwc-numpad-slider-background
--kwc-numpad-slider-background-hover
--kwc-numpad-slider-color
--kwc-numpad-slider-color-hover
--kwc-numpad-slider-border-color
--kwc-numpad-slider-border-color-hover
--kwc-numpad-dial-background
--kwc-numpad-dial-background-hover
--kwc-numpad-dial-text-color
--kwc-numpad-dial-text-color-hover
--kwc-numpad-dial-color
--kwc-numpad-dial-color-hover
--kwc-numpad-dial-border-color
--kwc-numpad-dial-border-color-hover
--kwc-numpad-dial-round-text
--kwc-numpad-dial-round-text-hover
--kwc-numpad-dial-center-text
--kwc-numpad-dial-center-text-hover
HTML attributes:
min
- optional
- default is
0
max
- optional
- default is
100
prefix
- optional
suffix
- optional