This is an input field for entering some text.
Related sample: Toolbar. Input
The following example shows how an Input control can be easily added to a toolbar with the help of the add() method of Tree Collection:
toolbar.data.add({
type:"input",
value:"",
placeholder:"Type to search"
});
You can provide the following attributes in the configuration object of an input field:
type | (string) required, the type of a control, set it to "input". If not specified - the "navItem" type is applied by default. |
id | (string) the id of a control, auto-generated if not set |
parent | (string) the parent of the item |
value | (string) optional, the initial value of the field |
css | (string|string[]) adds style classes to an input |
icon | (string) optional, the name of an icon from the used icon font |
placeholder | (string) optional, a tip for the input |
width | (number) optional, the width of the input field |
label | (string) optional, a text label for the Input control |
tooltip | (string) a tooltip for an input |
hidden | (boolean) defines whether an input is hidden |
disabled | (boolean) defines whether an input is disabled |
You can show or hide Input with the show()/hide() methods of Toolbar:
toolbar.show(id);
toolbar.hide(id);
Related sample: Toolbar. Hide/Show
You can also enable and disable inputs with the enable()/disable() methods of Toolbar:
toolbar.enable(id);
toolbar.disable(id);
Related sample: Toolbar. Enable/Disable
You can create a tooltip for an input:
{
type: "input",
value: "",
tooltip:"Type to search"
}
Related sample: Toolbar. Tooltips
You can use the setState() and getState() methods of Toolbar to change and access the value of Input.
To fill in Input with some text, call setState() with a key-value pair as a parameter, where the key is the ID of the input and the value is the text:
{
type: "input",
id:"search",
value: ""
}
...
toolbar.setState({search:"Summer"});
To get the text that is currently inside the Input control, call getState():
toolbar.getState(); //-> {search:"Summer"}
Check the full list of available operations in the Toolbar API and Tree Collection API.
Back to top