Ionic3X笔记之CSS组件

Ionic提供的几种颜色：
   light default secondary danger dark

   <ion-content padding>
      <!-- ionic提供了5中颜色 -->
      <!-- light   default   secondary    danger    dark -->
      <button ion-button block>按钮</button>
      <button ion-button block color='danger'>按钮</button>
      <button ion-button block color="dark">按钮</button>
      <button ion-button block color="secondary">按钮</button>
      <button ion-button block color="light">按钮</button>
    </ion-content>

ionic 中的按钮 加 ion-button 属性：
   ion-button 定义一个按钮的属性   
   <button ion-button>按钮</button>
   color="secondary" 定义一个按钮的颜色
   block 属性定义一个块状按钮

ion-button 里面可以放图标：
    ion-button 同级属性 icon-left icon-right icon-only clear
    <button ion-button icon-right>
       Right Icon
       <ion-icon name="home"></ion-icon>
    </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>

      <button ion-button icon-right>
        首页
        <ion-icon name="arrow-forward"></ion-icon>
      </button>

      <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>

    http://ionicframework.com/docs/ionicons/
    name="heart" 图标的名称
    color="secondary" 图标的颜色
    改变图标的大小只需要改对应的 css 就可以用到:font-size 属性


ionic 中的列表:

    基本列表:ion-list

    <ion-content padding>
          <ion-list >
            <ion-item>
                    <ion-thumbnail item-start>
                        <img src="./assets/icon/1.png">
                    </ion-thumbnail>
                    <h2>My Neighbor Totoro</h2>
                    <p>Hayao Miyazaki • 1988</p>
            </ion-item>

            <ion-item>
                    <ion-thumbnail item-start>
                        <img src="./assets/icon/2.png">
                    </ion-thumbnail>
                    <h2>My Neighbor Totoro</h2>
                    <p>Hayao Miyazaki • 1988</p>
            </ion-item>
        </ion-list>
    </ion-content>

    分组列表:ion-item-divider:
      <ion-list>
        <ion-item-divider color="light">A</ion-item-divider>//第一组
        <ion-item>Angola</ion-item>
        <ion-item>Argentina</ion-item>
        <ion-item>Angola</ion-item>
        <ion-item>Argentina</ion-item>
        <ion-item-divider color="secondary">B</ion-item-divider>//第二组
        <ion-item>Bngola</ion-item>
        <ion-item>Brgentina</ion-item>
        <ion-item>Bngola</ion-item>
        <ion-item>Brgentina</ion-item>
      </ion-list>

    列表中的图标：ion-icon
      item-start 属性: 开头显示
      item-end 属性: 结尾显示

      <ion-list>
        <ion-item>
          <ion-icon name="leaf" item-start></ion-icon>
          Herbology
          <ion-icon name="rose" item-end></ion-icon>
        </ion-item>
      </ion-list>

   右侧箭头：
       <ion-list>
         <ion-item *ngFor="let item of items;let key=index" [ngClass]="{'red':key==0}">
           {{ item }}
           <ion-icon name="ios-arrow-forward" item-end></ion-icon>
         </ion-item>
       </ion-list>

   列表中的头像 ion-avatar：
      item-start 属性: 开头显示
      item-end 属性: 结尾显示

      <ion-item>
         <ion-avatar item-start>
           <img src="img/avatar-cher.png">
         </ion-avatar>
         <h2>Cher</h2>
         <p>Ugh. As if.</p>
       </ion-item>


   列表中的图片 ion-thumbnail：

   徽章的列表 ion-badge：

   滑动的列表：
      滑动列表就是在对应的列表上面滑动可以出现对应的按钮，通过:ion-item-sliding 实现
      基本格式：
        <ion-list>
          <ion-item-sliding>
            <ion-item>
              数据
            </ion-item>
            <ion-item-options side='left'>//向左滑
              <button ion-button> //按钮里面也可以加图标
                分享
              </button>
              <button ion-button>
                收藏
              </button>
            </ion-item-options>
          </ion-item-sliding>
        </ion-list>


表单：
   <ion-content>

     <!--<ion-list>-->
       <!--<ion-item>-->
         <!--<ion-label fixed>用户名</ion-label>-->
         <!--<ion-input type="input"></ion-input>-->
       <!--</ion-item>-->
       <!--<ion-item>-->
         <!--<ion-label fixed>密码</ion-label>-->
         <!--<ion-input type="password"></ion-input>-->
       <!--</ion-item>-->
       <!--<ion-item>-->
         <!--<ion-label>记住密码</ion-label>-->
         <!--<ion-toggle checked="false"></ion-toggle>-->
       <!--</ion-item>-->
     <!--</ion-list>-->

     <ion-list>
       <ion-item>
         <ion-input type="input" placeholder="用户名"></ion-input>
       </ion-item>
       <ion-item>
         <ion-input type="password" placeholder="密码"></ion-input>
       </ion-item>
     </ion-list>
     <button ion-button block>登录</button>
   </ion-content>


栅格系统：
    <ion-content>
        <div class="list">//自定义class
          <ion-row>
              <ion-col col-3><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
              <ion-col col-3><ion-icon name="logo-angular"></ion-icon></ion-col>
              <ion-col col-3><ion-icon name="heart" color="danger"></ion-icon></ion-col>
              <ion-col col-3><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>

              <ion-col col-3><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
              <ion-col col-3><ion-icon name="people"></ion-icon></ion-col>
              <ion-col col-3><ion-icon name="person"></ion-icon></ion-col>
              <ion-col col-3><ion-icon name="contact"></ion-icon></ion-col>

              <ion-col col-3><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
              <ion-col col-3><ion-icon name="logo-angular"></ion-icon></ion-col>
              <ion-col col-3><ion-icon name="heart" color="danger"></ion-icon></ion-col>
              <ion-col col-3><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>

              <ion-col col-3><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
              <ion-col col-3><ion-icon name="people"></ion-icon></ion-col>
              <ion-col col-3><ion-icon name="person"></ion-icon></ion-col>
              <ion-col col-3><ion-icon name="contact"></ion-icon></ion-col>
          </ion-row>
        </div>
    </ion-content>