Components panel

The components panel allows to create components, edit a components hierarchy, create properties and variants, and some other actions.

At the top left of the panel appears the root component being edited. In the example above it is the component named Text slide of type QuestionSlide. By default, the type of the component is displayed unless a name is provided in which case the name is displayed and the type is added between squared brackets.

At the top right, the actions menu is displayed with functions like creating new components or duplicating them:

Bellow the top menu the component hierarchy is displayed:

It shows the components which form the selected components. In this example, the Text slide component is composed of an Image component, some Containers, and other components.

The order of the components can be altered by dragging and dropping them. Also by dragging and dropping components can be nested creating sub-hierarchies.

When a component is selected, it will be highlighted on the preview panel:

A component can be deleted by selecting it and clicking on the trash icon on the bottom right.

In order to add a new component to the hierarchy, simply select the parent component under which you want to add the component, select the component to add, and click on the Add button:

Once done, the new component will appear on the preview panel:

If you need to hide a component or make it visible regardless of its visibility state, you can click on the eye icon of the component:

In this case, if we need to hide the Header component, click on the eye icon and the component will disappear from the preview:

Each root component will be rendered using a sample set of data from actual slides of the pickzen being edited. The slide that is being used will be selected at the bottom of the components panel:

If you select a different slide, the preview will change:

When the root component is selected at the bottom of the panel some options to configure the component properties and variants will show up:

Properties are used to create an interface to the exterior so the root component can be added to another component hierarchy. Variants are used to create states of the component, for example, a state when it is hovered, or another state when it is selected.