Component Styling Guide
Last updated
Was this helpful?
Last updated
Was this helpful?
When publishing your new component to Marketplace, it's essential to customize the appearance properly.
If the appearance does not meet the requirements, a Marketplace moderator will not approve the publication.
You may add your new component to an existing category, but it may confuse users. So it's better to take as a rule:
to consider each new project as a new category (and label it respectively);
to put related components to one project (and category);
to create a new project (and category) for components that provide other purposes.
The component category defines its' color on the palette.
When you create a new category component you should set up its workspace color properly.
The main idea is that your component in the workspace should reflect its purpose. If the component works as a function it should have #8c58e9 hex code color.
If a component creates a dashboard widget - it must be #1ac0c9 (like dashboard category elements).
In this instance, we create a converters category for a new component (in its definitions). And this category will contain a “function-like” colored component.
Use these colors:
Component`s Category
Hex Code
common
#
dashboard
#1ac0c9
storage
#589be9
parser
#21c144
sequence
#ca58e9
network
#ed9438
function
#8c58e9
If you make a category that doesn`t refer to any of these core categories, please use non-confusing colors for components.
An icon on the component reflects its functionality.
Font Awesome icons look this way:
If you want to use a custom icon, it must be on a transparent background, with 20x30 size in .png format.
Place an icon file to a directory called icons alongside component`s .js and .html files.
These directories get added to the search path when the editor looks for a given icon filename. Because of this, the icon filename must be unique.
When specifying the component’s label (name in the workspace), consider its potential users` convenience. Let it reflect the component`s function or purpose. And keep it short.
The label value can be a string or a function.
A string value will be used as the workspace name. If the value is a function, it shows a label you put in it by default but will switch to the name a user places in the Name property.
Insufficient naming: test component, function1, dsfdsgfas, the primary process` silent observer.
Sufficient naming: uppercase, convert, duplicate, form filler.
By default, the component’s type is used as its label within the palette. To override this you can use paletteLabel property.
As with label, this property can be either a string or a function. If it is a function, it is evaluated once when the node is added to the palette.
The workspace label style can be set dynamically. Use the labelStyle property. It identifies the CSS class to apply. There are two predefined classes: node_label (default) and node_label_italic.
In this example, we apply the italic style to a component`s name if it is set.
Icons and labels are left-aligned by default. But the convention is to make them right-aligned for the end-flow components (for example, mqtt out in the network category or gauge in the dashboard one)
You can do it with the align property of a component definition.
Appearance in the workspace:
You can set labels on the component`s ports. They appear when hovering over.
A user can change the labels in the Appearance properties of the component.
Appearance in the workspace:
There are no strict rules for the UI component representation (the dashboard category).
The main idea is to make it simple and minimalistic. A user can change the appearance but pay attention to the default view.
Consider these two examples, less and more handy:
and
Don`t forget about headers, default colors, placeholders, etc. To sell your component on Marketplace, you may want to make its appearance clear and compelling.
You can use icons in the form font-awesome/fa-address-card, where address-card is the icon name.
