Pile horizontale Composant Conteneur script

Une pile horizontale Conteneur est un parent Conteneur qui organise les composants enfants horizontalement. Pour organiser les composants verticalement, utilisez une pile verticale Conteneur.

  1. Cliquez sur l'icône Conteneur horizontal dans la barre d’outils du composant.

    La figure montre l’indicateur directionnel qui apparaît lorsqu’une pile horizontale Conteneur est active.Lorsqu’une pile horizontale Conteneur est sélectionnée, un indicateur de direction horizontale est affiché. Les flèches indiquent que les nouveaux composants ajoutés au contrôle seront placés les uns à côté des autres.

    Dans une pile horizontale, les nouveaux composants sont positionnés à droite de la dernière sélection.

  2. Lorsque vous ajoutez des composants à partir de la barre d’outils, Conteneur les empile côte à côte. Par exemple, si vous ajoutez deux boutons, le deuxième bouton est placé à droite du premier :

    La figure montre 2 composants positionnés horizontalement.

  3. Vous pouvez éventuellement définir les propriétés de ce composant.

    Éléments communs

    Configure la largeur sur une taille fixe, afin de l’agrandir si nécessaire pour afficher le contenu, ou de consommer le plus d’espace possible par rapport aux autres composants, en utilisant pondération pour influencer les ajustements de taille.

    Configurer Description
    Dimensionnement automatique de la mise en page du script Le dimensionnement automatique configure le composant pour qu’il se contracte ou se développe conformément à son contenu. Par exemple, la largeur d’une étiquette peut augmenter en fonction de la quantité de texte qu’elle contient.
    paramètres-dimensionnement-stretch

    Stretch permet à un composant de consommer le plus d’espace possible par rapport aux autres composants, en utilisant pondération pour influencer les ajustements de taille.

    Si deux composants sont réglés pour s’étirer, ils sont tous par défaut deux alloués 50 % de l’espace restant par. Cela proportion peut être ajusté en modifiant la valeur de poids.

    Par exemple, si vous placez un composant à un poids de 200, et l’autre à un poids de 100, alors le premier composant occupe les deux tiers de l’espace restant, tandis que l’autre ne prend qu’un tiers. Le premier composant apparaît deux fois plus gros que l’autre, son poids étant égal à deux fois le poids du deuxième composant.

    Pixels de mise en page du script Définit une taille fixe en pixels. Vous pouvez taper une valeur entière dans la zone ou utiliser les flèches haut ou bas pour augmenter ou diminuer la taille. Ces flèches sont visibles lorsque le composant a le focus.

    Configure la hauteur à une taille fixe, afin de l’agrandir si nécessaire pour afficher le contenu, ou de consommer le plus d’espace possible par rapport aux autres composants, en utilisant pondération pour influencer les ajustements de taille.

    Configurer Description
    Script Layout Auto Sizing height Le dimensionnement automatique configure le composant pour qu’il se contracte ou se développe conformément à son contenu.
    Script Layout Pixels height Définit une taille fixe en pixels. Vous pouvez taper une valeur entière dans la zone ou utiliser les flèches haut ou bas pour augmenter ou diminuer la taille. Ces flèches sont visibles lorsque le composant a le focus.
    paramètres-dimensionnement-stretch

    Stretch permet à un composant de consommer le plus d’espace possible par rapport aux autres composants, en utilisant pondération pour influencer les ajustements de taille.

    Si deux composants sont réglés pour s’étirer, ils sont tous par défaut deux alloués 50 % de l’espace restant par. Cela proportion peut être ajusté en modifiant la valeur de poids.

    Par exemple, si vous placez un composant à un poids de 200, et l’autre à un poids de 100, alors le premier composant occupe les deux tiers de l’espace restant, tandis que l’autre ne prend qu’un tiers. Le premier composant apparaît deux fois plus gros que l’autre, son poids étant égal à deux fois le poids du deuxième composant.

    Le rembourrage définit l’espace entre le bord intérieur et le contenu. Une marge définit l’espacement à l’extérieur d’une bordure, tandis que le remplissage ajoute de l’espace à l’intérieur d’une bordure.

    padding_vs_margin

    1. Pour mettre à jour en option toutes les valeurs de rembourrage à la fois, appuyez sur Définir tous les bouton pour rembourrage dans le panneau des propriétés.

      image du bouton set all

    2. Cliquez sur le champ de valeur pour un élément de bordure. Un contrôle de rotation apparaît dans ce champ.

    3. Utilisez le contrôle de rotation pour augmenter ou réduire la largeur de la bordure. Si Définir tout a été sélectionné, la modification est appliquée à toutes les valeurs.

      L’image montre comment changer la valeur d’un paramètre de bordure

      Le composant est immédiatement repositionné à l’aide de son nouveau réglage de rembourrage.

    Définit la couleur d’arrière-plan sur l’une des options suivantes :

    paramètres-BG-Color-popup2
    • manquer à ses engagements—Assigne par défaut la couleur.

    • Couleur— vous permet de choisir parmi une palette de couleurs communes, ou de choisir la vôtre en entrant des valeurs RGB ou en déplaçant le cueilleur de couleurs vers une nouvelle position de spectre. La définition de la couleur du texte et de l'arrière-plan est une propriété du panneau Appearance. Ce panneau de propriétés n'est disponible que pour les composants dotés de la fonctionnalité de couleur.
      Cliquez sur choisir d’attribuer la sélection actuelle.

      paramètres-texte-couleur-Popup-Colors

    • variable: attribue une couleur stockée dans une variable de type chaîne. Par exemple, pour assigner le bleu foncé :

      1. Cliquez sur le Variables onglet.

      2. Cliquez sur + pour ajouter une variable.

        Figure montre le bouton qui ajoute une nouvelle variable.

      3. sélectionner ficelle comme le type de valeur que la nouvelle variable stocke.

      4. Tapez un nom descriptif dans la boîte Nom.

      5. mettre Valu par défautE à 0000FF ou #0000FF, qui est le code hexadécimal pour le bleu foncé.

        Select-couleur-dans-variable

      6. Cliquez sur Appliquer.
      7. Affectez la variable à cette propriété de couleur.

        myColor-variable

    Pour changer la couleur script de fond d’une page

    Pour définir la couleur de fond d’une page entière, conteneur assignez une couleur de fond à sa racine verticale.

    1. Dans plan du site la barre, conteneur cliquez sur l’icône racine.

      select-root-conteneur

    2. Sous terrain d’entente ou apparence, attribuez une couleur d’arrière-plan différente.

      Vous pouvez créer des effets intéressants en attribuant différentes couleurs de fond à d’autres conteneurs.

      conteneurs de couleur supplémentaire

    La bordure définit l’espace entre le remplissage et la marge. Une marge définit l’espacement à l’extérieur d’une bordure, tandis que le remplissage ajoute de l’espace entre la bordure et le composant.

    L’image montre la relation entre les paramètres de marge, de bordure et de rembourrage.

    1. Pour mettre à jour toutes les valeurs de la frontière en même temps, appuyez sur le bouton Set All pour Border dans le panneau propriétés.

      image du bouton set all

    2. Cliquez sur le champ de valeur pour un élément de bordure. Un contrôle de rotation apparaît dans ce champ.

    3. Utilisez le contrôle de rotation pour augmenter ou réduire la largeur de la bordure. Si Définir tout a été sélectionné, la modification est appliquée à toutes les valeurs de remplissage.

      L’image montre comment changer la valeur d’un paramètre de bordure

      Le composant est immédiatement repositionné à l’aide de son nouveau réglage de frontière.

    Disposition

    Configure la largeur sur une taille fixe, afin de l’agrandir si nécessaire pour afficher le contenu, ou de consommer le plus d’espace possible par rapport aux autres composants, en utilisant pondération pour influencer les ajustements de taille.

    Configurer Description
    Dimensionnement automatique de la mise en page du script Le dimensionnement automatique configure le composant pour qu’il se contracte ou se développe conformément à son contenu. Par exemple, la largeur d’une étiquette peut augmenter en fonction de la quantité de texte qu’elle contient.
    paramètres-dimensionnement-stretch

    Stretch permet à un composant de consommer le plus d’espace possible par rapport aux autres composants, en utilisant pondération pour influencer les ajustements de taille.

    Si deux composants sont réglés pour s’étirer, ils sont tous par défaut deux alloués 50 % de l’espace restant par. Cela proportion peut être ajusté en modifiant la valeur de poids.

    Par exemple, si vous placez un composant à un poids de 200, et l’autre à un poids de 100, alors le premier composant occupe les deux tiers de l’espace restant, tandis que l’autre ne prend qu’un tiers. Le premier composant apparaît deux fois plus gros que l’autre, son poids étant égal à deux fois le poids du deuxième composant.

    Pixels de mise en page du script Définit une taille fixe en pixels. Vous pouvez taper une valeur entière dans la zone ou utiliser les flèches haut ou bas pour augmenter ou diminuer la taille. Ces flèches sont visibles lorsque le composant a le focus.

    Configure la hauteur à une taille fixe, afin de l’agrandir si nécessaire pour afficher le contenu, ou de consommer le plus d’espace possible par rapport aux autres composants, en utilisant pondération pour influencer les ajustements de taille.

    Configurer Description
    Script Layout Auto Sizing height Le dimensionnement automatique configure le composant pour qu’il se contracte ou se développe conformément à son contenu.
    Script Layout Pixels height Définit une taille fixe en pixels. Vous pouvez taper une valeur entière dans la zone ou utiliser les flèches haut ou bas pour augmenter ou diminuer la taille. Ces flèches sont visibles lorsque le composant a le focus.
    paramètres-dimensionnement-stretch

    Stretch permet à un composant de consommer le plus d’espace possible par rapport aux autres composants, en utilisant pondération pour influencer les ajustements de taille.

    Si deux composants sont réglés pour s’étirer, ils sont tous par défaut deux alloués 50 % de l’espace restant par. Cela proportion peut être ajusté en modifiant la valeur de poids.

    Par exemple, si vous placez un composant à un poids de 200, et l’autre à un poids de 100, alors le premier composant occupe les deux tiers de l’espace restant, tandis que l’autre ne prend qu’un tiers. Le premier composant apparaît deux fois plus gros que l’autre, son poids étant égal à deux fois le poids du deuxième composant.

    Aligne un composant vers la gauche, la droite conteneur ou le centre, par rapport à son parent.

    Astuce :   conseil : Un composant ne peut pas être aligné verticalement au conteneur centre si le réglage de hauteur de son parent est Dimensionnement automatique. Pour corriger cela, définir conteneur la hauteur du parent sur étirer ou à une hauteur fixe en Pixels.
    Configurer Exemple
    align-left2 align-left-example2
    align-center2 align-center-example2
    align-right2 align-right-example2
    aligner-commencer align-start-example
    aligner-vertical-center align-vertical-center-example
    align-vertical-end align-vertical-end-example

    L’arrangement d’enfant détermine conteneur comment le conteneur contenu d’un sont arrangés si l’espace a supplémentaire.

    Ce paramètre est désactivé si conteneur la largeur et la hauteur d’un est auto-dimensionnement. L’auto-dimensionnement indique l’élargissement conteneur à la taille des éléments qu’il contient. Étant donné que cela ne permet pas d’espace supplémentaire, les propriétés d’arrangement pour enfants n’ont aucun sens, et sont désactivées. Pour permettre l’arrangement conteneur de l’enfant, définir la largeur en pixels, ou pour étirer.

    Lorsqu’un conteneur a un espace supplémentaire, vous pouvez sélectionner l’un des éléments suivants pour influencer la façon dont l’espace est distribué :

    • commencer—Les contenus sont distribués au début de la conteneur.

      child_arrangement_start

    • centre—Les contenus sont distribués au centre de la conteneur.

      child_arrangement_center

    • fin—Les contenus sont distribués à la fin de la conteneur.

      child_arrangement_end

    Les marges définissent les espacements gauche, droit, supérieur et inférieur autour d’une bordure.

    L’image montre la relation entre les paramètres de marge, de bordure et de rembourrage.

    1. Pour mettre à jour en option toutes les valeurs de marge en même temps, appuyez sur Définir tous les bouton pour marge dans le panneau de propriétés.

      image du bouton set all

    2. Cliquez sur le champ de valeur pour une marge. Un contrôle de rotation apparaît dans ce champ.

    3. Utilisez le contrôle de rotation pour augmenter ou réduire la marge. Si Mettre tous a été sélectionné, le changement est appliqué à toutes les marges.

      paramètres-marge-spinner

      Le composant est immédiatement repositionné à l’aide de son nouveau paramètre de marge.

    Définit la visibilité d’un composant en fonction de la valeur d’une variable booléenne (True ou False).

    1. Cliquez sur le agencement groupe immobilier. Sous Visible, cliquez sur Sélectionnez une variable.
    2. Sélectionnez une variable, ou créez une nouvelle variable Oui/Non, puis attribuez cette nouvelle variable à la visible propriété.
    3. Chez ex terminer, le composant est visible lorsque la valeur de la variable est True. Inversement, il est masqué lorsque la valeur de la variable est Faux.

    Le rembourrage définit l’espace entre le bord intérieur et le contenu. Une marge définit l’espacement à l’extérieur d’une bordure, tandis que le remplissage ajoute de l’espace à l’intérieur d’une bordure.

    padding_vs_margin

    1. Pour mettre à jour en option toutes les valeurs de rembourrage à la fois, appuyez sur Définir tous les bouton pour rembourrage dans le panneau des propriétés.

      image du bouton set all

    2. Cliquez sur le champ de valeur pour un élément de bordure. Un contrôle de rotation apparaît dans ce champ.

    3. Utilisez le contrôle de rotation pour augmenter ou réduire la largeur de la bordure. Si Définir tout a été sélectionné, la modification est appliquée à toutes les valeurs.

      L’image montre comment changer la valeur d’un paramètre de bordure

      Le composant est immédiatement repositionné à l’aide de son nouveau réglage de rembourrage.

    Apparence

    Définit la couleur d’arrière-plan sur l’une des options suivantes :

    paramètres-BG-Color-popup2
    • manquer à ses engagements—Assigne par défaut la couleur.

    • Couleur— vous permet de choisir parmi une palette de couleurs communes, ou de choisir la vôtre en entrant des valeurs RGB ou en déplaçant le cueilleur de couleurs vers une nouvelle position de spectre. La définition de la couleur du texte et de l'arrière-plan est une propriété du panneau Appearance. Ce panneau de propriétés n'est disponible que pour les composants dotés de la fonctionnalité de couleur.
      Cliquez sur choisir d’attribuer la sélection actuelle.

      paramètres-texte-couleur-Popup-Colors

    • variable: attribue une couleur stockée dans une variable de type chaîne. Par exemple, pour assigner le bleu foncé :

      1. Cliquez sur le Variables onglet.

      2. Cliquez sur + pour ajouter une variable.

        Figure montre le bouton qui ajoute une nouvelle variable.

      3. sélectionner ficelle comme le type de valeur que la nouvelle variable stocke.

      4. Tapez un nom descriptif dans la boîte Nom.

      5. mettre Valu par défautE à 0000FF ou #0000FF, qui est le code hexadécimal pour le bleu foncé.

        Select-couleur-dans-variable

      6. Cliquez sur Appliquer.
      7. Affectez la variable à cette propriété de couleur.

        myColor-variable

    Pour changer la couleur script de fond d’une page

    Pour définir la couleur de fond d’une page entière, conteneur assignez une couleur de fond à sa racine verticale.

    1. Dans plan du site la barre, conteneur cliquez sur l’icône racine.

      select-root-conteneur

    2. Sous terrain d’entente ou apparence, attribuez une couleur d’arrière-plan différente.

      Vous pouvez créer des effets intéressants en attribuant différentes couleurs de fond à d’autres conteneurs.

      conteneurs de couleur supplémentaire

    La bordure définit l’espace entre le remplissage et la marge. Une marge définit l’espacement à l’extérieur d’une bordure, tandis que le remplissage ajoute de l’espace entre la bordure et le composant.

    L’image montre la relation entre les paramètres de marge, de bordure et de rembourrage.

    1. Pour mettre à jour toutes les valeurs de la frontière en même temps, appuyez sur le bouton Set All pour Border dans le panneau propriétés.

      image du bouton set all

    2. Cliquez sur le champ de valeur pour un élément de bordure. Un contrôle de rotation apparaît dans ce champ.

    3. Utilisez le contrôle de rotation pour augmenter ou réduire la largeur de la bordure. Si Définir tout a été sélectionné, la modification est appliquée à toutes les valeurs de remplissage.

      L’image montre comment changer la valeur d’un paramètre de bordure

      Le composant est immédiatement repositionné à l’aide de son nouveau réglage de frontière.