如何在nativescript中使Label元素内联？

Posted 2021-04-09

我有html我想把border-bottom属性给<Label>元素，这是<StackLayout>的孩子。

我的问题是border-bottom在网络上像div一样全宽。我希望这个Label元素像span一样内联，这样它的宽度不应该超过它的内容宽度。

    <StackLayout *ngIf="!places.length">
       <Label (tap)="onSearch()" class="fo-20 m-t-20 opensans-bold text-center p-b-5"
         borderBottomColor="#F16051" borderBottomWidth="2" text="View All Activities"></Label>
    </StackLayout>

下面是我现在的布局。但我不希望那条橙色线端到端。相反，它的宽度应始终等于Label内部的文本。

答案

尝试将标签上的horizontalAlignment设置为center

<Label horizontalAlignment="center" ... 

另一答案

您可以使用justifyContent="center"使用FlexboxLayout而不是StackLayout。

<FlexboxLayout justifyContent="center" *ngIf="!places.length">
  <Label (tap)="onSearch()" class="fo-20 m-t-20 opensans-bold text-center p-b- 
   5" borderBottomColor="#F16051" borderBottomWidth="2" text="View All 
   Activities"> . 
  </Label>
</FlexboxLayout>

另一答案

将horizontalAlignment="center"添加到标签中。这将使组件居中，使其仅具有所需的尺寸。

示例游乐场：https://play.nativescript.org/?template=play-vue&id=8kZUFY