ionic-CSS:ionic tab(选项卡)
2024-10-07 20:14:22
ylbtech-ionic-CSS:ionic tab(选项卡) |
1.返回顶部 |
1、
ionic tab(选项卡)
ionic tab(选项卡) 是水平排列的按钮或者链接,用以页面间导航的切换。它可以包含文字和图标的组合,是一种移动设备上流行的导航方法。
以下选项卡容器使用了 tabs 类,每个选项卡使用 tab-item 类。默认情况下,选项卡是文本的,并没有图标。
实例
<div class="tabs">
<a class="tab-item">
主页
</a>
<a class="tab-item">
收藏
</a>
<a class="tab-item">
设置
</a>
</div>
默认情况,选项卡颜色为默认,你可以设置以下不同颜色样式:tabs-default ,tabs-light ,tabs-stable ,tabs-positive ,tabs-calm ,tabs-balanced ,tabs-energized ,tabs-assertive ,tabs-royal ,tabs-dark。
要隐藏选项卡栏,可使用 tabs-item-hide 类。
图标选项卡
在 tabs 类后添加 tabs-icon-only 类可设置只显示图标选项卡。
<div class="tabs tabs-icon-only">
<a class="tab-item">
<i class="icon ion-home"></i>
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
</a>
</div>
顶部图标+文字选项卡
在 tabs 类后添加 tabs-icon-top 类可设置顶部图标+文字选项卡。
<div class="tabs tabs-icon-top">
<a class="tab-item" href="#">
<i class="icon ion-home"></i>
主页
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
收藏
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
设置
</a>
</div>
左侧图标+文字选项卡
在 tabs 类后添加 tabs-icon-left 类可设置左侧图标+文字选项卡。
<div class="tabs tabs-icon-left">
<a class="tab-item">
<i class="icon ion-home"></i>
主页
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
收藏
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
设置
</a>
</div>
条纹样式选项卡
可以在带有 tabs 的样式名的元素上添加 tabs-striped 来实现像 Android 风格的 tabs。也可以添加 tabs-top 来实现选项卡在页面顶部。
条纹选项卡颜色可通过 tabs-background-{color} 和 tabs-color-{color} 来控制, {color} 值可以是:default, light, stable, positive, calm, balanced, energized, assertive, royal, 或 dark。
注意:如果要再选项卡上设置头部标题,需要使用 has-tabs-top 类。
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
<div class="tabs-striped tabs-color-assertive">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
运行效果如下:
2、
2.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
1、
2、
6.返回顶部 |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
最新文章
- boost强分类器的实现
- 在react native用到的javascript 的一些关键知识(整理中)
- android 开发:shape和selector和layer-list的(详细说明)
- android gridview画分割线,如图:
- shell 生成指定范围随机数与随机字符串 .
- TCP 监控工具 TCPMonitor
- Android之LinkedHashMap实现LRU
- Spring Boot2.0使用Spring Security
- xcode8 使用Instruments检测定位并解决iOS内存泄露
- Rsync 常见错误及解决方法
- Linux内核第七节 20135332武西垚
- SDRAM学习笔记(二)
- 对团队项目的NABCD的分析
- Linux下MySQL开放root的远程访问权限
- MyEclipse持续性开发教程:用JPA和Spring管理数据(二)
- [UE4]C++实现动态加载UObject:StaticLoadObject();以Texture和Material为例
- jbpm(流程管理)
- Java 获取当前时间前一个小时的时间
- 在CMD下如何搜索某个名字的文件?
- codevs 5965 [SDOI2017]新生舞会
热门文章
- Unity Log Path
- 基础(一):SCSI硬盘与IDE硬盘有什么区别
- Sqli labs系列-less-2 详细篇
- 杂项-笔记-VS:VS2019笔记
- 2.2 webpack
- spring boot下WebSocket消息推送
- vmvare下centos7配置静态ip
- Keepalived 双主虚拟路由配置实例
- spring boot jpa 多表关联 @OneToOne @OneToMany @ManyToOne@ManyToMany
- java中equse和==做比较记录(转)