如何正確定位列表項中的時間戳？

Question

我正在嘗試創建一個看起來像您的典型收件箱消息的列表項。

在components docs所示的演示顯示所添加的時間戳作爲ion-note但是在提供的標記丟失。

當我檢查演示HTML時，似乎使用類似item-inner和input-wrapper被使用。我似乎無法在任何地方找到關於它們的信息。

難道我寫我自己的CSS來解決這些問題，或者有沒有一種正確的離子方式來做到這一點，我失蹤了？

Answer 1

我想了一下，但還沒有回答我自己的問題。這裏是。

我ion-item標記：

<ion-item text-wrap> 
    <ion-avatar item-left> 
    <img src="http://i.pravatar.cc/80?u=judywong"> 
    </ion-avatar> 
    <h2>Jane Doe</h2> 
    <ion-note item-right>4:00 pm</ion-note> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</p> 
</ion-item> 

然後我用CSS來同時使用item-right屬性定位到合適的離子方式，它定位到頂部。

ion-note { 
    align-self: flex-start; 
    line-height: 1.8rem; 
    position: absolute; 
    top: 0; 
    right: $item-ios-padding-right/2; 
} 

還添加了一些正確的填充，以h2清除時間戳。