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-onicon-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();