이온 목록
목록은 모든 모바일 앱에서 사용하는 거의 항상, 널리 사용되는 인터페이스 요소입니다.
리스트는 기본 문자, 버튼, 스위치, 및 다른 섬네일 아이콘 일 수있다.
목록 항목은 HTML 요소가 될 수 있습니다. 클래스 목록 요구 컨테이너 엘리먼트는 각리스트 항목은 항목의 카테고리를 필요하다.
ionList ionItem 쉽게, 같은 슬라이드 편집과 같은 상호 작용하는 다양한 방법을 지원하는 종류를 끌어 항목을 삭제할 수 있습니다합니다.
기본 사용법 :
<ul class="list">
<li class="item">
...
</li>
</ul>
목록 구분
우리는 구별하기 위해 다른 배경 색상과 굵은 글꼴로, 기본적으로 항목의 목록을 구분 목록을 작성하는 항목 분배기 클래스를 사용할 수 있지만 당신은 쉽게 자신을 정의 할 수 있습니다.
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="#">
Butterfinger
</a>
...
</div>
아이콘 목록
우리는리스트 항목의 왼쪽 또는 오른쪽에 아이콘을 지정할 수있다.
오른쪽, 왼쪽에 아이템 아이콘을 오른쪽 설정 아이콘을 항목-아이콘 왼쪽 아이콘을 사용합니다. 이 아이콘의 양면을해야하는 경우, 두 개의 클래스로에 추가됩니다.
각리스트 아이템 클릭 할 수 있도록하기 실시 예는, 우리는 목록 항목에 <A> 라벨을 사용했다.
아이콘의 오른쪽이 첨가되지 않은 경우 <A> 사용 목록 항목 또는 <버튼> 요소는, 자동적으로 화살표에 첨가된다.
예, 첫 번째 항목 만 두 번째 아이콘은이에 대해, 오른쪽에있는 세 번째 아이콘이 왼쪽에있는 아이콘 (뿐만 아니라 참고 항목-주), 네 번째는 배지 (마크) 요소가 있습니다.
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="#">
<i class="icon ion-chatbubble-working"></i>
Call Ma
<i class="icon ion-ios-telephone-outline"></i>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-person-stalker"></i>
Friends
<span class="badge badge-assertive">0</span>
</a>
</div>
버튼 목록
클래스 목록 항목에 항목 버튼 오른쪽 또는 항목 버튼 왼쪽 버튼을 사용합니다.
<div class="list">
<div class="item item-button-right">
Call Ma
<button class="button button-positive">
<i class="icon ion-ios-telephone"></i>
</button>
</div>
...
</div>
아바타 목록으로
항목-아바타 목록 아바타를 생성합니다 :
<div class="list">
<a class="item item-avatar" href="#">
<img src="venkman.jpg">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
...
</div>
미리보기 목록
미리보기 항목-썸네일 왼쪽 클래스는 왼쪽 정렬, 아이템 축소판 오른쪽 클래스는 오른쪽 정렬에 썸네일을 추가하는 데 사용됩니다 추가 할 수 있습니다.
<div class="list">
<a class="item item-thumbnail-left" href="#">
<img src="cover.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
...
</div>
임베디드 목록 (삽입 목록)
우리는 목록 중 컨테이너에 내장 될 수 있으며, 목록 전체 폭을 표시하지 않습니다.
목록 차의 일반적인 목록, 목록 - 인세는 탭과 유사한 마진 (marign)를 설정하는 것입니다 : 인라인 스타일의 목록입니다.
임베디드 목록은 그림자없는, 효과가 스크롤 할 때 더 나은 될 것입니다.
<div class="list list-inset">
<div class="item">
Raiders of the Lost Ark
</div>
...
</div>