ionic——入门

一、ionic的简介：ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。ionic会是一个可以信赖的框架。

ionic引用的文件：大概需要两种这样的文件

 <link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css">//js文件夹下的lib文件下的文件
    <script src="js/lib/ionic1/js/ionic.bundle.min.js"></script>

注意 注意：还必须要写上

 <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

移动端开发，页面上的样式基本上是固定的，ionic一般有以下的内容：

首先是页头：

    .bar : 工具栏样式
         .bar-header： 页头工具栏样式
         .bar-positive：工具栏颜色样式
         .title：设置标题

页头的代码内容：

 <div class="bar bar-header bar-positive">
        <h1 class="title">页面头部</h1>
    </div>

          其次是内容：

    .scroll-content：设置页面内容
          .has-header：界面中是否包含页头

内容的代码：

   <div class="scroll-content has-header">
        页面内容
    </div>

最后是页脚：

    .bar-footer： 页脚
         .bar-dark：工具栏颜色样式

页脚的代码：

<div class="bar bar-footer bar-dark">
        <h1 class="title">页面底部</h1>
    </div>

二、移动端开发过程中，内容主要显示在页头和页脚中间用于浏览的视图工具

ionic关于内容的处理，主要提供了两个样式：

1 .content 样式，是使用相对定位来进行内容处理的，它一般使用在内容不需要滚动的情况下

2 .scroll-content 样式，是使用绝对定位来进行内容处理的，、 通常情况下用在页面的内容需要滚动展示的情况下

关于内容的展示，会出现以下的问题:

1、某些app包含页面头部，某些app不包含页面头部

解决问题：

  .has-header 样式：用于内容设置top来排除页头占用的空间
        .has-subheader 样式：用于内容设置top来排序副标题占用的空间

代码为例：

  <!-- 页头 -->
    <div class="bar bar-header bar-assertive">
        <h1 class="title">页头标题部分</h1>i
    </div>
    <div class="bar bar-subheader">页头副标题</div>

    <div class="scroll-content has-header has-subheader">
        页面内容部分
    </div>

    <!-- 页脚 -->
    <div class="bar bar-footer bar-dark">
        <h1 class="title">页脚内容</h1>

三、按钮

.button是主要展示button的外观。

1、button-bar 是一个button的集合，主要用于二级标题的选项

代码为例;

 <div class="button-bar">
            <button style="background-color:orange" class="button button-positive">新闻</button>
            <button class="button">娱乐</button>
            <button class="button">影视</button>
            <button class="button">科技</button>
        </div>

           2、常规按钮

代码为例;

-<div class="button">默认</div>
        <div class="button button-light">常规</div>
        <div class="button button-stable">标准</div>
        <div class="button button-positive">蓝色</div>
        <div class="button button-calm">浅蓝色</div>
        <div class="button button-balanced">绿色</div>
        <div class="button button-energized">橙色</div>
        <div class="button button-assertive">红色</div>
        <div class="button button-royal">紫色</div>
        <div class="button button-dark">深色</div>

        3、块按钮

代码为例：

    <button class="button button-royal button-block">登录</button>  //填充但是有border-riadus
       <button class="button button-royal button-full">注册</button>   //填充没有border-radius

       4、按钮尺寸

代码为例：

     <button class="button button-royal button-small">微小按钮</button>
        <button class="button button-royal">常规按钮</button>
        <button class="button button-royal button-large">较大按钮</button>

      5、特殊按钮

代码为例：

     <button class="button button-royal button-outline">较大按钮</button> //按钮有边框
        <button class="button button-royal button-clear">无样式按钮</button> //按钮没有背景颜色

     6、图标按钮

   ionic图标使用：  icon ion-<图标名称> icon-left/right
                                         icon 要使用图标样式
                               ion-<图标名称> 要使用的是哪个图标
                                .icon-left/right 图标显示在内容的左边/右边
    ionic常见图标样式：

  .icon ion-loading:表示加载中的图标
     .icon ion-home : 表示首页的图标
      .icon ion-star: 五角星，关注的图标
      .icon ion-chevron-right 向右箭头图标
      .icon ion-chevron-left 向左箭头图标
     .icon ion-navicon 更多，三条横线的一个图标

代码为例：

  <button class="button icon-left ion-home">
            HOME
        </button>
        <button class="button icon-left ion-star button-assertive">
            Favorite
        </button>
        <button class="button icon-right ion-chevron-right button-calm">
            Learn More
        </button>
        <button class="button icon-left ion-chevron-left button-clear button-dark">
            Back
        </button>
        <button class="button icon ion-gear-a"></button>
        <button class="button button-icon icon ion-settings"></button>
        <a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>

四、列表

    列表：主要操作页面中显示的内容

1、基础列表：

代码为例：

   <div class="scroll-content has-header has-subheader" style="overflow-y: scroll">
        <div class="list">
            <div class="item">萨德黑科技，看到之后开心的笑了...</div>
            <div class="item">震惊！震惊！震惊！郑州...</div>
            <div class="item">中国航母下海，上海第一架国产大飞机上天，一分钟查看所有详情</div>
            <div class="item">萨德黑科技，看到之后开心的笑了...</div>
            <div class="item">震惊！震惊！震惊！郑州...</div>
            <div class="item">中国航母下海，上海第一架国产大飞机上天，一分钟查看所有详情</div>
            <div class="item">萨德黑科技，看到之后开心的笑了...</div>
            <div class="item">震惊！震惊！震惊！郑州...</div>
            <div class="item">中国航母下海，上海第一架国产大飞机上天，一分钟查看所有详情</div>
            <div class="item">萨德黑科技，看到之后开心的笑了...</div>
            <div class="item">震惊！震惊！震惊！郑州...</div>
            <div class="item">中国航母下海，上海第一架国产大飞机上天，一分钟查看所有详情</div>
        </div>
       </div>

2、列表分组：

代码为例：

  <div class="scroll-content has-header has-subheader" style="overflow-y: scroll">
-<div class="list">
            <div class="item-divider">国内新闻</div>
            <div class="item">国内新闻详情详情详情详情详情详情详情详情详情详情详情</div>
            <div class="item">国内新闻详情详情详情详情详情详情详情详情详情详情详情</div>
            <div class="item">国内新闻详情详情详情详情详情详情详情详情详情详情详情</div>
            <div class="item">国内新闻详情详情详情详情详情详情详情详情详情详情详情</div>
            <div class="item">国内新闻详情详情详情详情详情详情详情详情详情详情详情</div>
            <div class="item">国内新闻详情详情详情详情详情详情详情详情详情详情详情</div>
            <div class="item-divider">国际新闻</div>
            <div class="item">国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻</div>
            <div class="item">国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻</div>
            <div class="item">国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻</div>
            <div class="item">国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻</div>
            <div class="item">国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻</div>
            <div class="item">国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻国际新闻</div>
        </div>

      模仿手机;

代码为例：

<div class="list">
            <div class="item-divider">设置</div>
            <div class="item">字体设置</div>
            <div class="item">颜色设置</div>
            <div class="item-divider">通用</div>
            <div class="item">关于我们</div>
            <div class="item">软件更新</div>
            <div class="item-divider">中心</div>
            <div class="item">账户</div>
            <div class="item">预览</div>
            <div class="item">扫描</div>
        </div>

3、列表中使用图标：

   list->item-> 通过设置item-icon-left/right让图标显示在内容的左边或者右边

代码为例：

-<div class="list">
            <a class="item item-icon-left" href="#">                        //图标在左边
                <i class="icon ion-email"></i>                              //用的是邮件图标
                个人邮箱
            </a>
            <a class="item item-icon-left item-icon-right" href="#">       //图标在右边 左边 可以有两个图标
                <i class="icon ion-chatbubble-working"></i>
                通知
                <i class="icon ion-ios-telephone-outline"></i>
            </a>
            <a class="item item-icon-left" href="#">
                <i class="icon ion-mic-a"></i>
                语音设置
                <span class="item-note">设置细节</span>
            </a>
            <a class="item item-icon-left" href="#">
                <i class="icon ion-person-stalker"></i>
                朋友圈
                <span class="badge badge-dark">10</span>                  //显示未读的10条信息
            </a>
        </div> -->
       

4、列表中使用按钮：

  list->item-> item-button-left/right 让按钮显示在内容的左边/右边

<div class="list">
            <div class="item item-button-right">
                通知我
                <button class="button button-light">
                    <i class="icon ion-ios-telephone"></i>
                </button>
            </div>
        </div>

5、列表中使用头像：

      ionic为了专门显示用户头像【项目中常规显示头像的方式是椭圆显示】
            item-avatar用于指定内部出现的图片使用border-radius进行了处理的

代码为例：

<div class="list">
            <a class="item item-avatar" href="#">
                <img src="http://img2.imgtn.bdimg.com/it/u=4058726744,3828892678&fm=11&gp=0.jpg">
                <h2>大牧</h2>
                <p>道友最近去哪里云游了？</p>
            </a>
            <a class="item item-avatar" href="#">
                <img src="http://img2.imgtn.bdimg.com/it/u=4058726744,3828892678&fm=11&gp=0.jpg">
                <h2>大牧</h2>
                <p>道友最近去哪里云游了？</p>
            </a>
        </div>

6、列表中处理图片：

        item-thumbnail-left 用于处理图片显示在内容的左侧

代码为例：

<div class="list">
            <a class="item item-thumbnail-left" href="#">
                <img src="http://img2.imgtn.bdimg.com/it/u=1545067654,2257507606&fm=11&gp=0.jpg">
                <h2>关于萨德那些事儿</h2>
                <p>最近萨德很狗血，不过很开心有木有</p>
            </a>
            <a class="item item-thumbnail-left" href="#">
                <img src="http://img5.imgtn.bdimg.com/it/u=2145497508,3488926461&fm=11&gp=0.jpg">
                <h2>又是脚臭盐</h2>
                <p>哪里还有放心盐呢？</p>
            </a>
        </div>

6、内嵌列表：

列表使用list-inset样式修饰即可

代码为例：

 <div class="list list-inset">
            <a class="item item-thumbnail-left" href="#">
                <img src="http://img2.imgtn.bdimg.com/it/u=1545067654,2257507606&fm=11&gp=0.jpg">
                <h2>关于萨德那些事儿</h2>
                <p>最近萨德很狗血，不过很开心有木有</p>
            </a>
            <a class="item item-thumbnail-left" href="#">
                <img src="http://img5.imgtn.bdimg.com/it/u=2145497508,3488926461&fm=11&gp=0.jpg">
                <h2>又是脚臭盐</h2>
                <p>哪里还有放心盐呢？</p>
            </a>
        </div>

五、卡片

类似列表，比列表的样式更加优雅

代码为例：

  <div class="scroll-content has-header has-subheader" style="overflow-y: scroll">
<div class="card">
            <div class="item-divider item-text-wrap">分组 模拟卡片的标题</div>
            <div class="item item-text-wrap">
                卡片内容
            </div>
            <div class="item-divider">分组 模拟卡片的脚注</div>
        </div>
        <div class="card">
            <div class="item-divider">分组 模拟卡片的标题</div>
            <div class="item">
                卡片内容
            </div>
            <div class="item-divider">分组 模拟卡片的脚注</div>
        </div>
</div>

头像 卡片：

代码为例:

<div class="card">
            <div class="item item-avatar">
                <img src=""alt="">
                <h2>大牧莫邪</h2>
                <p>那些曾经的风花雪月</p>
            </div>
            <div class="item item-image">
                <img src="" alt="">
            </div>
            <div class="item item-icon-left assertive">
                <i class="icon ion-music-note"></i>
                开始倾听
            </div>
        </div>

六、1、表单

和用户交互最直接的一个控件

      代码为例：

   <div class="scroll-content has-header has-subheader" style="overflow-y: scroll">
<label class="item item-input">
                <input type="text" placeholder="请输入用户名!">
            </label>
            <label class="item item-input">
                <input type="password" placeholder="请输入密码!">
            </label>
            <label class="item item-input">
                <span class="input-label">ACCOUNT：</span>
                <input type="text" placeholder="please enter your account!">
            </label>
            <label class="item item-input">
                <span class="input-label">密码：</span>
                <input type="password" placeholder="确认密码!">
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">ACCOUNT：</span>
                <input type="text" placeholder="please enter your account!">
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">PASSWORD：</span>
                <input type="password" placeholder="please enter your password!">
            </label>
</div>

2、内嵌的表单:

 <div class="list list-inset">
                <label class="item item-input">
                    <i class="icon ion-person"></i>
                    <input type="text" placeholder="">
                </label>
                <label class="item item-input">
                    <i class="icon ion-key"></i>
                    <input type="text" placeholder="">
                </label>
            </div>

七、开关

切换开关类似与 HTML 的 checkbox 标签，但它更易于在移动设备上使用。

代码为例:

  <div class="scroll-content has-header has-subheader" style="overflow-y: scroll">
       <div class="list">
           <div class="item item-toggle">
               HTML课程
               <label class="toggle">
                   <input type="checkbox">
                   <div class="track">
                       <div class="handle"></div>
                   </div>
               </label>
          </div>
         </div>

八、选项卡

   选项卡，一般是出现在页面底部的一个导航

 <div class="tabs">
        <div class="tab-item">
            首页
        </div>
        <div class="tab-item">
            微淘
        </div>
        <div class="tab-item">
            购物车
        </div>
    </div>-->
    <div class="tabs tabs-icon-top">          //图标在上面
        <a class="tab-item">
            <i class="icon ion-home"></i>
            首页
        </a>
        <a  class="tab-item">
            <i class="icon ion-chatbox"></i>
            朋友
        </a>
        <a class="tab-item">
            <i class="icon ion-android-mail"></i>
            邮箱
        </a>
        <a class="tab-item">
            <i class="icon ion-person"></i>
            我的
        </a>
    </div>