如何在 ionic 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

好的，我找到了解决方案...谢谢你Justin Willis

无需在按钮内使用额外的 html，实际上只需一点 css 即可实现此目的。您可以简单地将按钮内部类更改为具有弹性流列。所以你可以使用这样的东西

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

Answer 2

使用 Ionic 4 和 5，您可以使用 div 来完成此操作：

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

Answer 3

你别无选择，只能使用 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>