이온 목록
List는 널리 사용되는 인터페이스 요소이며 거의 모든 모바일 앱에서 사용됩니다.
목록은 기본 텍스트, 버튼, 스위치, 아이콘, 썸네일 등이 될 수 있습니다.
목록 항목은 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>
아이콘이 있는 목록
목록 항목의 왼쪽이나 오른쪽에 아이콘을 지정할 수 있습니다.
아이콘을 왼쪽으로 설정하려면 item-icon-left를 사용하고 아이콘을 오른쪽으로 설정하려면 item-icon-right를 사용하세요. 양쪽에 아이콘이 필요한 경우 두 클래스를 모두 추가하면 됩니다.
다음 예에서는 목록 항목에 <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>
버튼 목록
item-button-right 또는 item-button-left 클래스를 사용하여 목록 항목에 버튼을 배치하세요.
<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>
아바타 목록 포함
item-avatar를 사용하여 아바타 목록 생성:
<div class="list"> <a class="item item-avatar" href="#"> <img src="../style/images/venkman.jpg"> <h2>Venkman</h2> <p>Back off, man. I'm a scientist.</p> </a> ... </div>
Thumbnail list
item-thumbnail-left 클래스는 왼쪽 정렬 썸네일을 추가하는 데 사용됩니다. item-thumbnail-right 클래스는 오른쪽 정렬된 썸네일을 추가하는 데 사용됩니다.
<div class="list"> <a class="item item-thumbnail-left" href="#"> <img src="../style/images/cover.jpg"> <h2>Pretty Hate Machine</h2> <p>Nine Inch Nails</p> </a> ... </div>
Inset list
컨테이너에 목록을 삽입할 수 있지만 목록에는 전체 너비가 표시되지 않습니다.
인라인 목록의 스타일은 list list-inset입니다. 일반 목록과의 차이점은 탭과 유사하게 여백(marign)이 있다는 것입니다.
인라인 목록에는 그림자 효과가 없으며 스크롤할 때 효과가 더 좋습니다.
<div class="list list-inset"> <div class="item"> Raiders of the Lost Ark </div> ... </div>
