A text input field with an icon.
The following syntax shows how an Input control can be easily added to a ribbon:
ribbon.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) 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) the initial value of the field |
icon | (string) the name of an icon from the used icon font |
css | (string|string[]) adds style classes to an input |
placeholder | (string) a tip for the input |
width | (number) the width of the input field |
label | (string) 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 methods of Ribbon:
ribbon.show(id);
ribbon.hide(id);
You can also disable and enable inputs:
ribbon.enable(id);
ribbon.disable(id);
You can use the setState() and getState() methods of Ribbon to change and access the value of Input.
To fill in Input with 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: ""
}
...
ribbon.setState({search:"Summer"});
To get the text that is currently inside the Input control, call getState():
ribbon.getState();
// {search:"Summer"}
Back to top