목록 항목의 타임 스탬프를 올바르게 배치하는 방법은 무엇입니까?

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> 

가 그럼 난 오른쪽으로 이온 방식의 위치를 ​​ item-right 속성을 사용하는 동안 CSS 상단에 위치를 사용합니다.

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

또한 타임 스탬프를 지우려면 일부 오른쪽 패딩을 h2에 추가했습니다.