Ionic-목록

Lists웹 또는 모바일 애플리케이션에서 가장 인기있는 요소 중 하나입니다. 일반적으로 다양한 정보를 표시하는 데 사용됩니다. 다른 HTML 요소와 결합하여 다른 메뉴, 탭을 만들거나 순수한 텍스트 파일의 단조 로움을 깨뜨릴 수 있습니다. Ionic 프레임 워크는 쉽게 사용할 수 있도록 다양한 목록 유형을 제공합니다.

이온 목록 생성

모든 목록은 두 가지 요소로 만들어집니다. 기본 목록을 만들려면<ul> 태그에는 list 할당 된 수업 및 <li> 태그는 item수업. 또 다른 흥미로운 점은 사용할 필요조차 없다는 것입니다.<ul>, <ol> 과 <li>목록에 대한 태그. 다른 요소를 사용할 수 있지만 중요한 것은list 과 item 적절하게 수업.

<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
</div>

위의 코드는 다음 화면을 생성합니다.

삽입 목록

자신의 컨테이너를 채우기 위해 목록이 필요한 경우 list-insets 당신의 후 list수업. 이렇게하면 여백이 추가되고 목록 크기가 컨테이너에 맞게 조정됩니다.

<div class = "list list-inset">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
</div>

위의 코드는 다음 화면을 생성합니다.

아이템 디바이더

분할기는 일부 요소를 논리 그룹으로 구성하는 데 사용됩니다. Ionic은 우리에게item-divider이것에 대한 수업. 다시 말하지만 다른 모든 Ionic 요소와 마찬가지로item-divider 수업 후 item수업. 항목 구분선은 기본적으로 다른 목록 항목보다 더 강력한 스타일을 갖기 때문에 목록 헤더로 유용합니다.

<div class = "list">
   <div class = "item item-divider">Item Divider 1</div>
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>

   <div class = "item item-divider">Item Divider 2</div>
   <div class = "item">Item 4</div>
   <div class = "item">Item 5</div>
   <div class = "item">Item 6</div>
</div>

위의 코드는 다음 화면을 생성합니다.

아이콘 추가

버튼에 아이콘을 추가하는 방법을 이미 보여 드렸습니다. 목록 항목에 아이콘을 추가 할 때 배치 할면을 선택해야합니다. 있습니다item-icon-left 과 item-icon-right이것에 대한 수업. 양쪽에 아이콘을 두려면이 두 클래스를 결합 할 수도 있습니다. 마지막으로item-note 항목에 텍스트 메모를 추가하려면 클래스.

<div class = "list">
   <div class = "item item-icon-left">
      <i class = "icon ion-home"></i>
      Left side Icon
   </div>

   <div class = "item item-icon-right">
      <i class = "icon ion-star"></i>
      Right side Icon
   </div>

   <div class = "item item-icon-left item-icon-right">
      <i class = "icon ion-home"></i>
      <i class = "icon ion-star"></i>
      Both sides Icons
   </div>
   
   <div class = "item item-icon-left">
      <i class = "icon ion-home"></i>
      <span class = "text-note">Text note</span>
   </div>
</div>

위의 코드는 다음 화면을 생성합니다.

아바타 및 썸네일 추가

아바타와 썸네일은 비슷합니다. 가장 큰 차이점은 아바타가 썸네일보다 작다는 것입니다. 이 썸네일은 목록 항목 전체 높이의 대부분을 덮고있는 반면 아바타는 중간 크기의 원형 이미지입니다. 사용되는 클래스는 다음과 같습니다.item-avatar 과 item-thumbnail. 아래 썸네일 코드 예제와 같이 아바타와 썸네일을 배치 할 쪽을 선택할 수도 있습니다.

<div class = "list">
   <div class = "item item-avatar">
      <img src = "my-image.png">
      <h3>Avatar</h3>
   </div>

   <div class = "item item-thumbnail-left">
      <img src = "my-image.png">
      <h3>Thumbnail</h3>
   </div>
</div>

위의 코드는 다음 화면을 생성합니다.