Ionic - Tab Javascript

Tab là một mẫu hữu ích cho bất kỳ loại điều hướng nào hoặc chọn các trang khác nhau bên trong ứng dụng của bạn. Các tab tương tự sẽ xuất hiện ở đầu màn hình đối với thiết bị Android và ở dưới cùng đối với thiết bị IOS.

Sử dụng Tab

Các tab có thể được thêm vào ứng dụng bằng cách sử dụng ion-tabs như một phần tử vùng chứa và ion-tabnhư một yếu tố nội dung. Chúng tôi sẽ thêm nó vàoindex.htmlnhưng bạn có thể thêm nó vào bất kỳ tệp HTML nào bên trong ứng dụng của mình. Chỉ cần đảm bảo không thêm nó vào bên trongion-content để tránh các vấn đề CSS đi kèm với nó.

index.html Mã

<ion-tabs class = "tabs-icon-only">

   <ion-tab title = "Home" icon-on = "ion-ios-filing" 
      icon-off = "ion-ios-filing-outline"></ion-tab>

   <ion-tab title = "About" icon-on = "ion-ios-home" 
      icon-off = "ion-ios-home-outline"></ion-tab>

   <ion-tab title = "Settings" icon-on = "ion-ios-star" 
      icon-off = "ion-ios-star-outline"></ion-tab>

</ion-tabs>

Đầu ra sẽ giống như trong ảnh chụp màn hình sau.

Có sẵn API cho ion-tabcác yếu tố. Bạn có thể thêm nó dưới dạng thuộc tính như được hiển thị trong ví dụ ở trên, nơi chúng tôi đã sử dụngtitle, icon-on và icon-off. Hai tab cuối cùng được sử dụng để phân biệt tab đã chọn với phần còn lại của nó. Nếu bạn nhìn vào hình trên, bạn có thể thấy tab đầu tiên đã được chọn. Bạn có thể kiểm tra phần còn lại của các thuộc tính trong bảng sau.

Thuộc tính tab

Thuộc tính	Kiểu	Chi tiết
tiêu đề	chuỗi	Tiêu đề của tab.
href	chuỗi	Liên kết được sử dụng để điều hướng tab.
biểu tượng	chuỗi	Biểu tượng của tab.
biểu tượng trên	chuỗi	Biểu tượng của tab khi được chọn.
tắt biểu tượng	chuỗi	Biểu tượng của tab khi không được chọn.
huy hiệu	biểu hiện	Huy hiệu cho tab.
kiểu huy hiệu	biểu hiện	Kiểu huy hiệu cho tab.
lựa chọn	biểu hiện	Được gọi khi tab được chọn
bỏ chọn	biểu hiện	Được gọi khi bỏ chọn tab
ẩn	biểu hiện	Được sử dụng để ẩn tab.
tàn tật	biểu hiện	Được sử dụng để tắt tab.

Các tab cũng có dịch vụ ủy quyền riêng để kiểm soát dễ dàng hơn tất cả các tab bên trong ứng dụng. Nó có thể được đưa vào bộ điều khiển và có một số phương pháp, được hiển thị trong bảng sau.

Phương pháp ủy quyền

phương pháp	Thông số	Kiểu	Chi tiết
mục lục được chọn()	/	con số	Trả về chỉ mục của tab đã chọn.
$ getByHandle (tham số1)	xử lý	chuỗi	Được sử dụng để kết nối các phương thức với chế độ xem tab cụ thể với cùng một tay cầm. Xử lý có thể được thêm vàoion-tabs bằng cách sử dụng delegate-handle = "my-handle" thuộc tính. $ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();