@dash4/plugin-actions

Dash4 Plugin Actions

Create actions as teaser or simple links

Table of Contents

• Installation
• Usage
• License

Installation

npm i -D @dash4/plugin-actions

Usage

dash4.config.js

const { PluginActions } = require('@dash4/plugin-actions');

async function getConfig() {
  return {
    tabs: [
      {
        title: 'Root',
        rows: [
          [
            new PluginActions({
              title: 'Links',
              actions: [
                {
                  type: 'link',
                  href: 'http://localhost:6006',
                  title: 'Ui',
                  image: 'http://localhost:6006/assets/logo.png',
                },
              ],
            }),
            new PluginActions({
              actions: [
                {
                  type: 'teaser',
                  title: 'Ui',
                  subtitle: 'React ui kit using storybook',
                  image: 'http://localhost:6006/assets/logo.png',
                  links: [
                    {
                      type: 'link',
                      href: 'http://localhost:6006',
                      title: 'Ui',
                    },
                  ],
                },
              ],
            }),
          ],
        ],
      },
    ],
  };
}

module.exports = getConfig;

options:

interface IActionLink {
	type: 'link';
	title: string;
	href: string;
	image?: string;
	icon?: string;
}

interface IActionTeaser {
	type: 'teaser';
	title: string;
	subtitle?: string;
	link?: IActionLink | IActionLink[];
	image?: string;
	icon?: string;
}

// custom title (default=Code coverage)
title?: string;
// grid with per breakpoint
// [12,6,3] means 100% width on small viewports, 50% on medium viewports and 33.3% on largeviewports
width?: number[];
// enable / disable dark mode
dark?: boolean;
// Array of actions (displayed as list)
// an action could be a link or a teaser
actions?: IActionLink[] | IActionTeaser[];

License

The @dash4/plugin-actions is MIT licensed