各位观众老爷大家好,欢迎收看内裤总动员之程序猿的IT程序大讲堂,今天给大家根据上次的分享内容,ionic安装完后的继续。
今天呢就给大家介绍一下我们ionic创建的项目的文件内容的介绍啊,和给大家做一些小玩意。
首先我们先来看一下我们项目的文件路径和一些我们常用的文件。
那么接下来给大家介绍一下,我们如何找到我们所看到的页面,他们的位置在哪里?
首先我们来看第一页
那么 我们的第二个页面,想必大家也知道如何去找到了吧。没错了,我们接着看第二个选项的页面啊。
第三个页面,我直接放图了,老套路。
导航栏的更改方式
现在既然我们已经都知道我们每个页面的显示的html文件了,那么如何更改我们的导航栏呢。
下面我们来看一下这个文件。
这个文件就是我们的导航栏文件。
那么接下来我们就来看一下这个文件中如何定义的。
首先我们先看第一行,这个tabs标签就是把我们所有的导航栏都包裹在内,他算是一个大盒子,包裹导航栏的。
那么我们来看第一个导航栏。
第一个导航栏tab中包括一个属性 title, 他是标题的意思。
那么接着往下看,icon-off 这个是 未被选中时候的图标。这个什么意思呢,我们来看图片。
这个就是当我点击别的导航按钮的时候,我们这个第一个导航栏的图标的显示情况。这个就是未被选中时候的图标。
那么接着往下看啊,icon-on 这个是被选中时候的图标,这个就是当我们点击时所展示的图标。
现在呢,我就开始更改我的图标咯。
首先呢,ionic他有他的官方文档,在其中他有她自有的一些图标样式。官方图标链接地址
我们现在先更改一下图标试一下。
我随便选择一个小房子的图标啊,看到下面有一个类名叫 ion-home, 复制过来。
写在我们icon-on中,而off 我直接复制旁边的那个白色的房子的类名,并写入。
然后页面刷新看一下图标。
怎么样,现在明白如何更改导航栏的图标了吧。文字呢,直接在title的属性里面更改你想要的名字就哦了。所以关于导航栏的更改样式就先给大家介绍到这里啊。下一节我在给大家解释一些其他的属性。如有问题的可以踊跃撕逼啊。