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-tab
  label="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>