В Nativescript, как я могу получить вертикально выровненный текст метки, используя StackLayout

Мне нужно что-то вроде этого:

идеальный результат

Но вот что у меня есть на данный момент:

текущий выход

.rotate {
transform: rotate(-90deg);
font-size: 16px;
color: #FFFFFF; 
}

Это мой код:

<StackLayout backgroundColor="#3C414B" width="12%" height="100%" horizontalAlignment="center" verticalAlignment="center" (tap)="openDrawer('Right')">
   <StackLayout class="rotate" orientation="horizontal">
      <Label class="fa" style="margin-right: 10px" text="&#xf067;"></Label>
      <Label width="100%" class="" text="New Category" textwrap="false"></Label>
   </StackLayout>
</StackLayout>

nativescript nativescript-telerik-ui
person Sayem    schedule 12.11.2018    source источник
comment
Имейте в виду, что повороты применяются после изменения размера. Ваш width теперь вертикальный, а ваш height горизонтальный. Если вы измените цвет фона этикетки, это станет более заметным.   -  person Ian MacDonald    schedule 12.11.2018

Ответы (2)


arrow_upward
0
arrow_downward

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

Или вы можете даже рассмотреть возможность использования изображения, здесь — связанная тема с форумов.

person Manoj    schedule 12.11.2018
comment
Но я не могу указать явную высоту или ширину, потому что я хочу показать, что метка составляет 12% ширины моего экрана и 100% высоты, поскольку она остается в центре вертикального экрана. - person Sayem; 13.11.2018

arrow_upward
0
arrow_downward

Похоже, вы вращаете внутренний <StackLayout class="rotate" ...>, но он по-прежнему получает ограничение по ширине внешнего <StackLayout width="12%" ...> Попробуйте так:

<StackLayout class="rotate" backgroundColor="#3C414B" width="100%" height="12%" horizontalAlignment="center" verticalAlignment="center">
            <StackLayout orientation="horizontal">
                <Label class="fa" style="margin-right: 10px" text="&#xf067;"></Label>
                <Label text="New Category" textwrap="false" backgroundColor="yellow"></Label>
            </StackLayout>
        </StackLayout>

Или попробуйте найти решение с другим типом макета. Например, AbsoluteLayout

person leaf    schedule 12.11.2018
comment
вы не проверяли, что моя ширина для этой метки фиксирована 12%, то есть контейнер ‹StackLayout› имеет, я не могу дать этой метке ширину 100%, чтобы ее пытались использовать по вертикали... это не ширина 100% или высота 12% - это ширина только 12%, а высота - 100%, чтобы текст четко отображался вертикально с использованием высоты. И, кстати, ‹AbsoluteLayout› имеет ту же проблему, что не получает пространство высоты, и текст автоматически переносится, несмотря ни на что! - person Sayem; 13.11.2018