ionic基础.docx

ionic基础1.标题与副标题 <div class="bar bar-header"> <h1 class="title">Header</h1> </div> <div class="bar bar-subheader"> <h2 class="title">Sub Header</h2> </div> 效果如下： 2.底部兰 <div class="bar bar-footer bar-balanced"> <div class="title">Footer</div> </div> 效果如下： 3.button键 <div class="bar bar-header"> <button class="button"></button> <h1 class="title">Header Buttons</h1> <button class="button">Edit</button> </div> 效果如下： 4. 一行多个button <div class="button-bar bar-assertive"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a> </div> 效果如下： 5.带button的list <div class="list" <div class="item item-button-right"> Call Ma <button class="button button-positive"> <i class="icon ion-ios-telephone"></i> </button> </div> </div> 效果如下： 6.缩略图列表 <div class="list"> <a class="item item-thumbnail-left" href="#"> <img src=" <h2>Weezer</h2> <p>Blue Album</p> </a></div> 效果如下： 7.ionic卡片 <div class="bar bar-header"> <div class="h1 title">卡片</div> </div> <div class="content has-header"> <div class="card"> <div class="item item-text-wrap"> 这里是卡片内容。<br> 这里是卡片内容。<br> 这里是卡片内容。 </div> </div> 效果如下： 8.卡片 头部与底部 <div class="content has-header"> <div class="card"> <div class="item item-divider"> 卡片头部！ </div> <div class="item item-text-wrap"> 基本卡片，包含了文本信息。 </div> <div class="item item-divider"> 卡片底部！ </div> </div> 效果如下： 9输入框：欲输入表单 <div class="bar bar-header"> <div class="h1 title">预输入标签</div> </div> <div class="content has-header"> <div class="list"> <label class="item item-input"> <input type="text" placeholder="First Name"> </label> <label class="item item-input"> <input type="text" placeholder="Last Name"> </label> <label class="item item-input"> <textarea placeholder="Comments"></textarea> </label> </div> <div class="padding"> <button class="button button-block button-positive">Submit</button> </div> </div> 效果如下：可在里面输入内容 10.用户名和密码登录 <div class="content has-header"> <div class="list"> <label class="item item-input"> <span class="input-label">用户名：</span> <input type="text"> </label> <label class="item item-input"> <span class="input-label">密码：</span> <input type="password"> </label> </div> <div class="padding"> <button class="button button-block button-positive">登录</button> </div> </div> 效果如下： 11.堆叠标签 <div class="content has-header"> <div class="list"> <label class="item item-input item-stacked-label"> <span class="input-label">First Name</span> <input type="text" placeholder="John"> </label> <label class="item item-input item-stacked-label"> <span class="input-label">Last Name</span> <input type="text" placeholder="Suhr"> </label> <label class="item item-input item-stacked-label"> <span class="input-label">Email</span> <input type="text" placeholder="john"> </label> </div> <div class="padding"> <button class="button button-block button-positive">Create Account</button> </div> </div> 效果如下： 12.浮动标签，跟堆叠标签看着类似，但浮动标签有一个动画的效果，每个选项需要指定 item-floating-label 类，输入标签需要指定 input-label。 <div class="content has-header"> <div class="list"> <label class="item item-input item-floating-label"> <span class="input-label has-input">First Name</span> <input type="text" placeholder="First Name"> </label> <label class="item item-input item-floating-label"> <span class="input-label">Last Name</span> <input type="text" placeholder="Last Name"> </label> <label class="item item-input item-floating-label"> <span class="input-label">Email</span> <input type="text" placeholder="Email"> </label> </div> <div class="padding"> <button class="button button-block button-positive">Create Account</button> </div> </div> 效果如下： 13.内嵌表单 <div class="content has-header"> <div class="list list-inset"> <label class="item item-input"> <input type="text" placeholder="First Name"> </label> <label class="item item-input"> <input type="text" placeholder="Last Name"> </label> </div> <div class="padding"> <button class="button button-block button-positive">Submit</button> </div> </div> 效果如下： 14.搜索输入框 <div class="bar bar-header item-input-inset"> <label class="item-input-wrapper"> <i class="icon ion-ios-search placeholder-icon"></i> <input type="search" placeholder="搜索"> </label> <button class="button button-clear"> 取消 </button> </div> 效果如下： 15.切换按钮 <ul class="list"> <li class="item item-toggle"> HTML5 <label class="toggle toggle-positive"> <input type="checkbox" checked=""> <div class="track"> <div class="handle"></div> </div> </label> </li> <li class="item item-toggle"> CSS3 <label class="toggle toggle-calm"> <input type="checkbox" checked=""> <div class="track"> <div class="handle"></div> </div> </label> </li> <li class="item item-toggle"> Flashplayer <label class="toggle toggle-balanced"> <input type="checkbox"> <div class="track"> <div class="handle"></div> </div> </label> </li> 效果如下： 16.复选框 <ul class="list"> <li class="item item-checkbox"> <label class="checkbox"> <input type="checkbox" checked=""> </label> Flux Capacitor </li> <li class="item item-checkbox"> <label class="checkbox"> <input type="checkbox" checked=""> </label> 1.21 Gigawatts </li> <li class="item item-checkbox"> <label class="checkbox"> <input type="checkbox" checked=""> </label> Delorean </li> 17.ionic select <div class="bar bar-header"> <div class="h1 title">Select</div> </div> <div class="content-wrapper"> <div class="content has-header"> <div class="list"> <div class="item item-input item-select"> <div class="input-label"> Lightsaber </div> <select> <option>Blue</option> <option selected="">Green</option> <option>Red</option> </select> </div> </div> </div></div> 18.ionic tab(选项卡) <div class="bar bar-header"> <div class="h1 title">选项卡</div> </div> <div class="tabs"> <a class="tab-item" href="#">主页</a> <a class="tab-item" href="#">收藏</a> <a class="tab-item" href="#">设置</a> </div> 效果如下：主页、收藏、设置可点击