一个容器元素包含侧边菜单和主要内容通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换，下面我们就来说一说关于ionic入门教程?我们一起去了解并探讨一下这个问题吧!
ionic入门教程
一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换。
效果图如下所示：
用法
要使用侧栏菜单，添加一个父元素<ion-side-menus>，一个中间内容 <ion-side-menu-content>，和一个或更多 <ion-side-menu> 指令。
<ion-side-menus> <!-- 中间内容 --> <ion-side-menu-content ng-controller="ContentController"> </ion-side-menu-content> <!-- 左侧菜单 --> <ion-side-menu side="left"> </ion-side-menu> <!-- 右侧菜单 --> <ion-side-menu side="right"> </ion-side-menu> </ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) { $scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft(); }; }
尝试一下 »
API
| 属性 | 类型 | 详情 |
|---|---|---|
| enable-menu-with-back-views
(可选) | 布尔值 |
在返回按钮显示时，确认是否启用侧边栏菜单。 |
| delegate-handle | 字符串 | 该句柄用于标识带有$ionicScrollDelegate的滚动视图。 |
ion-side-menu-content
一个可见主体内容的容器，同级的一个或多个ionSideMenu 指令。
用法
<ion-side-menu-content drag-content="true"> </ion-side-menu-content>
API
| 属性 | 类型 | 详情 |
|---|---|---|
| drag-content
(可选) | 布尔值 |
内容是否可被拖动。默认为true。 |
ion-side-menu
一个侧栏菜单的容器，同级的一个ion-side-menu-content 指令。
用法
<ion-side-menu side="left" width="myWidthValue 20" is-enabled="shouldLeftSideMenuBeEnabled()"> </ion-side-menu>
API
| 属性 | 类型 | 详情 |
|---|---|---|
| side | 字符串 |
侧栏菜单当前在哪一边。可选的值有: 'left' 或 'right'。 |
| is-enabled
(可选) | 布尔值 |
该侧栏菜单是否可用。 |
| width
(可选) | 数值 |
侧栏菜单应该有多少像素的宽度。默认为275。 |
menu-toggle
在一个指定的侧栏中切换菜单。
用法
下面是一个在导航栏内链接的例子。点击此链接会自动打开指定的侧栏菜单。
<ion-view> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> ... </ion-view>
menu-close
关闭当前打开的侧栏菜单。
用法
下面是一个在导航栏内链接的例子。点击此链接会自动打开指定的侧栏菜单。
<a menu-close href="#/home" class="item">首页</a>
$ionicSideMenuDelegate
该方法直接触发$ionicSideMenuDelegate服务，来控制所有侧栏菜单。用$getByHandle方法控制特定情况下的ionSideMenus。
用法
<body ng-controller="MainCtrl"> <ion-side-menus> <ion-side-menu-content> 内容! <button ng-click="toggleLeftSideMenu()"> 切换左侧侧栏菜单 </button> </ion-side-menu-content> <ion-side-menu side="left"> 左侧菜单! <ion-side-menu> </ion-side-menus> </body>
function MainCtrl($scope, $ionicSideMenuDelegate) { $scope.toggleLeftSideMenu = function() { $ionicSideMenuDelegate.toggleLeft(); }; }
方法
toggleLeft([isOpen])
切换左侧侧栏菜单（如果存在）。
| 参数 | 类型 | 详情 |
|---|---|---|
| isOpen
(可选) | 布尔值 |
是否打开或关闭菜单。默认：切换菜单。 |
toggleRight([isOpen])
切换右侧侧栏菜单（如果存在）。
| 参数 | 类型 | 详情 |
|---|---|---|
| isOpen
(可选) | 布尔值 |
是否打开或关闭菜单。默认：切换菜单。 |
getOpenRatio()
获取打开菜单内容超出菜单宽度的比例。比如，一个宽度为100px的菜单被宽度为50px以50%的比例打开，将会返回一个比例值为0.5。
返回值: 浮点 0 表示没被打开，如果左侧菜单处于已打开或正在打开为0 到 1，如果右侧菜单处于已打开或正在打开为0 到-1。
isOpen()
返回值: 布尔值，判断左侧或右侧菜单是否已经打开。
isOpenLeft()
返回值: 布尔值左侧菜单是否已经打开。
isOpenRight()
返回值: 布尔值右侧菜单是否已经打开。
canDragContent([canDrag])
| 参数 | 类型 | 详情 |
|---|---|---|
| canDrag
(可选) | 布尔值 |
设置是否可以拖动内容打开侧栏菜单。 |
返回值: 布尔值，是否可以拖动内容打开侧栏菜单。
$getByHandle(handle)
| 参数 | 类型 | 详情 |
|---|---|---|
| handle | 字符串 |
例如:
$ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();
ionic 滑动框ion-slide-box
滑动框是一个包含多页容器的组件，每页滑动或拖动切换：
效果图如下：
用法
<ion-slide-box on-slide-changed="slideHasChanged($index)"> <ion-slide> <div class="box blue"><h1>BLUE</h1></div> </ion-slide> <ion-slide> <div class="box yellow"><h1>YELLOW</h1></div> </ion-slide> <ion-slide> <div class="box pink"><h1>PINK</h1></div> </ion-slide></ion-slide-box>
API
| 属性 | 类型 | 详情 |
|---|---|---|
| delegate-handle
(可选) | 字符串 |
该句柄用 |
| does-continue
(可选) | 布尔值 |
滑动框是否开启循环滚动。 |
| auto-play
(可选) | boolean |
设置滑动框是否循环博客，如果 does-continue 为 true，默认也为 true。 |
| slide-interval
(可选) | 数字 |
等待多少毫秒开始滑动（如果继续则为true）。默认为4000。 |
| show-pager
(可选) | 布尔值 |
滑动框的页面是否显示。 |
| pager-click
(可选) | 表达式 |
当点击页面时，触发该表达式（如果shou-pager为true）。传递一个'索引'变量。 |
| on-slide-changed
(可选) | 表达式 |
当滑动时，触发该表达式。传递一个'索引'变量。 |
| active-slide
(可选) | 表达式 |
将模型绑定到当前滑动框。 |
实例
HTML 代码
<ion-slide-box active-slide="myActiveSlide"> <ion-slide> <div class="box blue"><h1>BLUE</h1></div> </ion-slide> <ion-slide> <div class="box yellow"><h1>YELLOW</h1></div> </ion-slide> <ion-slide> <div class="box pink"><h1>PINK</h1></div> </ion-slide></ion-slide-box>
CSS 代码
.slider { height: 100%;}.slider-slide { color: #000; background-color: #fff; text-align: center; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; }.blue { background-color: blue;}.yellow { background-color: yellow;}.pink { background-color: pink;}.box{ height:100%; } .box h1{ position:relative; top:50%; transform:translateY(-50%); }
JavaScript 代码
angular.module('ionicApp', ['ionic']).controller('SlideController', function($scope) { $scope.myActiveSlide = 1; })
ionic 加载动画ion-spinner
ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。
该图标采用的是SVG。
用法
<ion-spinner icon="spiral"></ion-spinner> //默认用法
像大部分其他的ionic组件一样，spinner也可以使用ionic的标准颜色命名规则，就像下面这样：
<ion-spinner class="spinner-energized"></ion-spinner>
实例
HTML 代码
<ion-content scroll="false" class="has-header"> <p> <ion-spinner icon="android"></ion-spinner> <ion-spinner icon="ios"></ion-spinner> <ion-spinner icon="ios-small"></ion-spinner> <ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner> <ion-spinner icon="circles" class="spinner-energized"></ion-spinner> </p> <p> <ion-spinner icon="crescent" class="spinner-royal"></ion-spinner> <ion-spinner icon="dots" class="spinner-dark"></ion-spinner> <ion-spinner icon="lines" class="spinner-calm"></ion-spinner> <ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner> <ion-spinner icon="spiral"></ion-spinner> </p> </ion-content>
CSS 代码
body { cursor: url('http://www.runob.com/try/demo_source/finger.png'), auto; } p { text-align: center; margin-bottom: 40px !important; } .spinner svg { width: 19% !important; height: 85px !important; }
JavaScript 代码
angular.module('ionicApp', ['ionic']) .controller('MyCtrl', function($scope) { });
ionic 选项卡栏操作ion-tabs
ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。
对于 iOS，它会出现在屏幕的底部，Android会出现在屏幕的顶部(导航栏下面)。
用法
实例
<ion-tabsclass="tabs-positive tabs-icon-only"><ion-tabtitle="首页"icon-on="ion-ios-filing"icon-off="ion-ios-filing-outline"><!-- 标签 1 内容 --></ion-tab><ion-tabtitle="关于"icon-on="ion-ios-clock"icon-off="ion-ios-clock-outline"><!-- 标签 2 内容 --></ion-tab><ion-tabtitle="设置"icon-on="ion-ios-gear"icon-off="ion-ios-gear-outline"><!-- 标签 3 内容 --></ion-tab></ion-tabs>
尝试一下 »
效果如下所示：
API
| 属性 | 类型 | 详情 |
|---|---|---|
| delegate-handle
(可选) | 字符串 |
该句柄用 |
ion-tab
隶属于ionTabs
包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。
每个ionTab都有自己的浏览历史。
用法
<ion-tab title="Tab!" icon="my-icon" href="#/tab/tab-link" on-select="onTabSelected()" on-deselect="onTabDeselected()"></ion-tab>
API
| 属性 | 类型 | 详情 |
|---|---|---|
| title | 字符串 |
选项卡的标题。 |
| href
(可选) | 字符串 |
但触碰的时候，该选项卡将会跳转的的链接。 |
| icon
(可选) | 字符串 |
选项卡的图标。如果给定值，它将成为ion-on和ion-off的默认值。 |
| icon-on
(可选) | 字符串 |
被选中标签的图标。 |
| icon-off
(可选) | 字符串 |
没被选中标签的图标。 |
| badge
(可选) | 表达式 |
选项卡上的徽章（通常是一个数字）。 |
| badge-style
(可选) | 表达式 |
选项卡上微章的样式（例，tabs-positive ）。 |
| on-select
(可选) | 表达式 |
选项卡被选中时触发。 |
| on-deselect
(可选) | 表达式 |
选项卡取消选中时触发。 |
| ng-click
(可选) | 表达式 |
通常，点击时选项卡会被选中。如果设置了 ng-Click，它将不会被选中。 你可以用$ionicTabsDelegate.select()来指定切换标签。 |
$ionicTabsDelegate
授权控制ionTabs指令。
该方法直接调用$ionicTabsDelegate服务，控制所有ionTabs指令。用$getByHandle方法控制具体的ionTabs实例。
用法
<body ng-controller="MyCtrl"> <ion-tabs> <ion-tab title="Tab 1"> 你好，标签1！ <button ng-click="selectTabWithIndex(1)">选择标签2</button> </ion-tab> <ion-tab title="Tab 2">你好标签2！</ion-tab> </ion-tabs></body>
function MyCtrl($scope, $ionicTabsDelegate) { $scope.selectTabWithIndex = function(index) { $ionicTabsDelegate.select(index); }}
方法
select(index, [shouldChangeHistory])
选择标签来匹配给定的索引。
| 参数 | 类型 | 详情 |
|---|---|---|
| index | 数值 |
选择标签的索引。 |
| shouldChangeHistory
(可选) | 布尔值 |
此选项是否应该加载这个标签的浏览历史（如果存在），并使用，或仅加载默认页面。默认为false。提示：如果一个 |
selectedIndex()
返回值: 数值, 被选中标签的索引，如 -1。
$getByHandle(handle)
| 参数 | 类型 | 详情 |
|---|---|---|
| handle | 字符串 |
例如:
$ionicTabsDelegate.$getByHandle('my-handle').select(0);
