Mise en page et style

App Studio offre de nombreuses options de personnalisation au regard de la mise en page de l'application à l'aide de ses différentes commandes de conteneur et d'options de style pour chacune des commandes

Positionner vos commandes

Une mise en page personnalisée peut être facilement créée à l'aide de la commande Mise en page du conteneur (Container Layout).

Le positionnement de nos commandes au sein d'une page ou d'un conteneur peut être effectué à l'aide des options d'Alignement et de mise en page (Alignment & Layout).

Les commandes Page (Page) et Conteneur (Container) peuvent dicter la position des commandes qu'elles contiennent à l'aide des attributs d'orientation (vertical/horizontal) et d'alignement dans la section mise en page (Layout). Par défaut, les commandes s'ajustent sur une seule ligne. Si la propriété Autoriser l'encapsulage (Allow wrapping) est définie, les commandes s'encapsulent sur plusieurs lignes au besoin.

Lorsqu'elle est activée, la propriété Autoriser l'encapsulage (Allow wrapping) est appliquée si les commandes du conteneur ne peuvent pas tenir dans une ligne.

Les commandes des conteneurs peuvent remplacer l'alignement parent en utilisant leur propre option d'alignement. Pour utiliser par défaut l'alignement du parent, basculez les icônes d'alignement sélectionnées pour désactiver l'alignement spécifique.

Si vous souhaitez qu'un groupe de commandes ait un positionnement spécifique, placez-les dans un conteneur et configurez la disposition et l'alignement du conteneur.

Redimensionner vos commandes

Les commandes sont automatiquement dimensionnées par défaut. La fonction Auto (Auto) permet à la commande de saisir la taille du contenu qu'il contient. Par exemple, si la largeur et la hauteur d'une commande de bouton sont définies sur « Auto », la taille du bouton augmente/réduit en fonction du texte du bouton.

Une hauteur et une largeur spécifiques peuvent également être définies. La largeur/hauteur min. et la largeur/hauteur max. sont disponibles sous plus (...) dans la section des tailles.

Les unités de mesure sont %, px (pixels) et em (par rapport à la taille de police de l'élément). Par exemple, 3em signifie 3 fois la taille de la police actuelle).

Choisir les unités de mesure

Les unités de mesure peuvent être choisies soit dans la liste déroulante des unités, soit en les saisissant directement à l'aide du clavier et en appuyant sur Entrée. Par exemple, une largeur de 50 % peut être définie en tapant simplement 50 %.

Si aucune unité de mesure n'est fournie, le système utilise par défaut les pixels (px).

Personnaliser la police

Vous pouvez modifier la façon dont le texte apparaît dans votre application en ajustant les attributs Famille de police (Font Family), Taille de police (Font Size), Couleur de police (Font Color) et Style de police (gras, italique, souligné) [Font Style (Bold, Italic, Underline)].

Astuce :

Vous pouvez basculer entre les couleurs RVB, HEX et TSL en cliquant sur les flèches à côté de la valeur de couleur.

Travailler avec des bordures

La section de bordure a trois propriétés :

• Épaisseur des bordures
• Couleur de la bordure
• Rayon d'angle.

Les pixels sont l'unité de mesure de ces attributs.

Boutons circulaires utilisant le rayon du coin

Des boutons circulaires peuvent être créés en modifiant la propriété Rayon d'angle (Corner Radius).

Espacer les commandes

Les commandes et les conteneurs peuvent être espacés à l'aide des Marges et des remplissages (Margins and Paddings).

Les marges fournissent un espacement autour des commandes.

Les remplissages fournissent un espacement entre la commande et son contenu.

Les commandes des conteneurs présentent des rembourrages de marge alors que la plupart des autres commandes ne disposent que de la section Marge (Margin).

La section Marge (Margin) et Remplissage (Padding) ont la possibilité de dissocier les valeurs Haut/Bas et Gauche/Droite pour les définir indépendamment.

Changer la couleur de fond

Vous pouvez modifier la couleur de fond de vos commandes à l'aide de l'un des trois modèles de couleurs :

• RVB
• HEX

• TSL

  Pour ce faire, cliquez sur les flèches à côté des valeurs de couleur.