Input

Date

Coding

js <script defer>

import { InputDate } from 'gadjet/dist/module/gadjet.bundle.js';

InputDate.define('el-input-date');

html

<el-input-date>
    <input type="date">
</el-input-date>

Number

Coding

js <script defer>

import { InputNumber } from 'gadjet/dist/module/gadjet.bundle.js';

InputNumber.define('el-input-number');
InputNumber.tagStyle({
    color: 'blue'
});

html

<el-input-number>
    <input type="number"
        value="0"
        step="1"
        min="-100"
        max="100"
        stepIntervalThreshold="700"
        stepInterval="100"
        stepChangeDelay="1000">
</el-input-number>

Element API

propstepIntervalThreshold: string | number = "700"

Threshold time (ms) when press & hold button before trigger step interval.

propstepInterval: string | number = "100"

Increase or decrease step interval time (ms). Lesser is faster.

propstepChangeDelay: string | number = "1000"

Delay time before emit change event. Can reduce unneccessary change event.

Number Center

Coding

js <script defer>

import { InputNumberCenter } from 'gadjet/dist/module/gadjet.bundle.js';

InputNumberCenter.define('el-input-number-center');

html

<el-input-number-center>
    <input type="number" value="0"
        min="-100"
        max="100"
        stepIntervalThreshold="700"
        stepInterval="100"
        stepChangeDelay="1000">
</el-input-number-center>

Element API

propstepIntervalThreshold: string | number = "700"

Threshold time (ms) when press & hold button before trigger step interval.

propstepInterval: string | number = "100"

Increase or decrease step interval time (ms). Lesser is faster.

propstepChangeDelay: string | number = "1000"

Delay time before emit change event. Can reduce unneccessary change event.

Radio

Red Blue Green

Coding

js <script defer>

import { InputRadio } from 'gadjet/dist/module/gadjet.bundle.js';

InputRadio.define('el-input-radio');
InputRadio.tagStyle({
    color: '#ccc',
    boxShadowColor: '#777',
    activeColor: 'blue'
});

html

<el-input-number-radio>
    <input type="radio" name="color" value="red" checked>
</el-input-number-radio>
Red

<el-input-number-radio>
    <input type="radio" name="color" value="blue">
</el-input-number-radio>
Blue

<el-input-number-radio>
    <input type="radio" name="color" value="green">
</el-input-number-radio>
Green

Radio Button & Grouping

Red

Blue

Green

Coding

js <script defer>

import { InputRadioButton, InputRadioButtonGroup } from 'gadjet/dist/module/gadjet.bundle.js';

InputRadioButton.define('el-input-radio-button');
InputRadioButtonGroup.define('el-input-radio-button-group');

InputRadioButton.tagStyle({
    activeColor: 'blue',
    buttonColor: '#ccc'
});

html

<el-input-radio-button-group>
    <el-input-radio-button>
        <input type="radio" name="color" value="red">
        Red
    </el-input-radio-button>
    <el-input-radio-button>
        <input type="radio" name="color" value="blue">
        Blue
    </el-input-radio-button>
    <el-input-radio-button>
        <input type="radio" name="color" value="green">
        Green
    </el-input-radio-button>
</el-input-radio-button-group>

Range

Coding

js <script defer>

import { InputRange } from 'gadjet/dist/module/gadjet.bundle.js';

InputRage.define('el-input-range');
InputRange.tagStyle({
    trackColor: '#ccc',
    fillColor: 'blue',
    pinColor: '#ccc',
    pinHoverColor: 'blue'
});

html

<el-input-range></el-input-range>

Tag Input

tag

Coding

js <script defer>

import { InputTag } from 'gadjet/dist/module/gadjet.bundle.js';

InputTag.define('el-input-tag');
InputTag.tagStyle({
    tagColor: 'blue',
    tagBorderRadius: '4px'
});

html

<el-input-tag>
    <el-input-tag-tagx>tag</el-input-tag-tagx>
</el-input-tag>

Element API

proptags: Array = []

Get/set tags.

fnaddTag(tag: string)

Add a tag.

fnaddTags(tag: Array<string>)

Add tags.

fnclearTags()

Clear all tags.