Ionic - Tab

Ionic tabshầu hết thời gian được sử dụng để điều hướng trên thiết bị di động. Tạo kiểu được tối ưu hóa cho các nền tảng khác nhau. Điều này có nghĩa là trên thiết bị Android, các tab sẽ được đặt ở trên cùng của màn hình, trong khi trên IOS nó sẽ ở dưới cùng. Có nhiều cách khác nhau để tạo tab. Chúng ta sẽ hiểu chi tiết, cách tạo tab trong chương này.

Tab đơn giản

Menu Tab đơn giản có thể được tạo bằng tabslớp học. Đối với phần tử bên trong đang sử dụng lớp này, chúng ta cần thêmtab-itemcác yếu tố. Vì các tab thường được sử dụng để điều hướng, chúng tôi sẽ sử dụng<a>thẻ cho các mục tab. Ví dụ sau đây đang hiển thị một menu có bốn tab.

<div class = "tabs">
   <a class = "tab-item">
      Tab 1
   </a>
	
   <a class = "tab-item">
      Tab 2
   </a>

   <a class = "tab-item">
      Tab 3
   </a>
</div>

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

Thêm biểu tượng

Ionic cung cấp các lớp để thêm biểu tượng vào các tab. Nếu bạn muốn các tab của mình có các biểu tượng mà không có bất kỳ văn bản nào, hãytabs-icon-only lớp nên được thêm vào sau tabslớp học. Tất nhiên, bạn cần thêm các biểu tượng mà bạn muốn hiển thị.

<div class = "tabs tabs-icon-only">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
   </a>
</div>

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

Bạn cũng có thể thêm các biểu tượng và văn bản cùng nhau. Cáctabs-icon-top và tabs-icon-leftlà các lớp sẽ đặt biểu tượng ở trên hoặc ở bên trái tương ứng. Việc thực hiện cũng giống như ví dụ ở trên, chúng ta sẽ chỉ thêm một lớp và văn bản mới mà chúng ta muốn sử dụng. Ví dụ sau cho thấy các biểu tượng được đặt phía trên văn bản.

<div class = "tabs tabs-icon-top">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
      Tab 1
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
      Tab 2
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
      Tab 3
   </a>
</div>

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

Tab có sọc

Các tab có sọc có thể được tạo bằng cách thêm vùng chứa xung quanh các tab của chúng tôi với tabs-stripedlớp học. Lớp này cho phép sử dụngtabs-background và tabs-color tiền tố để thêm một số màu Ionic vào menu tab.

Trong ví dụ sau, chúng tôi sẽ sử dụng tabs-background-positive (màu xanh lam) để tạo kiểu nền cho menu của chúng tôi và tabs-color-light(trắng) để tạo kiểu cho các biểu tượng tab. Lưu ý sự khác biệt giữa tab thứ hai đang hoạt động và hai tab khác không hoạt động.

<div class = "tabs-striped tabs-background-positive tabs-color-light">
   <div class = "tabs">
      <a class = "tab-item">
         <i class = "icon ion-home"></i>
      </a>
		
      <a class = "tab-item active">
         <i class = "icon ion-star"></i>
      </a>
		
      <a class = "tab-item">
         <i class = "icon ion-planet"></i>
      </a>
   </div>
</div>

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