Как сделать элемент Label встроенным в nativescript? - PullRequest
Новая
       19

Как сделать элемент Label встроенным в nativescript?

2 голосов
/ 03 апреля 2019

У меня есть 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>

Ниже приведен макет, который я сейчас получаю.Но я не хочу, чтобы эта оранжевая линия была сквозной.Вместо этого его ширина всегда должна быть равна тексту, присутствующему внутри этой метки.

enter image description here

Ответы [ 3 ]

1 голос
/ 03 апреля 2019

Вместо StackLayout , вы можете иметь FlexboxLayout с justifyContent="center". 


<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>
0 голосов
/ 03 апреля 2019

Добавьте horizontalAlignment="center" к этикетке. Это отцентрирует компонент, сделав его только того размера, который ему нужен.

Пример детской площадки: https://play.nativescript.org/?template=play-vue&id=8kZUFY

0 голосов
/ 03 апреля 2019

Попробуйте установить horizontalAlignment на ярлыке на center

<Label horizontalAlignment="center" ...
...