Composants

Les composants sont la pierre angulaire de la création dans PandaSuite Studio, c'est ce qui vous offre la plus grande liberté de création. Ils sont flexibles, puissants et synchronisables les uns avec les autres. Découvrez la liste des composants, leur rôle et comment les éditer.

Qu'est-ce qu'un composant ?

Un composant est un module préfigué qui vous permet de créer des effets interactifs à partir de votre contenu (défilement, pop-up,..) et de faire appel à des fonctionnalités spécifiques (achat intégré...). Les composants sont personnalisables, imbriquables les uns dans les autres et vous pouvez les faire interagir entre eux.

Voici les caractéristiques d'un composant : 

Régulièrement nous ajoutons de nouveaux composants, il vous également possible de créer un composant personnalisé grâce à la libraire PandaBridge. 

 

Liste des composants

Il existe des composants graphiques et des composants système : les composants graphiques ont une apparence visuelle dans votre espace de travail, alors que les composants systèmes n'apparaissent que dans la liste des Objets

Les composants graphiques

Le composant graphique (sauf la zone interactive) s'appuie sur une notion de profondeur : il faut rentrer à l'intérieur du composant pour éditer son contenu. Ses propriétés s'appliquent alors à tout le contenu qui se trouve à l'intérieur. 

Les composants système

 Astuce : prenez le temps de découvrir chaque composant et de comprendre comment les détourner pour votre propre usage. Faites-vous aider de chaque article correspondant.

 

Ajouter un composant

Pour ajouter un composant, cliquez sur l'icône Composants depuis le menu du haut.

Si c'est un composant visuel (zone de défilement, pop-up...) :

  • Placez le composant là où vous voulez
  • Double-cliquez sur la zone ou cliquez sur le bouton ÉDITER de la fenêtre Propriétés pour éditer le contenu du composant. 

Sinon sélectionnez le depuis la fenêtre des Objets

 Astuce : utilisez le fil d'Ariane pour bien vous repérer au sein de votre projet.

fil_d_ariane_composant.png

L'utilisateur se trouve dans le composant zone de défilement au sein de l'écran List menu.

 

Propriétés d'un composant

Chaque composant a des propriétés spécifiques à retrouver dans la fenêtre Propriétés.

 

proprie_te_s_zone_de_de_filement.png

Exemple de propriétés du composant zone de défilement

 

Marqueurs d'un composant 

Le marqueur permet d'identifier une position spécifique sur votre composant (le temps d'une vidéo, la position d'un défilement, un degré d'inclinaison de l'appareil...) pour lui attribuer une action.

 

marqueur_zone_de_de_filement.png

Création de 2 marqueurs sur une zone de défilement

 

Déclencher une action 

Sélectionnez le composant et cliquez sur Interactivités. Cliquez sur le bouton + Ajouter et choisissez le déclencheur de votre choix. Chaque composant a sa propre liste de déclencheurs. 

Si vous avez créé un marqueur, celui-ci apparaîtra dans la liste des déclencheurs. 

de_clencheurs_zone_de_de_filement.png

Déclencheurs de la zone de défilement (on retrouve les 2 marqueurs)

Agir sur un composant

Sélectionnez un déclencheur (par exemple Simple tap sur un bouton) et sélectionnez l'action Agir sur un composant. Dans le menu orange, sélectionnez le composant. Vous pouvez sélectionner n'importe quel composant de votre projet. 

 

agir_sur_un_composant.png

Agir sur un composant zone de défilement

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous