Nativescript:带图标和多行标题的按钮

时间:2017-07-14 12:05:06

标签: android ios nativescript

我想在下图中完全按下按钮:

enter image description here

以下是我使用的按钮的XML:

<Button class="footer-button" loaded="onLoad" textWrap="true">
    <FormattedString>
        <Span id="icon" class="footer-button-icon"/>
        <Span id="text" class="footer-button-text"/>
    </FormattedString>
</Button>

以下是sass样式:

.footer-button {
text-transform: uppercase;
color: #fff;
background-color: $colorAccent;
height: 40;
border-radius: 50%;
font-size: 14;
margin: 16 0;
padding: 0 10;
.footer-button-icon {
@include fontIcons;
font-size: 18;
}
.footer-button-text {
@include fontMainText;
}
}

我得到的结果:

enter image description here

我知道我可以通过制作自定义视图(对于网格布局中的前2个标签)来获得我想要的东西,但我想知道它是否可以通过按钮和格式化字符串或通过调整原生来实现ios和android按钮属性。

1 个答案:

答案 0 :(得分:0)

抱歉,这是不可能的,因为NativeScript中的按钮仅接受文本或格式化的字符串,并且您只能在颜色或字体(字体大小等)之类的文本上应用样式,而不能在文本位置,边距等上应用

对于您的解决方案,最好有一个具有按钮行为的新组件

Bootstrap在CSS类.btn上进行了此操作,例如,对于Angular,您创建了Angular组件。