Tabs

Introduction to Tabs

What is a Tab?

The side panel in the editor consists of various tabs like Content, Blocks, Body, Images, Uploads, etc. Each tab provides access to unique functions of the editor.


Create a Custom Tab

๐Ÿ“˜

Premium Feature

This feature is only available in Growth and above plans. You must pass the projectId to enable this feature.

Register your Tab

The first step is to register your custom tab using the registerTab method.

๐Ÿšง

Custom JavaScript

The following JavaScript has to be passed in the customJS parameter when initializing Unlayer. registerTab, and createPanel methods are only available there.

Learn More

unlayer.registerTab({
  name: 'my_tab',
  label: 'My Tab',
  icon: 'fa-smile',
  supportedDisplayModes: ['web', 'email'],
  renderer: {
    Panel: unlayer.createPanel({
      render() {
        return "<div>I am a custom tab.</div>"
      }
    }),
  }
});

It needs some configuration options which are explained below:

Option

Description

name

Unique name for your tab

label

Label that users see in the side panel

icon

Icon that users see in the side panel. The value can be class name of any fontawesome icon, or a URL for your icon's image

supportedDisplayModes

Which display modes will this tab work in. Default value is ['email', 'web']


Example using React

Here's an example that uses a React component.

const MyPanel = () => (
  <div>I am a custom tab.</div>
);

unlayer.registerTab({
  name: 'my_tab',
  label: 'My Tab',
  icon: 'fa-smile',
  supportedDisplayModes: ['web', 'email'],
  renderer: {
    Panel: MyPanel
  }
});

Did this page help you?