diff options
Diffstat (limited to 'input/example.ts')
| -rw-r--r-- | input/example.ts | 45 |
1 files changed, 30 insertions, 15 deletions
diff --git a/input/example.ts b/input/example.ts index 1ca5736..3855347 100644 --- a/input/example.ts +++ b/input/example.ts @@ -10,13 +10,15 @@ function exampleInputString() { el_title.innerText = "Input string" el_example.appendChild(el_title) + let el_out = document.createElement("span") + let opts: WuiInputStringOpts = { id: "my_input_string", label: "Input string with ID", value: "Hello, input string", hint: "The input ID is 'my_input_string'", - onChangeHandler: (new_value: string) => { - console.log("input string new value: ", new_value) + onChangeHandler: (v: string) => { + el_out.innerText = v }, } let el_input_string = new WuiInputString(opts) @@ -27,8 +29,8 @@ function exampleInputString() { value: "Hello, disabled input string", is_disabled: true, hint: "The input string is disabled", - onChangeHandler: (new_value: string) => { - console.log("input string new value: ", new_value) + onChangeHandler: (v: string) => { + el_out.innerText = v }, } el_input_string = new WuiInputString(opts) @@ -37,13 +39,18 @@ function exampleInputString() { opts = { label: "Input string without hint", value: "Hello, input string without hint", - onChangeHandler: (new_value: string) => { - console.log("input string without hint: new value: ", new_value) + onChangeHandler: (v: string) => { + el_out.innerText = v }, } el_input_string = new WuiInputString(opts) el_example.appendChild(el_input_string.el) + let el_out_label = document.createElement("div") + el_out_label.innerText = "Input string changes to " + el_out_label.appendChild(el_out) + el_example.appendChild(el_out_label) + document.body.appendChild(el_example) } @@ -54,11 +61,13 @@ function exampleInputNumber() { el_title.innerText = "Input number" el_example.appendChild(el_title) + let el_out = document.createElement("span") + let opts: WuiInputNumberOpts = { label: "Input number", - value: 100, + value: 1, onChangeHandler: (val: number) => { - console.log("number changes to", val) + el_out.innerText = ""+val }, } let input_num = new WuiInputNumber(opts) @@ -67,10 +76,10 @@ function exampleInputNumber() { opts = { id: "my_input_number", label: "Input number with ID", - value: 100, + value: 10, hint: "The ID for this input is 'my_input_number'", onChangeHandler: (val: number) => { - console.log("number changes to", val) + el_out.innerText = ""+val }, } input_num = new WuiInputNumber(opts) @@ -78,11 +87,11 @@ function exampleInputNumber() { opts = { label: "Input number disabled", - value: 100, + value: 1000, hint: "Input number with 'is_disabled' set to true", is_disabled: true, onChangeHandler: (val: number) => { - console.log("number changes to", val) + el_out.innerText = ""+val }, } input_num = new WuiInputNumber(opts) @@ -90,10 +99,10 @@ function exampleInputNumber() { opts = { label: "Input number with hint", - value: 100, + value: 10000, hint: "This is the <b>hint</b>", onChangeHandler: (val: number) => { - console.log("number changes to", val) + el_out.innerText = ""+val }, } input_num = new WuiInputNumber(opts) @@ -105,11 +114,17 @@ function exampleInputNumber() { max: 12, min: -20, onChangeHandler: (val: number) => { - console.log("number changes to", val) + el_out.innerText = ""+val }, } input_num = new WuiInputNumber(opts) el_example.appendChild(input_num.el) + + let el_out_label = document.createElement("div") + el_out_label.innerText = "Input number changes to " + el_out_label.appendChild(el_out) + el_example.appendChild(el_out_label) + document.body.appendChild(el_example) } |