Ionic - Danh sách

Listslà một trong những yếu tố phổ biến nhất của bất kỳ ứng dụng web hoặc ứng dụng di động nào. Chúng thường được sử dụng để hiển thị các thông tin khác nhau. Chúng có thể được kết hợp với các phần tử HTML khác để tạo các menu, tab khác nhau hoặc để phá vỡ sự đơn điệu của các tệp văn bản thuần túy. Ionic framework cung cấp các loại danh sách khác nhau để giúp việc sử dụng chúng dễ dàng.

Tạo danh sách ion

Mọi danh sách được tạo với hai phần tử. Khi bạn muốn tạo một danh sách cơ bản<ul> thẻ cần phải có list lớp được chỉ định và của bạn <li> thẻ sẽ sử dụng itemlớp học. Một điều thú vị khác là bạn thậm chí không cần sử dụng<ul>, <ol> và <li>cho danh sách của bạn. Bạn có thể sử dụng bất kỳ yếu tố nào khác, nhưng điều quan trọng là phải thêmlist và item các lớp một cách thích hợp.

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

Đoạn mã trên sẽ tạo ra màn hình sau:

Danh sách Inset

Khi bạn cần một danh sách để lấp đầy vùng chứa của riêng mình, bạn có thể thêm list-insets phía sau của cậu listlớp học. Điều này sẽ thêm một số lợi nhuận cho nó và nó sẽ điều chỉnh kích thước danh sách cho vùng chứa của bạn.

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

Đoạn mã trên sẽ tạo ra màn hình sau:

Ngăn chia mục

Bộ phân chia được sử dụng để tổ chức một số phần tử thành các nhóm hợp lý. Ionic cho chúng taitem-dividerlớp cho điều này. Một lần nữa, giống như với tất cả các nguyên tố Ionic khác, chúng ta chỉ cần thêmitem-divider lớp sau itemlớp học. Bộ chia mục hữu ích như một tiêu đề danh sách, vì chúng có kiểu dáng mạnh mẽ hơn các mục danh sách khác theo mặc định.

<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>

Đoạn mã trên sẽ tạo ra màn hình sau:

Thêm biểu tượng

Chúng tôi đã hướng dẫn bạn cách thêm biểu tượng vào các nút của bạn. Khi thêm các biểu tượng vào các mục trong danh sách, bạn cần chọn phía bạn muốn đặt chúng. Cóitem-icon-left và item-icon-rightcác lớp học cho điều này. Bạn cũng có thể kết hợp hai lớp đó, nếu bạn muốn có các Biểu tượng của mình ở cả hai bên. Cuối cùng, cóitem-note lớp để thêm ghi chú văn bản vào mục của bạn.

<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>

Đoạn mã trên sẽ tạo ra màn hình sau:

Thêm hình đại diện và hình thu nhỏ

Hình đại diện và hình thu nhỏ tương tự nhau. Sự khác biệt chính là hình đại diện nhỏ hơn hình thu nhỏ. Những hình thu nhỏ này chiếm gần hết chiều cao của mục danh sách, trong khi hình đại diện là hình tròn có kích thước trung bình. Các lớp được sử dụng làitem-avatar và item-thumbnail. Bạn cũng có thể chọn mặt nào bạn muốn đặt hình đại diện và hình thu nhỏ của mình như trong ví dụ mã hình thu nhỏ bên dưới.

<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>

Đoạn mã trên sẽ tạo ra màn hình sau: