Components

Components are the cornerstone of creation in PandaSuite Studio, it's what gives you the greatest flexibility. They are customizable, powerful and synchronizable with each other. Discover the list of components, their role and how to edit them.

What is a component?

A component is a preconfigured module that allows you to create interactive effects from your content (scrolling, pop-up,...) and to use specific functionalities (in-app purchase...). Components are customizable, nestable into each other and you can make them interact with each other.

Here are the characteristics of a component :

Regularly we add new components. It is also possible to create a custom component using the PandaBridge library.

List of components

There are graphic components and system components: graphic components have a visual appearance in your workspace, while system components only appear in the Object list.

Graphic components

The graphic component (except the interactive zone) is based on a notion of depth: you must go inside the component to edit content. Its properties then apply to all the content inside.

System components

 Tip: take the time to discover each component and its features. Get help from the tutorial.

Add a component

To add a component, click on the Components icon from the top menu.

If it is a visual component (scrolling zone, pop-up...) :

  • Place the component where you want
  • Double-click the area or click the EDIT button on the Properties window to edit the content of the component.

Otherwise select it from the Objects window.

 Tip: use the breadcrumb trail to find your way around your project.


breadcrumb_component.png

The user is in the scrolling area component within the List menu screen.

Properties of a component 

Each component has specific properties to be found in the Properties window.

Screenshot_2020-09-23_at_12.31.15.png

Example of scrolling area component properties

 

Markers of a component 

Create a marker to identify a specific position on your component (the time of a video, the position of a scroll, a degree of tilt of the device...) and assign an action to it.

 

marker_scrolling_area.png

Creation of 2 markers on a scrolling area

Trigger an action

Select the component and click on Interactivities. Click on the + Add button and choose the trigger of your choice. Each component has its own list of triggers.

If you have created a marker, it will appear in the list.

trigger_scrolling_area.png

Triggers of the scrolling zone (we find the 2 markers)

 

Interact with a component

Select a trigger (e.g. Simple tap on a button) and select the action Interact with a component. In the orange menu, select the component. You can select any component in your project.

interact_with_a_component.png

Still need help? Contact Us Contact Us