Latest web development tutorials

이온 성 탭 표시 줄 작업

이온 탭

이온 탭 탭 표시 줄에 페이지 탭의 집합입니다. 여러분은 옵션을 클릭하여 페이지를 전환 할 수 있습니다.

iOS의 경우는 화면 하단에 표시됩니다, 안드로이드는 (탐색 표시 줄 아래) 화면 상단에 표시됩니다.

용법 

<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
(선택 사항)
字符串

하지만 당신은 탭이 링크를 이동합니다 터치 할 때.

아이콘
(선택 사항)
字符串

탭 아이콘입니다. 소정의 값이되면, 기본 기능과 이온의 이온 - 오프된다.

-아이콘에
(선택 사항)
字符串

선택한 태그 아이콘입니다.

아이콘 오프
(선택 사항)
字符串

태그 아이콘을 선택하지 않습니다.

배지
(선택 사항)
表达式

배지 탭 (일반적으로 숫자).

배지 스타일
(선택 사항)
表达式

스타일 탭 마이크로 캡 (예를 들어, 탭 양성).

온 - 선택
(선택 사항)
表达式

화재시 선택한 탭.

온 - 선택 해제
(선택 사항)
表达式

선택하지 않은 탭을 트리거합니다.

NG 클릭
(선택 사항)
表达式

일반적으로 클릭 탭이 선택됩니다. NG가 클릭하면 선택되지 않습니다. 당신은 스위치 라벨을 지정 $ ionicTabsDelegate.select ()를 사용할 수 있습니다.

$ IonicTabsDelegate

권한 제어 ionTabs 명령.

이 방법은 직접 $ ionicTabsDelegate 서비스를 호출하는 모든 ionTabs 명령을 제어 할 수 있습니다. 특정 인스턴스 ionTabs 제어 $ getByHandle 법.

용법 

<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
(선택 사항)
布尔值

이 옵션은이 태그의 검색 기록 (있는 경우)를 사용, 또는 부하 만 기본 페이지를로드해야합니다. 기본값은 false입니다. 팁 : 경우 ion-nav-view 옵션 카드, 당신은 true로 설정해야합니다. 

selectedIndex()

반환 값 : 값은 -1로, 태그 인덱스를 선택한다.

$getByHandle(handle)
매개 변수 유형 세부 정보
핸들 字符串

예를 들면 : 

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