Component Styling Guide
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.
Component Category
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.
Background Color
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:
If you make a category that doesn`t refer to any of these core categories, please use non-confusing colors for components.
Font Awesome Icons
An icon on the component reflects its functionality.
You can use Font Awesome icons in the form font-awesome/fa-address-card, where address-card is the icon name.
Font Awesome icons look this way:
Custom Icon
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.
Component Label
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.
Palette Label
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.
Label style
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.
Alignment
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:
Port labels
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:
Widget styling
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.
Last updated
