이온 탭 표시줄 작업
ion-tabs
ion-tabs는 페이지 탭 세트로 구성된 탭 표시줄입니다. 옵션을 클릭하면 페이지를 전환할 수 있습니다.
iOS의 경우 화면 하단에 표시되고, Android의 경우 화면 상단(내비게이션 바 아래)에 표시됩니다.
Usage
<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
| Attributes | Type | Details |
|---|---|---|
| delegate-handle (선택) | <코드 >String字符串 | 该句柄用 |
ion-tab
隶属于ionTabs
包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。
每个ionTab都有自己的浏览历史。
用法
<ion-tab title="Tab!" icon="my-icon" href="#/tab/tab-link" on-select="onTabSelected()" on-deselect="onTabDeselected()"> </ion-tab>
API
| 属性 | 类型 | 详情 |
|---|---|---|
| title | 字符串 | 选项卡的标题。 |
| href (可选) | 字符串 | 但触碰的时候，该选项卡将会跳转的的链接。 |
| icon (可选) | 字符串 | 选项卡的图标。如果给定值，它将成为ion-on和ion-off的默认值。 |
| icon-on (可选) | 字符串 | 被选中标签的图标。 |
| icon-off (可选) | 字符串 | 没被选中标签的图标。 |
| badge (可选) | 表达式 | 选项卡上的徽章（通常是一个数字）。 |
| badge-style (可选) | 表达式 | 选项卡上微章的样式（例，tabs-positive ）。 |
| on-select (可选) | 表达式 | 选项卡被选中时触发。 |
| on-deselect (可选) | 表达式 | 选项卡取消选中时触发。 |
| ng-click (可选) | 表达式 | 이 핸들은 $ionicTabsDelegate를 사용하여 이러한 탭을 식별합니다. |
<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>🎜API🎜🎜🎜🎜🎜Property🎜🎜Type🎜🎜Details🎜🎜🎜🎜🎜🎜title🎜🎜
String🎜🎜🎜제목 탭. 🎜🎜🎜🎜🎜href🎜🎜(선택)🎜🎜🎜🎜String🎜🎜🎜하지만 터치하면 탭이 링크로 이동합니다. 🎜🎜🎜🎜🎜icon🎜🎜(선택)🎜🎜🎜🎜String🎜🎜🎜탭의 아이콘입니다. 값을 지정하면 ion-on, ion-off의 기본값이 됩니다. 🎜🎜🎜🎜🎜icon-on🎜🎜(선택)🎜🎜🎜🎜String🎜🎜🎜선택한 라벨의 아이콘입니다. 🎜🎜🎜🎜🎜icon-off🎜🎜(선택 사항)🎜🎜🎜🎜String🎜🎜🎜선택되지 않은 라벨의 아이콘입니다. 탭의 배지(일반적으로 숫자)입니다. 🎜🎜🎜🎜🎜badge-style🎜🎜(선택 사항)🎜🎜🎜🎜표현🎜🎜🎜탭의 마이크로 배지 스타일(예: 탭 포지티브)입니다. 🎜🎜🎜🎜🎜on-select🎜🎜(선택 사항)🎜🎜🎜🎜expression🎜🎜🎜탭이 선택되면 시작됩니다. 🎜🎜🎜🎜🎜on-deselect🎜🎜(선택 사항)🎜🎜🎜🎜expression🎜🎜🎜탭이 선택 해제되면 시작됩니다. 🎜🎜🎜🎜🎜ng-click🎜🎜(선택 사항)🎜🎜🎜🎜expression🎜🎜🎜일반적으로 클릭하면 탭이 선택됩니다. ng-Click이 설정되어 있으면 선택되지 않습니다. $ionicTabsDelegate.select()를 사용하여 전환 탭을 지정할 수 있습니다. 🎜🎜🎜🎜🎜$ionicTabsDelegate
ionTabs 명령 제어를 승인합니다.
이 메서드는 $ionicTabsDelegate 서비스를 직접 호출하여 모든 ionTabs 명령을 제어합니다. 특정 ionTabs 인스턴스를 제어하려면 $getByHandle 메서드를 사용하세요.
Usage
function MyCtrl($scope, $ionicTabsDelegate) {
$scope.selectTabWithIndex = function(index) {
$ionicTabsDelegate.select(index);
}
}select(index, [shouldChangeHistory])
Method
selectedIndex()
주어진 인덱스와 일치하는 태그를 선택하세요.
| Parameters | Type | Details |
|---|---|---|
| index | Value数值 | 选择标签的索引。 |
| shouldChangeHistory (可选) | 布尔值 | 此选项是否应该加载这个标签的浏览历史（如果存在），并使用，或仅加载默认页面。默认为false。提示：如果一个 |
$getByHandle(handle)
返回值: 数值, 被选中标签的索引，如 -1。
$ionicTabsDelegate.$getByHandle('my-handle').select(0);| 参数 | 类型 | 详情 |
|---|---|---|
| handle | 字符串 | 태그의 인덱스를 선택하세요. |
(선택 사항)
boolean🎜🎜🎜이 옵션이 이 탭의 검색 기록을 로드할지 여부(존재하는 경우), 사용하거나 기본 페이지를 로드하면 됩니다. 기본값은 거짓입니다. 팁: ion-nav-view가 탭에 있는 경우 이를 true로 설정해야 할 수도 있습니다. 🎜🎜🎜🎜🎜rrreee🎜반환 값: 값, 선택한 태그의 인덱스(예: -1). 🎜rrreee
