内裤总动员之ionic的文件说明和导航栏的更改方式

各位观众老爷大家好,欢迎收看内裤总动员之程序猿的IT程序大讲堂,今天给大家根据上次的分享内容,ionic安装完后的继续。


今天呢就给大家介绍一下我们ionic创建的项目的文件内容的介绍啊,和给大家做一些小玩意。

首先我们先来看一下我们项目的文件路径和一些我们常用的文件。

项目文件结构

那么接下来给大家介绍一下,我们如何找到我们所看到的页面,他们的位置在哪里?

首先我们来看第一页


第一个页面


tab-dash

那么 我们的第二个页面,想必大家也知道如何去找到了吧。没错了,我们接着看第二个选项的页面啊。


tab/chats


tab-chats

第三个页面,我直接放图了,老套路。



这个就是我们的第三个页面了

导航栏的更改方式

现在既然我们已经都知道我们每个页面的显示的html文件了,那么如何更改我们的导航栏呢。

下面我们来看一下这个文件。


tabs.html

这个文件就是我们的导航栏文件。

那么接下来我们就来看一下这个文件中如何定义的。




tabs.html

首先我们先看第一行,这个tabs标签就是把我们所有的导航栏都包裹在内,他算是一个大盒子,包裹导航栏的。


那么我们来看第一个导航栏。

第一个导航栏tab中包括一个属性 title, 他是标题的意思。


title

那么接着往下看,icon-off 这个是 未被选中时候的图标。这个什么意思呢,我们来看图片。


icon-off

这个就是当我点击别的导航按钮的时候,我们这个第一个导航栏的图标的显示情况。这个就是未被选中时候的图标。

那么接着往下看啊,icon-on 这个是被选中时候的图标,这个就是当我们点击时所展示的图标。


icon-on

现在呢,我就开始更改我的图标咯。

首先呢,ionic他有他的官方文档,在其中他有她自有的一些图标样式。官方图标链接地址

我们现在先更改一下图标试一下。


ion-ios-home

我随便选择一个小房子的图标啊,看到下面有一个类名叫 ion-home, 复制过来。

写在我们icon-on中,而off 我直接复制旁边的那个白色的房子的类名,并写入。

ion-ios-home-outline

然后页面刷新看一下图标。



怎么样,现在明白如何更改导航栏的图标了吧。文字呢,直接在title的属性里面更改你想要的名字就哦了。所以关于导航栏的更改样式就先给大家介绍到这里啊。下一节我在给大家解释一些其他的属性。如有问题的可以踊跃撕逼啊。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,625评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,222评论 4 61
  • 生活总是有它的美,我们常常走丢,常常忘了。 生活有是很无奈,有时你会发现无奈算得了什么,最无奈...
    没有情绪的锄头阅读 1,111评论 1 1
  • 新生活
    树不语阅读 1,716评论 0 0