ionic 选项卡栏操作(一)
【摘要】 ion-tabsion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航栏下面)。用法实例<ion-tabs class="tabs-positive tabs-icon-only"> <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="...
ion-tabs
ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。
对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航栏下面)。
用法
实例
<ion-tabs class="tabs-positive tabs-icon-only"> <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> <!-- 标签 1 内容 --> </ion-tab> <ion-tab title="关于" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> <!-- 标签 2 内容 --> </ion-tab> <ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> <!-- 标签 3 内容 --> </ion-tab> </ion-tabs>
尝试一下 »
效果如下所示:
API
属性 | 类型 | 详情 |
---|---|---|
delegate-handle
(可选)
|
字符串 |
该句柄用 |
ion-tab
隶属于ionTabs
包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。
每个ionTab都有自己的浏览历史。
用法
<ion-tab
title="Tab!"
icon="my-icon"
href="#/tab/tab-link"
on-select="onTabSelected()"
on-deselect="onTabDeselected()">
</ion-tab>
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)