Input

A text input field with an icon.

Input

Adding Input

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"}