イオンバッジのための垂直方向の整列

Question

私はこのマイナスイオンアプリケーションでion-itemを持っています。それにはion-badgeとion-buttonが含まれています。 ion-itemの中にそれらを両方とも垂直に整列させたいと思います。私はhereで答えを試しましたが、うまくいきませんでした。最後には、これらをion-badgeとion-buttonと並べて並べる必要があります。

<ion-item> 
    <ion-badge>150</ion-badge> 
    <button ion-button>My Button</button> 
</ion-item> 

Answer 1

クラスをion-itemに追加します。

HTML：

<ion-item class="my-item"> 
    <ion-badge>150</ion-badge> 
    <button ion-button>My Button</button> 
</ion-item> 

そして、あなたのion-itemのion-label子に次のCSS-スタイルを追加します。

SCSS：

.my-item { 
    ion-label { 
     display: flex; 
     flex-direction: row; 
     align-items: baseline 
    } 
} 

結果：

UPDATE：

コードとアイコンで結果がボタンに追加：

HTML：

<ion-item class="my-item"> 
    <ion-badge>150</ion-badge> 
    <button ion-button icon-end>My Button 
     <ion-icon name="arrow-down"></ion-icon> 
    </button> 
</ion-item> 

SCSS：

.my-item { 
    ion-label { 
     display: flex; 
     flex-direction: row; 
     align-items: baseline 
    } 

    ion-icon { 
     margin-left: 5px; 
    } 
} 

はまた、私は、テキストとボタンのアイコンの間にSOMスペースを取得するために<ion-icon>ためのCSSルールを追加しました。

結果：

Answer 2

正当化 - コンテンツ：センター;仕事になる！

ion-badge {justify-content: center; }