Input

Input component creates an input element in the sidebar content. It will emit ‘change’ event that user can subscribe to using INKAPI.addEvent.

Example

import INKAPI from './inkapi.js'

INKAPI.ready(async () => {

  const UI = INKAPI.ui;

  const sidebarObj = await UI.create({
    type: "Sidebar",
    sidebarTitle: "Personal Sidebar",
    icon: "./sample.svg",
    children: [
      {
        type: "Input",
        id: "myInp",
        placeholder: "Search here...",
        styles: {
          "border-radius": "5px",
        }
      },
    ],
  });

  console.log(sidebarObj);

});

Options

Name	Type	Description
id?	String | Number	You can assign a unique id to the component. It will be helpful for listening to events and removing component in future. If id is not given by user (or if given id is already associated with a UI component) then an automatically generated id is assigned to the component.
type	Input	This field should be passed Input as value to create a Input component. This value is case-sensitive.
placeholder?	String	Placeholder value for the input element.
styles?	Object	Custom styles for the element.
rootStyles?	Object	Custom styles for the root wrapper element.
clearable?	Boolean	Enabling this will display clear icon on input which will clear the input value on click.

Shadow Methods

Methods	Arguments	Description
setValue	value: String	This function is used to set value of the input component.
getValue	none	This function is used to get the current value of the input component.

Events

Event Keyword	Description
change	This event is triggered when the input value is changed.

Note

To learn more about shadow methods and shadow objects, please refer here.