Comment on page
Creating Elements
Elements are components added to specific zones in the Toolkit Plugin. You can create new elements by registering components with the Toolkit SDK.
TL;DR
Prompts
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-colorsThe above registration creates the following view in the Toolkit:
/toolkit/button/colors
Last modified 2yr ago