Onsen UI +Angular

在Onsen UI 2.0中，我们将Angular绑定作为单独的库提供。需要加载核心Onsen UI库（onsenui.js），AngularJS（angular.js）以及Onsen UI（angular-onsenui.js）的Angular绑定。

加载指令

要加载指令，需要指定onsen为应用程序的依赖项：

var app = angular.module('myApp', ['onsen']);

还有一个方法ons.boostrap()来关联AngularJS和Onsen UI：

var app = ons.bootstrap();

数据绑定

将数据绑定到组件是AngularJS中的一个重要概念。例如使用ng-model指令将input元素的值绑定到变量。

<input type="text"  ng-model="person.name"> </input>
Hello, {{ person.name }}!

Onsen UI扩展了HTML语言，但所有Onsen UI输入元素仍然支持ng-model数据绑定：

<ons-input ng-model="person.name"> </ons-input>
Hello, {{ person.name }}!

表单元素

ng-model指令适用于表单<ons-range>，输入框<ons-input>和开关<ons-switch>。

还有一个叫做的指令ng-change可以用来听取变化。

<ons-range  ng-model="person.age"  ng-change="person.ageChanged()"> </ons-range>

事件处理

一些Onsen UI组件可以自定义DOM事件。可以使用ons-{eventName}指令在AngularJS中捕获这些事件。

要捕获postpush事件，<ons-navigator>您可以使用ons-postpush指令。

<ons-navigator ons-postpush="handlePostpush()"> </ons-navigator>

`<ons-page>`元素

Onsen UI中页面的根目录是使用该<ons-page>元素创建的。它覆盖整个屏幕，并用作其他元素的容器。管理多个视图时，所有视图都必须包含在<ons-page>元素中。

<ons-page>Content goes here
</ons-page>

此元素自动生成一个 background和content元素。这些也可以手动提供，以实现更高的可定制性：

<ons-page>Toolbar here<div class="background"></div><div class="content">Scrollable content here</div>Fixed content here
</ons-page>

由于content元素默认是透明的，我们可以为background元素添加自定义颜色。请注意，如果使用了content，则必须手动分隔可滚动和固定内容。

Navigator导航器

<ons-navigator> 元素处理一堆页面。这是移动应用程序中非常常见的导航类型，其中使用过渡动画将一个页面推到另一个页面之上。

<ons-navigator animation="fade"></ons-navigator>

可animation属性来更改动画，可用的动画有：

fade
lift
slide
none

对于iOS“滑动到弹出”功能，需添加swipeable属性。除非swipeable="force"指定，否则将在Android平台上自动删除此行为。

定义页面

您推送到导航器的页面是使用<template>元素定义的。

<template id="page2.html"><ons-page>...</ons-page>
</template>

该id属性用于在推送时引用页面。

Pushing pages

要将新页面推送到堆栈顶部，使用pushPage(page, options)方法。

在Onsen UI中，所有这些方法都附加到元素，因此需要创建对它的引用。可以使用var属性执行此操作：

<ons-navigator var="myNavigator"></ons-navigator>

可以这样调用Navigator的方法： myNavigator.pushPage('page2.html');

pushPage方法返回Promise转换完成时解析的对象。您可以尝试添加以下代码：

myNavigator.pushPage('page2.html').then(function() {ons.notification.alert('Page pushed!');});

Pushing pages

通过传递options.data参数来实现的：

myNavigator.pushPage('page2.html', {data: {title: 'New Page',// ...},// Other options});

options.datainit在新页面事件发生后，可以安全地访问对象。ons-inithandler可用于处理此事件。
也可以使用范围函数或视图访问此对象myNavigator.topPage.data

返回上一页

使用popPage(options)方法。

另一种方法是使用该<ons-back-button>元素。它可以添加到工具栏的左侧并呈现为箭头：

<ons-toolbar><div class="left"><ons-back-button>Back</ons-back-button></div>
</ons-toolbar>

它会自动找到Navigator元素并触发一个popPage()调用，因此不需要将任何点击处理程序附加到它。

Tabbar

在Onsen UI选项卡中，使用<ons-tabbar>元素启用导航。

使用<ons-tab>以下子项添加标签<ons-tabbar>：

<ons-tabbar><ons-tab label="Tab 1" active></ons-tab><ons-tab label="Tab 2"></ons-tab>
</ons-tabbar>

该active属性用于定义默认情况下应打开的选项卡。如果未提供此属性，则默认情况下将激活第一页。

`<ons-tab>`元素

一个选项卡接受多个attriutes改变其风格和行为，即page，label或icon。

或者，内容可以直接作为ons-tab子元素提供：

<ons-tab page="..."><input type="radio" style="display: none"><button class="tabbar__button"><div class="tabbar__icon"><ons-icon icon="my-icon"></ons-icon></div><div class="tabbar__label">My Label</div><div class="tabbar__badge notification">99</div></button>
</ons-tab>

默认情况下，每个选项卡都具有相同的宽度。50％有两个标签，25％有四个标签，依此类推。要允许选项卡根据其内容（即更短/更长的标签）增长，需使用autogrow修改器。（可选）max-width可以指定CSS属性来设置选项卡的宽度（对于每个选项卡）。

添加页面

将页面绑定到选项卡的工作方式非常类似于<ons-navigator>。

页面的内容使用以下<template>元素定义：

<template id="tab1.html"><ons-page>...</ons-page>
</template>

并且为了将模板绑定到特定选项卡，该page属性用于<ons-tab>元素：

<ons-tablabel="Tab 1"page="tab1.html">
</ons-tab>

滑动和动画

默认情况下，选项卡栏将在选项卡单击时从一个页面滑动到另一个页面。使用animation="none"属性进行即时更改。

swipeable属性可用于启用此功能。它可以切换为允许或防止在应用程序的不同时刻滑动。

可以组合这些属性以使标签栏具有即时更改，也可以刷过：

<ons-tabbar swipeable animation="none">...</ons-tabbar>

对于iOS，tab-border可以包含属性以显示在滑动期间更新位置的选项卡边框（这在Android上始终是默认的）。

The Splitter

可以使用<ons-splitter>添加菜单。

此元素有几个自定义选项。对于小型设备，它可用于创建可滑动菜单，但也可以对其进行自定义，以便在具有更大屏幕的设备上自动显示列布局。

要使用它，需要将<ons-splitter-content>和<ons-splitter-side>元素添加为子项。该<ons-splitter-content>包含的主要内容和<ons-splitter-side>用于菜单。

主要内容

主要内容包含在内部<ons-splitter-content>。每个Splitter必须包含一个<ons-splitter-content>。

有两种方法可以定义初始HTML。一种方法是将页面放在元素中：

<ons-splitter-content><ons-page>...</ons-page>
</ons-splitter-content>

使用模板`template`

另一种方法是使用该page属性从<template>元素加载内容：

<template id="page.html">
</template>...<ons-splitter><ons-splitter-content page="page.html"></ons-splitter-content>
</ons-splitter>

动态加载页面

要更改内容，<ons-splitter-content>可以使用以下load(page, options)方法：

// Switch to the Settings page.
mySplitter.content.load('settings.html');

通常，当用户单击菜单中的某个项目时，将调用此方法。

侧面元素

该<ons-splitter-side>支持控制菜单的行为的若干属性。

`swipeable`属性

必须定义此属性才能通过滑动来打开和关闭菜单。

`collapse`属性

菜单支持两种模式：“折叠”和“分割”模式。折叠菜单时，它将从视图中隐藏，仅在用户滑动或open()调用方法时才可见。

在“分割”模式下，菜单显示为<ons-splitter-content>元素侧面的列。

该collapse属性的值定义何时有条件地处于任一模式。如果将值设置为"portrait“当设备处于纵向模式时它将折叠。它还支持媒体查询。

您可以尝试更改或删除该collapse属性<ons-splitter-side>以查看其实际操作。

`side`属性

这定义了菜单附加到哪一侧。它支持值"left"和"right"。可以在屏幕的每一侧定义一个菜单。

清单

Onsen UI提供了三个用于创建列表的元素：

<ons-list>
<ons-list-item>
<ons-list-header>

将<ons-list>被用作父并为每一个项目<ons-list-item>使用元件：

<ons-list><ons-list-item>Item A</ons-list-item><ons-list-item>Item B</ons-list-item><ons-list-item>Item C</ons-list-item>
</ons-list>

<ons-list-header>元素创建包含文本内容的标题。

<ons-list><ons-list-header>My friends</ons-list-header><ons-list-item>Alice</ons-list-item><ons-list-item>Bob</ons-list-item><ons-list-item>Eve</ons-list-item>
</ons-list>

可扩展列表项

您可以通过设置expandable属性来创建扩展以显示额外内容的列表项。
扩展列表项时显示的内容在中定义div.expandable-content。

<ons-list-item expandable>Tap to expand<div class="expandable-content">This is shown when expanded</div>
</ons-list-item>

如果div.right未定义，则会在可展开列表项的右侧自动添加下拉箭头。

列表项也可以使用showExpansion和hideExpansion方法进行扩展和收缩。

`tappable`属性

该tappable属性用于在用户点击列表项时向其提供指示。在iOS中，点击时背景颜色会发生变化，在Android上会显示材质设计的连锁效果。

修饰符

有许多修饰符可用于自定义列表和列表项的外观。

在Onsen UI中，通过将modifier属性添加到元素来应用修改器。通过用空格分隔可以添加多个。

插入列表

要创建插入列表，可以inset在<ons-list>元素上使用修饰符：

<ons-list modifier="inset">...
</ons-list>

更改分隔线

的longdivider和nodivider改性剂可被用于完全改变长度或删除列表项之间的分隔（水平线）。列表项的默认样式是一个不完全覆盖整个屏幕的分隔符。相反，它在左侧有一些填充，使其看起来更像原生列表。

通过添加nodivider修饰符，可以删除分隔符：

<ons-list><ons-list-item modifier="nodivider">Item A</ons-list-item><ons-list-item modifier="nodivider">Item B</ons-list-item>
</ons-list>

Onsen UI +Angular相关推荐

基于AngularJS的Onsen UI --Onsen UI学习笔记
AngularJS与Onsen UI的结合,Onsen UI应用程序实际上是一个AngularJS 1应用程序. <!doctype html><html lang="en ...
基于AngularJS的Onsen UI --Onsen UI学习笔记
AngularJS与Onsen UI的结合,Onsen UI应用程序实际上是一个AngularJS 1应用程序. <!doctype html><html lang="en ...
Onsen UI快速入门 --Onsen UI
一.什么是Onsen UI? 1.一系列专为移动应用程序设计的丰富UI组件.具有遵循原生iOS和Android设计标准的即时实现功能.免费使用,100%开源软件(Apache v2许可证).Onse ...
Onsen UI组件实现下拉刷新和固定定位
前言:最近用 Vue + Cordova + Onsen UI开发APP的过程中,在页面上遇到两个问题. (1)没法实现正常的类似于PC端页面中的固定定位,像position:fixed,这种css属 ...
Onsen UI for React文档
注:采用ES6+JSX语法 1.开始一个项目在React中使用Onsen UI 需要首先安装onsenui和react-onsenui模块. 可以使用monaca CLI工具包快速初始化一个应用: ...
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
Jerry 之前的文章SAP 产品 UI 里的容器组件的概念和开发概述介绍过,SAP Spartacus Angular Component,通过我们开发团队自定义的指令 cxComponentWra ...
Onsen UI 学习笔记之二：路由
上次写好了登录页,登录成功之后如何呢? 登录成功之后应该进入用户主页,主页上有显示操作的菜单,对吧. 为了完成上述目标,我们需要添加一个组件Vue Router 添加Vue Router 注意vue ...
OnSen UI结合AngularJs打造”美团APP我的”页面 --Hybrid App
1.页面效果图: 演示地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_mine/ 2.核心代码 mine.html: <ons-page id=&quo ...
onsen UI popover 的用法
这是在typeScript下使用的: 1.绑定父级作用域: $window["ons"].createPopover($scope.popoverUrl, { parentScop ...

Onsen UI +Angular

加载指令

数据绑定

表单元素

事件处理

`<ons-page>`元素

Navigator导航器

定义页面

Pushing pages

Pushing pages

返回上一页

Tabbar

`<ons-tab>`元素

添加页面

滑动和动画

The Splitter

主要内容

使用模板`template`

动态加载页面

侧面元素

`swipeable`属性

`collapse`属性

`side`属性

清单

可扩展列表项

`tappable`属性

修饰符

插入列表

更改分隔线

Onsen UI +Angular相关推荐

最新文章

热门文章

Onsen UI +Angular

加载指令

数据绑定

表单元素

事件处理

<ons-page>元素

Navigator导航器

定义页面

Pushing pages

Pushing pages

返回上一页

Tabbar

<ons-tab>元素

添加页面

滑动和动画

The Splitter

主要内容

使用模板template

动态加载页面

侧面元素

swipeable属性

collapse属性

side属性

清单

可扩展列表项

tappable属性

修饰符

插入列表

更改分隔线

Onsen UI +Angular相关推荐

最新文章

热门文章

`<ons-page>`元素

`<ons-tab>`元素

使用模板`template`

`swipeable`属性

`collapse`属性

`side`属性

`tappable`属性