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