Container

Container type creates a Container element in the sidebar content. It is a special element that has its own content area with custom styles and It can have children components.

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: "Container",
        id: "myContainer",
        styles: {
          "border-radius": "5px",
        }
        layout: [3, 3], // two columns and two rows
      },
    ],
  });

  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	Container	This field should be passed Container as value to create a Container component. This value is case-sensitive.
layout?	[ columns: Number, rows: Number ]	This will create grid like structure for your container content. you can specify number of columns and rows for the layout. Each children can position themselves using styles field.
hidden?	Boolean	If set to true, container element will be hidden initially. Can be unhide using shadow method show().
emptyStateData?	String	String data to be displayed as an empty state.
styles?	Object	Custom styles for the element.

Shadow Methods

Methods	Arguments	Description
show	none	This will unhide the container.
hide	none	This will hide the container.
setStyles	Object	This function can be used to apply styles to the component.
hideEmptyState	none	This will hide the empty state.
showEmptyState	data?: String	This will unhide the empty state. Optional parameter can be used to assign data to the empty state.

Note

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