ionic学习（5）：颜色拓展、修改头部颜色、按钮button演

1. 先建一个新的demo

    sudo ionic start threeDemo tabs

---

2. ionic提供了5中颜色

 light   default   secondary    danger    dark 

但是这5中颜色是不够用的，我们可以在公共的类里面封装自己的颜色

ionic颜色封装位置
所以可以在这个$colors里面封装其它的你需要的颜色
这里给个颜色表网站，可以在这里面选择选几个颜色进行试验： 颜色表及html代码
添加几个颜色就可以用了
下面我们在项目中用我们封装的颜色把

---

3. 修改头部颜色，创建一个ioncolor页面，把头部改成闪光绿（原谅绿），创建页面和页面引入注册等就不说了。

   
   修改头部颜色
   image.png

没错就是这么丑的颜色，哈哈哈，自己调把

---

4. button演示
   代码：

<!-- padding 和上下左右有间距 -->
<ion-content padding>
    <!-- ion-button同级属性  color   block   full   icon-left   icon-right   icon-only   clear -->
    <button ion-button>普通的ionic按钮</button>
    <button ion-button color="dark">普通的ionic按钮</button>
    <button ion-button block>block块状按钮</button>
    <button ion-button full>full全屏按钮</button>
    <br>
    <ion-icon name="home"></ion-icon>
    <!-- 按钮图标在左侧 -->
    <button ion-button icon-left>
        <ion-icon name='home'></ion-icon>
        首页
    </button>
    <br>
    <br>
    <button ion-button icon-right>
        首页
        <ion-icon name="arrow-forward"></ion-icon>
    </button>
    <br>
    <br>
    <button ion-button icon-only>
        <ion-icon name='home'></ion-icon>
    </button>
    <!-- clear 不想要按钮图标的背景 -->
    <button ion-button icon-only clear>
        <ion-icon name='home'></ion-icon>
    </button>
</ion-content>

button演示