Как добавить новую строку в кнопку из XML

Question

В моем проекте NativeScript я пытаюсь создать нижнюю панель со значком, а затем под ним слово, похожее на него. Как это

Вот HTML-код того, что я пытался сделать:

<GridLayout rows="*,60">
    <ScrollView row="0">
        <WrapLayout orientation="horizontal">
            <Label text="There are no leagues currently." style="color: black; text-align: center; font-weight: bold"></Label>
            <Label text="Contact your commissioner" style="color: black; text-align: center; font-weight: bold"></Label>
            <Label text="to create one." style="color: black; text-align: center; font-weight: bold"></Label>
        </WrapLayout>
    </ScrollView>
    <StackLayout row="1" orientation="horizontal">
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf015;\n" class="fa"></Span>
                <Span text="Home"></Span>
            </FormattedString>
        </Button>
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf000;\n" class="fa"></Span>
                <Span text="All Cocktails"></Span>
            </FormattedString>
        </Button>
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf005;\n" class="fa"></Span>
                <Span text="Favorite"></Span>
            </FormattedString>
        </Button>
        <Button textWrap="true" width="25%">
            <FormattedString>
                <Span text="&#xf007;\n" class="fa"></Span>
                <Span text="Profile"></Span>
            </FormattedString>
        </Button>
    </StackLayout>
</GridLayout>

и вот мой css:

.fa {
    font-family: 'Font Awesome 5 Free';
}

Тем не менее, всякий раз, когда я пытаюсь это сделать, это выглядит так

Я не совсем уверен, куда идти, поэтому любая помощь будет отличной. Спасибо!

Вот рабочий пример моего кода: https://play.nativescript.org/?template=play-ng&id=r8Jodt&v=19

Answer 1

Фактическая проблема здесь в том, что \n работает только с JavaScript, при использовании его в файле HTML (XML) вы должны использовать кодированную версию символа 
, которая должна дать вам новую строку.

Вы пытаетесь создать настраиваемую панель TabBar для своего TabView? Если да, вы можете попробовать nativescript-vector-icons , который позволяет использовать значки шрифтов на TabBar.

Answer 2

Я бы содержал все кнопки в div, а затем каждую кнопку и группу меток в своем собственном div.

<div id='button-row'>
  <div class='bottom-button>
     <button></button>
     <p class='label>Label</p>
  </div>
   <div class='bottom-button>
     <button></button>
     <p class='label>Label</p>
  </div>
  // repeat for your buttons
</div>

Ваш css:

.button-row {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}
.bottom-button {
   display: flex;
   flex-direction: column;
   justify-content: center;
   // the font awesome icons are considered text I believe, so 
   text-align: center;
   // would also work
}

Это сделает все ваши кнопки в ряду равномерно расположенными, и разместит вашу кнопку сверху надписи. Мне нравится использовать flexbox, потому что он быстрый и простой и мобильный, отзывчивый. Я ни в коем случае не профессионал CSS, но у меня это работает.

Редактировать: только что увидел вашу разметку. Попробуйте дать отформатированной строке css of .bottom-button и посмотрите, сработает ли это.

Answer 3

Используйте GridLayout для BottomBar, вы можете найти образец игровой площадки здесь

<GridLayout columns="*,*,*,*" rows="*,*" width="100%" row="1" backgroundColor="lightgray">
  <Label text="&#xf015;" row="0" col="0" class="fa" width="100%" textAlignment="center"></Label>
  <Label text="Home" row="1" col="0" width="100%" textAlignment="center"></Label>
  <Label text="&#xf000;" row="0" col="1" class="fa" width="100%" textAlignment="center"></Label>
  <Label text="All Cocktails" row="1" col="1" width="100%" textAlignment="center"></Label>
  <Label text="&#xf005;" row="0" col="2" class="fa" width="100%" textAlignment="center"></Label>
  <Label text="Favorite" row="1" col="2" width="100%" textAlignment="center"></Label>
  <Label text="&#xf007;" row="0" col="3" class="fa" width="100%" textAlignment="center"></Label>
  <Label text="Profile" row="1" col="3" width="100%" textAlignment="center"></Label>

</GridLayout>

Answer 4

Сделать их положение как отображение: абсолютным и внутри класса должно быть inline-block. С некоторыми полями должно быть легко настроить