如何在离子2元素（如按钮）中断开线

Question

我的应用程序屏幕上有几个按钮，我想使用图标，然后在其下方写下按钮的标题...

在ionic 2中，我不能为此目的使用“ <br>”或h1，h2甚至显示块。

码：

<button primary>
     <ion-icon name="calendar"></ion-icon>
     Calendar
</button>

我试过这样的：

<button primary>
     <h1>
         <ion-icon name="calendar"></ion-icon>
     </h1>
     <br />
     <h2>
         Calendar
     </h2>
</button>

谢谢

Answer 1

您别无选择，只能使用sass。 我没有回答您的问题，但是您确定要这样吗？

你可以这样吗？

<button large >
    <ion-icon name='home' class="breakme"></ion-icon>
    Home
</button> 

或者，您可以拥有带有onclicks (click)="calendar"的列表，并通过列表伪造它？

<ion-list no-lines>
    <ion-item (click)="getData()">
        <ion-icon name="leaf"></ion-icon>
        <br />
        Herbology 
    </ion-item>
    <ion-item (click)="getData()">
        <ion-icon name="add"></ion-icon>
        <br />
        Calander
    </ion-item>
</ion-list>

Answer 2

好的，我找到了解决方法...谢谢贾斯汀·威利斯

不用在按钮内使用额外的html，您实际上只需触摸一下CSS即可实现此目的。 您可以简单地将button-inner类更改为具有弹性列的流。 所以你可以用这样的东西

.button-inner {
  flex-flow: column;
}