2017-01-01 1 views
0

ION 2のイオンアイテム内に複数のバッジを挿入するにはどうすればよいですか?私はこれをやっていますが、それは最初の4つのバッジだけを示しています。ION 2のイオンアイテム内に複数のバッジを配置する方法は?

<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> 

すべてのバッジを表示するにはイオンアイテムが必要です。どうしたらいいですか?

レンダリングされた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> 

そしてそれは次のようになります。

enter image description here

答えて

0

私にとってはこの作品:

<button ion-item detail-push> 
    <div style="float:left; width:100%; display:block; margin-left:-10px;"> 
     <button ion-button style="float:left; font-size:1.2rem !important; color:#999; float:left; display:block; text-transform: capitalize;" clear> 
      Tags 
     </button> 
    </div> 
    <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> 
</button> 
0

は商品のため、水平スクロールを設定してみてください。

<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> 
関連する問題