Button

Button component creates a button element in the sidebar content. It will emit click 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: "Button",
        id: "myBtn",
        text: "Publish",
        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	Button	This field should be passed Button as value to create a Button component. This value is case-sensitive.
text	String	Text content of the button element.
image?	String	You can pass your image source url (relative to the assets folder in your plugin src directory) here. This will make button act like clickable image.
rightIcon?	Object	You can pass your icon image source url here, to be placed on the right side of button.
tooltip?	String	The string passed in this param will be displayed as a tooltip for the button element.
leftIcon?	String	You can pass your icon image source url here, to be placed on the left side of button.
styles?	Object	Custom styles for the root element.
textStyles?	Object	Custom styles for the inner text element.
rightIconStyles?	Object	Custom styles for the right icon element.
leftIconStyles?	Object	Custom styles for the left icon element.

Shadow Methods

Methods	Arguments	Description
changeText	text: String	Using this function plugin can change the text label of the button.
setStyles	styles: Object	This function is use to apply styles to the root of the element.

Events

Event Keyword	Description
click	This event is triggered when the button is clicked.
mouseenter	This event is triggered when the mouse cursor enters the button element.
mouseleave	This event is triggered when the mouse cursor leaves the button element.

Note

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