ionic icon(图标) ionic 也默认提供了许多的图标，大概有 700 多个，针对 Android 和 iOS 有不同的样式。 Ionic icons 官网: http://ionicons.com/ 国内图标样式 CDN 地址：https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css。 用法也非常的简单，由一个 icon 类及指定图标类组成，如： 实例 <i class=“icon ion-star“></i> <i class = “icon ion-happy-outline“></i> <i class = “icon ion-ios-analytics“></i> <i class = “icon ion-ios-eye“></i> 我们可以通过 font-size 来设置图片的大小： 实例 .icon {…
ionic 颜色 ionic 提供了很多颜色的配置，当然你可以根据自己的需要自定义颜色。 实例 <ul class=“list color-list-demo“> <li class=“item dark“> light <span class=“color-demo light-bg light-border“></span> </li> <li class=“item stable-dark“> stable <span class=“color-demo stable-bg stable-border“></span> </li> <li class=“item positive“> positive <span class=“color-demo positive-bg positive-border“></span> </li> <li class=“item calm“> calm <span class=“color-demo calm-bg calm-border“></span> </li> <li…
ionic 网格(Grid) ionic 的网格(Grid)和其他大部分框架有所不同，它采用了弹性盒子模型(Flexible Box Model) 。而且在移动端，基本上的手机都支持。row 样式指定行，col 样式指定列。 同等大小网格 在带有 row 的样式的元素里如果包含了 col 的样式，col 就会设置为同等大小。 以下实例中 row 的样式包含了 5 个 col 样式，每个 col 的宽度为 20%。 <div class=”row”> <div class=”col”>.col</div> <div class=”col”>.col</div> <div class=”col”>.col</div> <div class=”col”>.col</div> <div class=”col”>.col</div> </div> 尝试一下 » 指定列宽 你可以设定一行中各个列的大小不一样。默认情况下，列都会被划分为同等大小。但你也可以按百分比来设置列的宽度（一行为 12 个网格）。…
ionic tab(选项卡) ionic tab(选项卡) 是水平排列的按钮或者链接，用以页面间导航的切换。它可以包含文字和图标的组合，是一种移动设备上流行的导航方法。 以下选项卡容器使用了 tabs 类，每个选项卡使用 tab-item 类。默认情况下，选项卡是文本的，并没有图标。 实例 <div class=”tabs”> <a class=”tab-item”> 主页 </a> <a class=”tab-item”> 收藏 </a> <a class=”tab-item”> 设置 </a> </div> 尝试一下 » 默认情况，选项卡颜色为默认，你可以设置以下不同颜色样式：tabs-default ，tabs-light ，tabs-stable ，tabs-positive ，tabs-calm ，tabs-balanced ，tabs-energized ，tabs-assertive ，tabs-royal ，tabs-dark。 要隐藏选项卡栏，可使用 tabs-item-hide 类。 图标选项卡 在 tabs 类后添加…
ionic select ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。 每个平台上的可选项样式都是不一样的，在PC电脑的浏览器上，你会看到传统的下拉界面，Android 上会弹出单选按钮选项，iOS 有个滚轮操作界面。 实例 <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 class=”item item-input item-select”> <div class=”input-label”> Fighter </div> <select> <option>ARC-170</option> <option>A-wing</option> <option>Delta-7</option> <option>Naboo N-1</option> <option>TIE</option> <option selected=””>X-wing</option>…
ionic Range ionic Range 是一个滑块控件，ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。 实例 <div class=”range”> <i class=”icon ion-volume-low”></i> <input type=”range” name=”volume”> <i class=”icon ion-volume-high”></i> </div> <div class=”list” style=”margin-top: 13px”> <div class=”item item-divider”> Ranges In A List </div> <div class=”item range range-positive”> <i class=”icon ion-ios-sunny-outline”></i> <input type=”range” name=”volume”…
ionic 单选框 ionic 单选按钮与标准 type=”radio” 的 input元素类似。以下展示了现代app类型的单选按钮。 每个 item-radio 中的 type=”radio” 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。 ionic 在单选项中使用了 <label> 元素，使其更易点击。 实例 <div class=“list“> <label class=“item item-radio“> <input type=“radio“ name=“group“ value=“go“ checked=“checked“> <div class=“radio-content“> <div class=“item-content“> Go </div> <i class=“radio-icon ion-checkmark“></i> </div> </label> <label class=“item…
ionic checkbox（复选框） ionic 里面的 Checkbox 和普通的 Checkbox 效果上其实相差不大，只是样式上有所不同。 以下实例演示了多个复选框的列表。 注意，每个选项的 item 类后需要添加 item-checkbox 类。 复选框可以使用 checkbox-assertive 来指定颜色。 <ul class=”list”> <li class=”item item-checkbox”> <label class=”checkbox”> <input type=”checkbox”> </label> Flux Capacitor </li> … </ul> 尝试一下 » 运行效果如下：
ionic Toggle(切换开关) 切换开关类似与 HTML 的 checkbox 标签，但它更易于在移动设备上使用。 切换开关可以使用 toggle-assertive 来指定颜色。 <label class=”toggle”> <input type=”checkbox”> <div class=”track”> <div class=”handle”></div> </div> </label> 该实例有是多个切换开关列表。注意，每个选项的 item 类后需要添加 item-toggle 类。 <ul class=”list”> <li class=”item item-toggle”> HTML5 <label class=”toggle toggle-assertive”> <input type=”checkbox”> <div class=”track”> <div class=”handle”></div> </div> </label> </li> … </ul>…
ionic 表单和输入框 list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。 输入框属性：placeholder 以下实例中，默认为100%宽度（左右两侧没有边框），并使用 placeholder 属性设置输入字段预期值的提示信息。 <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> 尝试一下 » 输入框属性：input-label 使用 input-label 将标签放置于输入框 input…