Ionic - แท็บ Javascript

แท็บเป็นรูปแบบที่มีประโยชน์สำหรับการนำทางทุกประเภทหรือเลือกหน้าต่างๆภายในแอปของคุณ แท็บเดียวกันนี้จะปรากฏที่ด้านบนของหน้าจอสำหรับอุปกรณ์ Android และที่ด้านล่างสำหรับอุปกรณ์ IOS

การใช้แท็บ

สามารถเพิ่มแท็บลงในแอพได้โดยใช้ ion-tabs เป็นองค์ประกอบคอนเทนเนอร์และ ion-tabเป็นองค์ประกอบเนื้อหา เราจะเพิ่มลงในไฟล์index.htmlแต่คุณสามารถเพิ่มลงในไฟล์ HTML ใดก็ได้ภายในแอปของคุณ อย่าลืมเพิ่มเข้าไปในไฟล์ion-content เพื่อหลีกเลี่ยงปัญหา CSS ที่มาพร้อมกับมัน

index.html รหัส

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

ผลลัพธ์จะมีลักษณะดังที่แสดงในภาพหน้าจอต่อไปนี้

มี API สำหรับ ion-tabองค์ประกอบ คุณสามารถเพิ่มเป็นแอตทริบิวต์ตามที่แสดงในตัวอย่างด้านบนที่เราใช้title, icon-on และ icon-off. สองรายการสุดท้ายใช้เพื่อแยกความแตกต่างของแท็บที่เลือกจากแท็บที่เหลือ หากคุณดูภาพด้านบนคุณจะเห็นว่ามีการเลือกแท็บแรก คุณสามารถตรวจสอบแอตทริบิวต์ที่เหลือได้ในตารางต่อไปนี้

คุณสมบัติของแท็บ

แอตทริบิวต์ ประเภท รายละเอียด
หัวข้อ สตริง ชื่อของแท็บ
href สตริง ลิงก์ที่ใช้สำหรับการนำทางของแท็บ
ไอคอน สตริง ไอคอนของแท็บ
ไอคอนบน สตริง ไอคอนของแท็บเมื่อเลือก
ไอคอนปิด สตริง ไอคอนของแท็บเมื่อไม่ได้เลือก
ตรา นิพจน์ ป้ายสำหรับแท็บ
รูปแบบตรา นิพจน์ รูปแบบป้ายสำหรับแท็บ
เลือก นิพจน์ เรียกเมื่อแท็บถูกเลือก
เมื่อไม่เลือก นิพจน์ เรียกว่าเมื่อยกเลิกการเลือกแท็บ
ซ่อนอยู่ นิพจน์ ใช้เพื่อซ่อนแท็บ
ปิดการใช้งาน นิพจน์ ใช้เพื่อปิดการใช้งานแท็บ

แท็บยังมีบริการตัวแทนของตัวเองเพื่อให้ควบคุมแท็บทั้งหมดภายในแอพได้ง่ายขึ้น สามารถฉีดเข้าไปในคอนโทรลเลอร์ได้และมีหลายวิธีดังแสดงในตารางต่อไปนี้

วิธีการมอบหมาย

วิธี พารามิเตอร์ ประเภท รายละเอียด
selectedIndex () / จำนวน ส่งกลับดัชนีของแท็บที่เลือก
$ getByHandle (พารามิเตอร์ 1) ด้ามจับ สตริง ใช้เพื่อเชื่อมต่อวิธีการกับมุมมองแท็บเฉพาะด้วยจุดจับเดียวกัน สามารถเพิ่มที่จับได้ion-tabs โดยใช้ delegate-handle = "my-handle" แอตทริบิวต์ $ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();