최고의 이온 성 탭 표시 줄 작업 튜토리얼 2024년, 이 튜토리얼에서는 이온 탭,이온 탭,$ IonicTabsDelegate,를 배울 수 있습니다.
이온 탭 탭 표시 줄에 페이지 탭의 집합입니다. 여러분은 옵션을 클릭하여 페이지를 전환 할 수 있습니다.
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>
다음과 같은 효과가 있습니다 :
재산 | 유형 | 세부 정보 |
---|---|---|
대표 핸들 (선택 사항) | 字符串 | 와 핸들 |
제휴 ionTabs
이 탭 콘텐츠가 포함되어 있습니다. 이 콘텐츠는 주어진 선택한 탭에 있습니다.
각각은 자신의 ionTab 브라우징 역사를 가지고 있습니다.
<ion-tab title="Tab!" icon="my-icon" href="#/tab/tab-link" on-select="onTabSelected()" on-deselect="onTabDeselected()"> </ion-tab>
재산 | 유형 | 세부 정보 |
---|---|---|
표제 | 字符串 | 탭 제목입니다. |
HREF (선택 사항) | 字符串 | 하지만 당신은 탭이 링크를 이동합니다 터치 할 때. |
아이콘 (선택 사항) | 字符串 | 탭 아이콘입니다. 소정의 값이되면, 기본 기능과 이온의 이온 - 오프된다. |
-아이콘에 (선택 사항) | 字符串 | 선택한 태그 아이콘입니다. |
아이콘 오프 (선택 사항) | 字符串 | 태그 아이콘을 선택하지 않습니다. |
배지 (선택 사항) | 表达式 | 배지 탭 (일반적으로 숫자). |
배지 스타일 (선택 사항) | 表达式 | 스타일 탭 마이크로 캡 (예를 들어, 탭 양성). |
온 - 선택 (선택 사항) | 表达式 | 화재시 선택한 탭. |
온 - 선택 해제 (선택 사항) | 表达式 | 선택하지 않은 탭을 트리거합니다. |
NG 클릭 (선택 사항) | 表达式 | 일반적으로 클릭 탭이 선택됩니다. NG가 클릭하면 선택되지 않습니다. 당신은 스위치 라벨을 지정 $ ionicTabsDelegate.select ()를 사용할 수 있습니다. |
권한 제어 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입니다. 팁 : 경우 |
selectedIndex()
반환 값 : 값은 -1로, 태그 인덱스를 선택한다.
$getByHandle(handle)
매개 변수 | 유형 | 세부 정보 |
---|---|---|
핸들 | 字符串 |
예를 들면 :
$ionicTabsDelegate.$getByHandle('my-handle').select(0);