Как сделать элемент Label встроенным в nativescript?
У меня есть 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>
Ниже макет, который я получаю сейчас. Но я не хочу, чтобы эта оранжевая линия была от начала до конца. Вместо этого его ширина всегда должна быть равна тексту внутри этой метки.
Ответы 3
Попробуйте установить horizontalAlignment на ярлыке на center
<Label horizontalAlignment = "center" ...
Добавьте horizontalAlignment = "center" к этикетке. Это отцентрирует компонент, сделав его только того размера, который ему нужен.
Пример игровой площадки: https://play.nativescript.org/?template=play-vue&id=8kZUFY
Вместо 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>