Reactium
  • Quick Start
  • Discuss
  • Approach
    • Architecture
    • DDD Introduction
    • Domain Model
  • Reactium App Foundation
    • Reactium Guides
      • Creating a Simple Single Page Web App (SPA)
      • Creating a Sassy Style Sheet
      • Reactium Core
      • Reactium + Actinium (APIs)
      • Reactium + REST
      • Plugin Module Guide
      • Animating React Routes
      • Reactium in Production
    • Reactium Domain Model
      • Basic Domain Model
      • Runtime Domain Model
      • Buildtime Domain Model
    • Reactium SDK
      • Reactium SDK Reference
    • Updating Reactium
  • Installing Foundations
    • Before You Install
    • Install Reactium
    • Install Actinium
  • Reactium API Foundation (Actinium)
    • Actinium Core
    • Setting up your User
    • Actinium SDK
      • Actinium SDK Reference
    • Actinium Domain Model
    • Extending
    • Updating
    • Live Query
  • Reactium Toolkit
    • Overview
    • Installation
    • Configuration
    • Customization
    • Creating Elements
      • Sidebar Elements
      • Toolbar Elements
      • Documentation Elements
    • Components
      • Sidebar
      • MenuLink
      • Element
      • Code
      • Markdown
      • Icon
    • Toolkit SDK
Powered by GitBook
On this page
  1. Reactium Toolkit

Creating Elements

PreviousCustomizationNextSidebar Elements

Last updated 4 years ago

Elements are components added to specific zones in the Toolkit Plugin. You can create new elements by registering components with the .

There's a lot to know about creating elements. Let the ARCLI do it for you:

$ arcli toolkit element
[ARCLI] > Type: Top-Level
[ARCLI] > ID: test
[ARCLI] > Label: Test
[ARCLI] > URL?: Yes
[ARCLI] > Order: 100
[ARCLI] > Directory: /My Reactium Project/src/app/components/Toolkit/Sidebar

[ARCLI] > A new toolkit sidebar item will be created using the following configuration:

{
  "type": "group",
  "id": "test",
  "label": "Test",
  "url": "/toolkit",
  "order": 100,
  "directory": "/My Reactium Project/src/app/components/Toolkit/Sidebar/Test"
}

[ARCLI] > Proceed?: (y/N)
/ButtonColors/reactium-hooks.js
import ButtonColors from '.';
import Reactium from 'reactium-core/sdk';


// Register a new Reactium Plugin
Reactium.Plugin.register('ToolkitButtonColors').then(() => {

    // Ensure the toolkit plugin is available
    if (!Reactium.Toolkit) return;

    // Wait for plugins to be initialized
    Reactium.Hook.register('plugin-ready', () => {
    
        // Get the MenuLink component
        const MenuLink = Reactium.Component.get('RTKMENULINK');

        // Register the Sideber link
        Reactium.Toolkit.Sidebar.register('button-colors', {
            order: 10,
            component: MenuLink,
            children: 'Button Colors',
            url: '/toolkit/button/colors',
        });

        // Register the Element
        Reactium.Toolkit.Elements.register('button-colors', {
            order: 0,
            zone: 'button-colors',
            component: ButtonColors,
        });
    });
});

The Element zone value is derived from the Sidebar url value. Given the url: /toolkit/button/colors The corresponding zone would be: button-colors

The above registration creates the following view in the Toolkit:

Toolkit SDK
/toolkit/button/colors