javascript - 如何在 IONIC 2 的 ion-item 中放置多个徽章？

Question

如何在 IONIC 2 中将多个徽章放入一个 ion-item 中？我正在这样做，但它只显示前四个徽章。

<ion-item detail-push>            
  <ion-badge>Badge 1</ion-badge>
  <ion-badge>Badge 2</ion-badge>
  <ion-badge>Another Badge</ion-badge>
  <ion-badge>Another big badge</ion-badge>
  <ion-badge>Another very big badge</ion-badge>
</ion-item>

我需要 ion-item 增长以显示所有徽章。我该怎么做？

呈现的 html 是这样的:

<ion-item class="item item-block item-md" detail-push="">
  <div class="item-inner">
  <div class="input-wrapper">
      <!--template bindings={}-->
      <ion-label class="label label-md">            
        <ion-badge class="badge badge-md">Badge 1</ion-badge>
        <ion-badge class="badge badge-md">Badge 2</ion-badge>
        <ion-badge class="badge badge-md">Another Badge</ion-badge>
        <ion-badge class="badge badge-md">Another big badge</ion-badge>
        <ion-badge class="badge badge-md">Another very big badge</ion-badge>
      </ion-label>
    </div>
    <!--template bindings={}-->
  </div>
  <div class="button-effect"></div>
</ion-item>

它看起来像这样:

Answer 1

您可以尝试为元素设置水平滚动。

<ion-item detail-push>
<ion-scroll scrollX="true">            
  <ion-badge>Badge 1</ion-badge>
  <ion-badge>Badge 2</ion-badge>
  <ion-badge>Another Badge</ion-badge>
  <ion-badge>Another big badge</ion-badge>
  <ion-badge>Another very big badge</ion-badge>
</ion-scroll>
</ion-item>