INK API

Getting Started:

  • Introduction
  • Demo Plugins
  • Quick Start
  • Package File

Command line tools:

  • INK CLI Intro
  • INK CLI Usage

APIs:

  • INK APIs Intro
  • API Namespaces

Custom UI:

  • Custom UI
  • UI Components
    • Sidebar
      • Example
      • Options
    • Button
    • Text
    • Textarea
    • Input
    • Container
    • Toggle

Advanced:

  • Debug Window
  • Permissions
  • Plugin Workers
  • INK Editor Blocks Architecture
INK API
  • »
  • UI Components »
  • Sidebar
  • View page source

Sidebar¶

Sidebar component creates a new sidebar on the left panel in INK editor. It takes a title and icon and creates sidebar accordingly.

Example¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
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: [],
  });

  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

Sidebar

This field should be passed Sidebar as value to create a Sidebar component. This value is case-sensitive.

sidebarTitle

String

This will set the title for your sidebar which will be displayed on top of your sidebar content and as a tooltip on the sidebar expand button.

icon

String

You can pass your icon source url (relative to the assets folder in your plugin src directory) here. This will set custom icon for the sidebar expand button. It is recommended to use black filled svg.

layout?

[ columns: Number, rows: Number ]

This will create grid like structure for your Sidebar content. you can specify number of columns and rows for the layout. Each children can position themselves using styles field.

children?

Array<Objects>

This field takes an array of child component’s JSON, which are to be created in Sidebar content.

Next Previous

© Copyright 2021, INK Content, Inc..

Built with Sphinx using a theme provided by Read the Docs.