Category: 技术

Posted on

ionic 上拉菜单(ActionSheet) 上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。 非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。 实例 HTML 代码 <body ng-app=”starter” ng-controller=”actionsheetCtl” > <ion-pane> <ion-content > <h2 ng-click=”show()”>Action Sheet</h2> </ion-content> </ion-pane> </body> JavaScript 代码 在代码中触发上拉菜单，需要在你的 angular 控制器中使用 $ionicActionSheet 服务： angular.module(‘starter’, [‘ionic’]) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the…

Read More

Posted on

ionic 背景层 我们经常需要在 UI 上，例如在弹出框、加载框、其他弹出层中显示或隐藏背景层。 在组件中可以使用$ionicBackdrop.retain()来显示背景层，使用$ionicBackdrop.release()隐藏背景层。 每次调用retain后，背景会一直显示，直到调用release消除背景层。 实例 HTML 代码 <body ng-app=”starter” ng-controller=”actionsheetCtl” >     <ion-pane>      <ion-content >      <h2 ng-click=”action()”>$ionicBackdrop</h2>      </ion-content>     </ion-pane> </body> JavaScript 代码 angular.module(‘starter’, [‘ionic’]) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the…

Read More

Posted on

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

Read More

Posted on

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…

Read More

Posted on

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 类后添加…

Read More

Posted on

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 个网格）。…

Read More

Posted on

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

Read More

Posted on

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

Read More

Posted on

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…

Read More

Posted on

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

Read More