Ionic - Dạng

Ionic formschủ yếu được sử dụng để tương tác với người dùng và thu thập thông tin cần thiết. Chương này sẽ bao gồm các biểu mẫu nhập văn bản khác nhau và trong các chương tiếp theo, chúng tôi sẽ giải thích cách sử dụng các thành phần biểu mẫu khác bằng cách sử dụng Ionic framework.

Sử dụng Mẫu đầu vào

Cách tốt nhất để sử dụng biểu mẫu là sử dụng list và itemnhư các lớp học chính của bạn. Ứng dụng của bạn thường sẽ bao gồm nhiều phần tử một dạng, vì vậy, bạn nên sắp xếp nó dưới dạng danh sách. Trong ví dụ sau, bạn có thể nhận thấy rằng phần tử item làlabel nhãn.

Bạn có thể sử dụng bất kỳ phần tử nào khác, nhưng nhãn sẽ cung cấp khả năng nhấn vào bất kỳ phần nào của phần tử để tập trung đầu vào văn bản của bạn. Bạn có thể đặt mộtplaceholdertrông sẽ khác với văn bản nhập và nó sẽ bị ẩn ngay khi bạn bắt đầu nhập. Bạn có thể thấy điều này trong ví dụ bên dưới.

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

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

Nhãn Ionic

Ionic cung cấp một số tùy chọn khác cho nhãn của bạn. Bạn có thể dùnginput-label lớp, nếu bạn muốn trình giữ chỗ của mình ở bên trái khi bạn nhập văn bản.

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

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

Nhãn xếp chồng

Stacked labellà tùy chọn khác cho phép di chuyển nhãn của bạn lên trên hoặc dưới cùng của đầu vào. Để đạt được điều này, chúng tôi sẽ thêmitem-stacked-label lớp cho phần tử nhãn của chúng tôi và chúng tôi cần tạo một phần tử mới và gán input-labellớp với nó. Nếu chúng ta muốn nó ở trên cùng, chúng ta chỉ cần thêm phần tử này trướcinputnhãn. Điều này được thể hiện trong ví dụ sau.

Lưu ý rằng span trước thẻ inputnhãn. Nếu chúng tôi thay đổi vị trí của họ, nó sẽ xuất hiện bên dưới nó trên màn hình.

<div class = "list">
   <label class = "item item-input item-stacked-label">
      <span class = "input-label">Label 1</span>
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input item-stacked-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

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

Nhãn nổi

Floating labelslà tùy chọn thứ ba mà chúng tôi có thể sử dụng. Các nhãn này sẽ bị ẩn trước khi chúng ta bắt đầu nhập. Ngay khi bắt đầu nhập, chúng sẽ xuất hiện trên đầu phần tử với hoạt ảnh nổi đẹp mắt. Chúng ta có thể sử dụng nhãn nổi giống như cách chúng ta sử dụng nhãn xếp chồng. Sự khác biệt duy nhất là lần này chúng tôi sẽ sử dụngitem-floating-label lớp học.

<div class = "list">
   <label class = "item item-input item-floating-label">
      <span class = "input-label"t>Label 1</span>
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input item-floating-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

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

Inset đầu vào

Trong chương trước, chúng ta đã thảo luận về cách đưa các nguyên tố Ionic vào. Bạn cũng có thể nhập một đầu vào bằng cách thêmitem-input-inset hạng mục của bạn và item-input-wrappervào nhãn của bạn. Trình bao bọc sẽ thêm kiểu bổ sung cho nhãn của bạn.

Nếu bạn thêm một số phần tử khác bên cạnh nhãn của mình, kích thước nhãn sẽ điều chỉnh để phù hợp với phần tử mới. Bạn cũng có thể thêm các yếu tố bên trong nhãn của mình (thường là các biểu tượng).

Ví dụ sau đây cho thấy hai đầu vào chèn. Cái đầu tiên có một nút bên cạnh nhãn và cái thứ hai có một biểu tượng bên trong nó. Chúng tôi đã sử dụngplaceholder-iconlớp để tạo biểu tượng có cùng màu với văn bản chỗ dành sẵn. Nếu không có nó, biểu tượng sẽ sử dụng màu của nhãn.

<div class = "list">
   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">		
         <input type = "text" placeholder = "Placeholder 1" />
      </label>
      <button class = "button">button</button>
   </div>

   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">
         <i class = "icon ion-edit placeholder-icon"></i>
         <input type = "text" placeholder = "Placeholder 2" />
      </label>
   </div>
</div>

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