如何在列表项中正确定位时间戳？

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添加了一些正确的填充以清除时间戳。