Latest web development tutorials

การดำเนินงานแถบแท็บอิออน

ไอออนแท็บ

ไอออนแท็บเป็นชุดของแท็บหน้าในแถบแท็บ คุณสามารถเปลี่ยนหน้าได้โดยคลิกที่ตัวเลือก

สำหรับ iOS จะปรากฏที่ด้านล่างของหน้าจอ Android จะปรากฏที่ด้านบนของหน้าจอ (ด้านล่างแถบนำทาง)

การใช้ 

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

  <ion-tab title="首页" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
    <!-- 标签 1 内容 -->
  </ion-tab>

  <ion-tab title="关于" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
    <!-- 标签 2 内容 -->
  </ion-tab>

  <ion-tab title="设置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    <!-- 标签 3 内容 -->
  </ion-tab>

</ion-tabs>

ผลจะเป็นดังนี้:

API

คุณสมบัติ ชนิด รายละเอียด
ผู้รับมอบสิทธิ์จัดการ
(อุปกรณ์เสริม)
字符串

ที่จับกับ $ionicTabsDelegate เพื่อแจ้งแท็บเหล่านี้

ไอออนแท็บ

เครือ ionTabs

มีเนื้อหาแท็บ เนื้อหานี้เท่านั้นที่มีอยู่ในที่ได้รับแท็บที่เลือก

แต่ละคนมีของตัวเอง ionTab ประวัติการท่องเว็บของตน

การใช้ 

<ion-tab
  title="Tab!"
  icon="my-icon"
  href="#/tab/tab-link"
  on-select="onTabSelected()"
  on-deselect="onTabDeselected()">
</ion-tab>

API

คุณสมบัติ ชนิด รายละเอียด
ชื่อเรื่อง 字符串

ชื่อแท็บ

href
(อุปกรณ์เสริม)
字符串

แต่เมื่อคุณแตะแท็บที่จะข้ามการเชื่อมโยง

ไอคอน
(อุปกรณ์เสริม)
字符串

แท็บไอคอน ถ้าค่าที่กำหนดก็จะกลายเป็นค่าเริ่มต้นไอออนและไอออนออกจาก

ไอคอนบน
(อุปกรณ์เสริม)
字符串

ไอคอนแท็กที่เลือก

ไอคอนออก
(อุปกรณ์เสริม)
字符串

ไม่เลือกไอคอนแท็ก

สัญลักษณ์
(อุปกรณ์เสริม)
表达式

แท็บตรา (มักจะเป็นตัวเลข)

ป้ายสไตล์
(อุปกรณ์เสริม)
表达式

แท็บรูปแบบ Micro-Cap (เช่นแท็บบวก)

ในการเลือก
(อุปกรณ์เสริม)
表达式

ไฟไหม้เมื่อเลือกแท็บ

บนยกเลิก
(อุปกรณ์เสริม)
表达式

ทริกเกอร์เมื่อแท็บไม่ถูกตรวจสอบ

NG-คลิก
(อุปกรณ์เสริม)
表达式

โดยปกติเมื่อมีการคลิกแท็บจะถูกเลือก ถ้า NG-คลิกก็จะไม่ได้รับการคัดเลือก คุณสามารถใช้ $ ionicTabsDelegate.select () เพื่อระบุป้ายสวิทช์

$ IonicTabsDelegate

การอนุมัติการเรียนการสอน ionTabs ควบคุม

วิธีการนี้โดยตรงเรียกใช้บริการ $ ionicTabsDelegate ควบคุมการเรียนการสอน ionTabs ทั้งหมด ด้วยวิธีการ $ getByHandle ของการควบคุมเช่น ionTabs ที่เฉพาะเจาะจง

การใช้ 

<body ng-controller="MyCtrl">
  <ion-tabs>

    <ion-tab title="Tab 1">
      你好，标签1！
      <button ng-click="selectTabWithIndex(1)">选择标签2</button>
    </ion-tab>
    <ion-tab title="Tab 2">你好标签2！</ion-tab>

  </ion-tabs>
</body>

function MyCtrl($scope, $ionicTabsDelegate) {
  $scope.selectTabWithIndex = function(index) {
    $ionicTabsDelegate.select(index);
  }
}

ทาง 

select(index, [shouldChangeHistory])

เลือกแท็บเพื่อให้ตรงกับดัชนีที่กำหนด

พารามิเตอร์ ชนิด รายละเอียด
ดัชนี 数值

เลือกแท็บดัชนี

shouldChangeHistory
(อุปกรณ์เสริม)
布尔值

ถ้าตัวเลือกนี้ควรโหลดประวัติการท่องเว็บของแท็กนี้ (ถ้ามี) และการใช้งานหรือโหลดเพียงหน้าเริ่มต้น เริ่มต้นเป็นเท็จ เคล็ดลับ: หาก ion-nav-view ในการ์ดตัวเลือกที่คุณอาจจะต้องตั้งมันให้เป็นจริง 

selectedIndex()

กลับค่า: ค่าดัชนีแท็กที่เลือกเช่น -1

$getByHandle(handle)
พารามิเตอร์ ชนิด รายละเอียด
จัดการ 字符串

ตัวอย่างเช่น: 

$ionicTabsDelegate.$getByHandle('my-handle').select(0);