web-dev-qa-db-fra.com

Centrer et aligner à droite / à gauche les éléments dans une présentation NativeScript

Dans le contexte d'une application NativeScript, j'ai eu du mal à trouver un moyen efficace et non hacky de faire ce qui semble assez simple: avoir un élément au centre d'une mise en page et un autre élément tout à droite ou à gauche de la mise en page - quelque chose comme les images de cette question: Centrer et aligner à droite flexbox . Les éléments doivent tous être sur une seule ligne car ils sont là. (J'ai examiné ces solutions, mais je ne veux pas ajouter de pseudo-élément, et beaucoup de CSS ne fonctionnent tout simplement pas avec NativeScript.) Existe-t-il une sorte de méthode canonique propre pour le faire avec le Dans le cas où ce n'est pas suffisamment "spécifique", disons que j'ai un scénario comme celui-ci:

<SomeLayout>
  <Label text="Center me"></Label>
  <Label text="Pull me to the right"></Label>
</SomeLayout>

Les propriétés de texte des étiquettes décrivent ce que je recherche. Veuillez tester toutes les suggestions ou assurez-vous qu'elles fonctionnent.

nativescript
7
Andrew Puglionesi

vous pouvez utiliser horizontalAlignment avec GridLayout en appliquant le même numéro de ligne aux deux étiquettes.

<GridLayout rows="auto" columns="*">
  <Label row="0" horizontalAlignment="center" text="Center me" class="center"></Label>
  <Label row="0" horizontalAlignment="right" text="Pull me to the right" class="right"></Label>
</GridLayout>

vous pouvez également définir la propriété horizontalAlignment à partir de CSS en utilisant horizontal-align attribut.

.center{
    horizontal-align:center;
}
.right{
    horizontal-align:right;
}

l'astuce principale est que vous devez donner le même numéro de ligne aux étiquettes afin qu'elles se chevauchent.

12
bhavin jalodara