MobileUI

入门

创建MobileUI的目的是使混合应用程序更快更小,因为您仅安装真正要用于UI的内容。

当然,您一定会喜欢在Progressive Web AppsApache Cordova Apps使用它 。您只能在通过PhoneGap,Ionic Framework, Onsen UI,Framework7 和其他专注于创建Web应用程序创建的项目中使用所需的组件。

专门为移动应用程序设计的各种UI组件。MobileUI提供选项卡,侧面菜单,堆栈导航以及大量其他组件,例如列表和表单。某些现有组件在Android和iOS上的显示方式有所不同,其自动样式会根据平台更改应用程序的外观。

安装过程很简单,但首先,你需要安Node.js。然后,通过终端npm install -g cordova安装Cordova (如果在Linux中,则添加sudo)。

之后,只需在终端中执行命令:

npm install -g mobileui

要检查是否已安装MobileUI,请打开终端并输入mobileui

简单的例子

让我们使用MobileUI和Cordova创建一个简单示例:

cordova create apptest
cd apptest
mobileui install template cordova-blank
mobileui install header
mobileui preview

让我们检查命令:

cordova create apptest创建一个cordova项目
cd apptest 将目录更改为您的项目
mobileui install template cordova-blank清除由Cordova创建的样本文件
mobileui install header对于示例,我们可以采用标头组件
mobileui preview模拟应用程序以在浏览器中运行

之后,在index.html中添加以下代码

默认情况下,HTTP服务器将在端口8080上运行,但是您可以通过将--port参数传递给所需的端口来更改它,例如--port 8000

模板

为了使应用程序开发更快,更轻松,您可以使用一些可通过MobileUI使用的模板。

要使用模板,您需要使用以下命令进行安装:

mobileui install template name-of-template

现在请参阅模板列表:

模板描述
cordova-blank为在Apache Cordova中创建的应用创建文件库。
cordova-angular1使用AngularJS创建一个脚手架项目
cordova-phaser使用Phaser创建一个脚手架项目。
cordova-vuejs使用VueJS创建一个脚手架项目。

基础

基本组件包含使用MobileUI的基本功能以及该套件的任何其他组件。使用此组件,您可以使用颜色主题, 图标以及界面中元素的某些定位和对齐类。

要使用它,您需要使用以下命令进行安装:

mobileui install base

该组件的功能是:

描述
content 创建应用程序的可滚动视口。
left 将任何元素浮动到左侧。
right 将任何元素浮动到右侧。
top 将任何元素浮动到顶部。
bottom 将任何元素浮动到底部。
align-left 将文本,图标和元素向左对齐。
align-center 将文本,图标和元素对齐到中心。
align-right 将文本,图标和元素向右对齐。
border 在元素中添加一个小边框。
hidden 隐藏元素。
opacity-90 定义不透明度的90%。
opacity-80 定义不透明度的80%。
opacity-70 定义不透明度的70%。
opacity-60 定义不透明度的60%。
opacity-50 定义不透明度的50%。
opacity-40 定义不透明度的40%。
opacity-30 定义不透明度的30%。
opacity-20 定义不透明度的20%。
opacity-10 定义不透明度的10%。
line 创建一条水平线,您需要使用base颜色定义颜色。
padding 添加内部空间。
padding-top 在顶部添加填充。
margin 添加一个外部空间。
radius 添加一个小的圆形边框。
radius-big 添加一个大的圆形边框。
circle 添加圆形边框。
radius-left 在左侧添加一个小边框。
radius-right 在右侧添加一个小边框。
radius-top 在顶部添加一个小边框。
ellipsis 将文本的显示限制在一行的末尾。
shadow 在元素(不是文本)上创建阴影。
space 垂直添加空间。
space-big 垂直添加大空间。
space-huge 垂直添加巨大的空间。
margin-bottom 在底部添加边距。
margin-top 在顶部添加边距。
text-shadow 在文本中创建阴影。
text-small 保留较小的文本。
icon-small 保持图标较小。
icon-big 保持图标较大。
icon-huge 留下巨大的图标。
icon-extra-huge 将图标留得过大。
text-big 保留较大的文本。
text-extra-huge 文字要特别大。
text-huge 留下大量文字。
text-light 使文本变细。
text-bold 保留粗体字。
text-strong 保留较粗的文本。
float-bottom-right 在页脚中向右浮动元素。
float-bottom-left 在页脚中向左浮动元素。
float-bottom-center 在页脚中向左浮动元素。
icon-circle 创建一个完全圆形的图标。

颜色

MobileUI使用建议的材料设计颜色,因为材料取材于当代建筑,道路标志,路面标尺和运动场的提示。颜色应该是出乎意料的和鲜艳的。

此调色板包含原色和强调色,可用于说明或发展您的品牌颜色。它们的设计旨在彼此和谐地工作。调色板以原色开始,并填充光谱以创建适用于Android,Web和iOS的完整且可用的调色板。

主题可通过表面阴影,阴影深度和油墨不透明性来实现一致的应用程序样式。

主题的颜色位于基本的MobileUI中,要使用该颜色,可通过以下命令进行安装:

mobileui install base

A只需在您的组件中添加类以使用颜色,例如:

Colors MobileUI:

  • red
  • red-50
  • red-100
  • red-200
  • red-300
  • red-400
  • red-500
  • red-600
  • red-700
  • red-800
  • red-900
  • pink
  • pink-50
  • pink-100
  • pink-200
  • Pink-300
  • pink-400
  • pink-500
  • pink-600
  • pink-700
  • pink-800
  • pink-900
  • purple
  • purple-50
  • purple-100
  • purple-200
  • purple-300
  • purple-400
  • purple-500
  • purple-600
  • purple-700
  • purple-800
  • purple-900
  • deep-purple
  • deep-purple-50
  • deep-purple-100
  • deep-purple-200
  • deep-purple-300
  • deep-purple-400
  • deep-purple-500
  • deep-purple-600
  • deep-purple-700
  • deep-purple-800
  • deep-purple-900
  • indigo
  • indigo-50
  • indigo-100
  • indigo-200
  • indigo-300
  • indigo-400
  • indigo-500
  • indigo-600
  • indigo-700
  • indigo-800
  • indigo-900
  • blue
  • blue-50
  • blue-100
  • blue-200
  • blue-300
  • blue-400
  • blue-500
  • blue-600
  • blue-700
  • blue-800
  • blue-900
  • light-blue
  • light-blue-50
  • light-blue-100
  • light-blue-200
  • light-blue-300
  • light-blue-400
  • light-blue-500
  • light-blue-600
  • light-blue-700
  • light-blue-800
  • light-blue-900
  • cyan
  • cyan-50
  • cyan-100
  • cyan-200
  • cyan-300
  • cyan-400
  • cyan-500
  • cyan-600
  • cyan-700
  • cyan-800
  • cyan-900
  • teal
  • teal-50
  • teal-100
  • teal-200
  • teal-300
  • teal-400
  • teal-500
  • teal-600
  • teal-700
  • teal-800
  • teal-900
  • green
  • green-50
  • green-100
  • green-200
  • green-300
  • green-400
  • green-500
  • green-600
  • green-700
  • green-800
  • green-900
  • light-green
  • light-green-50
  • light-green-100
  • light-green-200
  • light-green-300
  • light-green-400
  • light-green-500
  • light-green-600
  • light-green-700
  • light-green-800
  • light-green-900
  • lime
  • lime-50
  • lime-100
  • lime-200
  • lime-300
  • lime-400
  • lime-500
  • lime-600
  • lime-700
  • lime-800
  • lime-900
  • yellow
  • yellow-50
  • yellow-100
  • yellow-200
  • yellow-300
  • yellow-400
  • yellow-500
  • yellow-600
  • yellow-700
  • yellow-800
  • yellow-900
  • amber
  • amber-50
  • amber-100
  • amber-200
  • amber-300
  • amber-400
  • amber-500
  • amber-600
  • amber-700
  • amber-800
  • amber-900
  • orange
  • orange-50
  • orange-100
  • orange-200
  • orange-300
  • orange-400
  • orange-500
  • orange-600
  • orange-700
  • orange-800
  • orange-900
  • deep-orange
  • deep-orange-50
  • deep-orange-100
  • deep-orange-200
  • deep-orange-300
  • deep-orange-400
  • deep-orange-500
  • deep-orange-600
  • deep-orange-700
  • deep-orange-800
  • deep-orange-900
  • brown
  • brown-50
  • brown-100
  • brown-200
  • brown-300
  • brown-400
  • brown-500
  • brown-600
  • brown-700
  • brown-800
  • brown-900
  • grey
  • grey-50
  • grey-100
  • grey-200
  • grey-300
  • grey-400
  • grey-500
  • grey-600
  • grey-700
  • grey-800
  • grey-900
  • blue-grey
  • blue-grey-50
  • blue-grey-100
  • blue-grey-200
  • blue-grey-300
  • blue-grey-400
  • blue-grey-500
  • blue-grey-600
  • blue-grey-700
  • blue-grey-800
  • blue-grey-900
  • black
  • white
  • black-opacity-90
  • white-opacity-90
  • black-opacity-70
  • white-opacity-70
  • black-opacity-50
  • white-opacity-50
  • black-opacity-30
  • white-opacity-30
  • black-opacity-10
  • white-opacity-10

图标

MobileUI还带有其自己的免费和开源图标字体Ionicons,有500多个图标可供选择。

图标位于基本的MobileUI中,只需在以下命令中安装即可使用:

mobileui install base

并添加icon和要显示的图标的Ionicon类名称,可以在Ionicons主页上轻松查找。您可以更改颜色,为文本添加类别颜色。

字体

MobileUI的主要问题之一是UX设计,因此我们提供了一种在Web应用程序中安装新字体的简便方法。

您可以在Google 字体存储库中安装任何源。例如,我想安装字体Open Sans light and Monoton,我的命令如下所示:

mobileui install font "Monoton|Open+Sans:300"

标题是屏幕顶部的固定区域,可以包含标题标签以及用于导航或执行各种操作的向左/向右按钮。

要使用此组件,您需要使用以下命令进行安装:

依赖关系:basebutton. The dependencies will be installed together with this module
mobileui install header

该组件的功能是:

类型描述
header 在页面顶部创建一个固定的栏。
footer 在页面底部创建一个固定的栏。
sub 如果与一起header使用,则在页面顶部创建一个固定的子栏,如果与一起使用,则在页面footer底部创建一个固定的子栏。
has-header 用于header或主体元素的父元素,以定义页面使用header.
has-sub-header headersub或body元素的父元素中使用,以定义页面使用sub.
has-footer headerfooter或body元素的父元素中使用,以定义页面header底部使用的页面。
has-sub-footer header with sub and bottom或body元素的父元素中使用,以定义页面sub底部使用的页面。
avatar 为图像设置固定尺寸。
border-big 在元素中添加大边框。
title 在标题中创建标题,您可以只使用h1元素。
icon-badge 在图标旁边创建一个浮动徽章。
placeholder-white为占位符定义浅色。

您可以在此组件中使用基础MobileUI的所有功能。

您可以将标题放在中间或右键添加类align-center or align-right.

对于左右放置按钮,您需要使用left or right.

您可以将带有文本的按钮和其他按钮设置选项放入按钮中,请参阅按钮.

如果您需要标题透明,则只需添加文本颜色类。

如果您不使用透明标头,则需要has-header在您的content或div中添加类,以使顶部位置增加边距。在此示例中,也使用了组件列表

对于此示例,您需要安装以下组件:

mobileui install header list

可以在原始标题栏下方放置一个辅助标题栏。自定义标题还有很多其他方法。

您可以在标题中添加一组按钮。

您可以在屏幕底部创建标题,只需添加class即可footer.

按键

您可以在按钮中使用颜色主题图标。如果需要使用基本模式,只需添加主题颜色名称,则可以使用class更改边框颜色,使用class border-[COLOR]更改文本颜色并使用classtext-[COLOR]添加半径边框radius.

对于按钮中的使用图标,您需要添加类,icon-text并且可以使用不同的大小,请参见下面的示例。

要使用此组件,您需要使用以下命令进行安装:

Dependency:base. The dependencies will be installed together with this module
mobileui install button

该组件的功能是:

描述
icon-text 确定按钮将带有图标。
icon-right 如果按钮具有类icon-text and icon-right则图标将向右对齐。
full 保持按钮占据屏幕宽度的100%。
big 留下大按钮。
small 留下小按钮。
huge 巨大的按钮。
buttons-group 创建按钮组

您可以在此组件中使用革础MobileUI的所有功能。

Android中使用的另一种类型的按钮是Tap,为此您可以将circleclass放入按钮中。您可以控制什么位置按钮。

输入

输入在应用程序中对于收集用户数据至关重要,因此我们需要担心布局,而MobileUI会为您完成。

要使用此组件,您需要使用以下命令进行安装:

Dependency:base and list. The dependencies will be installed together with this module
mobileui install input

该组件的功能是:

描述
label-fixed 在输入元素旁边定义一个固定标签。
label-float 在输入元素上方定义一个浮动标签。
placeholder-white为占位符定义浅色。
icon-right从一个字段向右对齐一个图标。
range 定义列表项是范围输入。

您可以使用此组件中的基础 组件和 列表组件的所有功能。

如果在项目上贴标签,则可以查看该组件的线条图。

使用类label-fixeditem列表中的固定标签。

输入浮动是表单登录的好选择,只需label-float在项目中添加类。

您可以将align-right文本对齐在正确的项目中。

您可以在输入中使用图标。只需添加一个类icon和您的ion-*。默认情况下,图标将位于左侧。但是,您可以通过添加class将它们放在右边icon-right.

您可以发挥创造力,也可以使用其他组件,例如封面网格组件。您还可以使用功能字体.

开关是保存布尔值的输入组件。像复选框一样,开关通常用于允许用户打开或关闭设置。诸如value,disabled和checked之类的属性可以应用于切换器,以控制其行为。

复选框是包含布尔值的输入组件。复选框与HTML复选框输入没有区别。但是,与其他Ionic组件一样,复选框在每个平台上的样式也不同。

像复选框一样,单选按钮是包含布尔值的输入组件。在幕后,广播与HTML广播输入没有什么不同。在每个平台上,收音机的样式都不同

您可以使用范围输入进行控制,使用户可以通过沿滑块或轨道移动滑块来从一系列值中进行选择。

Contribute on Github! Edit this section.

列表

要使用此组件,您需要使用以下命令进行安装:

Dependency:base. The dependencies will be installed together with this module
mobileui install list

该组件的功能是:

ClassDescription
list将元素定义为列表。此功能取决于能否item正常运行。
item将元素定义为项目。此功能取决于能否 list正常运行。
space-small在顶部和底部元素之间定义一个小的空间。
block带有左头像的行空间。
no-space-top删除顶部项目中的空间。
no-space-bottom删除底部项目中的空间。
no-border定义列表或项目没有边框。
border-bottom定义列表或项目具有底边框。
full定义没有内部空格的项目。
avatar为图像设置固定尺寸。
avatar-badge在图像上方设置一个浮动徽章。
border-big在项目或元素中添加大边框。

您可以在此组件中使用基础MobileUI的所有功能。

您可以将图像和图标放在列表中。

您可以与其他组件和类组合。

组件头部, 按钮封面组合的另一个例子。

您可以添加类mark以更改颜色边框。

标签

标签是按钮或链接的水平区域,可在屏幕之间提供一致的导航体验。它可以包含文本和图标的任意组合,并且是启用移动导航的一种流行方法。

Dependency:base and button. The dependencies will be installed together with this module

要使用此组件,您需要使用以下命令进行安装:

mobileui install tab

该组件的功能是:

描述
tab定义一个新标签。
tab-content通过标签定义区域内容
active定义该选项卡,并且ab-content打开。
badge在标签中创建徽章。

您的标签页需要有一个,id而对于您打开标签页,只需调用函数openTab('ID_YOUR_TAB')。对于启动选项卡,您需要按按钮在选项卡中以及选项卡的内容中添加`active`类。参见以下示例:

您可以将标签放在页脚并仅使用图标

请参阅使用另一个组件MobileUI的好示例:)

卡是移动应用程序中流行的组件。在MobileUI中,可以使用基类创建卡。

如果已安装任何组件,则已经安装了基类。否则运行命令:

mobileui install base

您可以组合卡片样式和列表组件,只需添加class即可shadow.

徽章

徽章用于提供有关某些内容的其他信息。在MobileUI中,可以使用基类创建卡。

如果已安装任何组件,则已经安装了基类。否则运行命令:

mobileui install base

您可以将此组件与其他组件(例如列表)组合在一起。

覆盖

该组件使您可以使用图像创建预告片。无论使用哪种元素,它都将始终垂直和水平居中并覆盖其容器,而不会丢失其比例。您还可以在图像上方放置其他内容,例如文本或图像。

要使用此组件,您需要使用以下命令进行安装:

Dependency:base. The dependencies will be installed together with this module
mobileui install cover

该组件的功能是:

ClassDescription
cover定义一个元素有一个background-image并且必须覆盖所需的空间。
cover-200固定高度尺寸。
cover-200固定高度尺寸。
cover-400固定高度尺寸。
cover-500固定高度尺寸。
no-padding移去盖子内部的空间。
avatar限制图像的大小并添加大边框。
float-bottom-left在左侧的页脚中浮动一个元素。
float-bottom-right在右侧的页脚中浮动一个元素。
float-bottom-center在中心的页脚中浮动一个元素。
gradient在元素的背景中设置从黑色到透明的渐变效果。
blend-multiplybackground-image设置为a 在后台应用CSS3的乘法效果时使用。在以下位置查看更多信息:multiply blend mode
blend-screen当使用background-image设置为应用背景CSS3的画面效果。在以下位置查看更多信息:screen blend mode
blend-overlay当使用background-image设置为在后台应用CSS3的叠加效果时使用。在以下位置查看更多信息:overlay blend mode
blend-darken当使用background-image设置为在背景中应用CSS3的变暗效果时使用。在以下位置查看更多信息:darken blend mode
blend-lighten当使用background-image设置为应用背景CSS3的减仓效应。在以下位置查看更多信息:lighten blend mode
blend-color-dodge当使用background-image设置为在背景中应用CSS3的减淡色效果时使用。详情请见:color-dodge blend mode
blend-color-burn当使用background-image设置为在背景中应用CSS3的颜色增强效果时使用。在以下位置查看更多信息:color-burn blend mode
blend-hard-light当使用background-image设置为在后台应用CSS3的强光效果时使用。在以下位置查看更多信息:hard-light blend mode
blend-soft-light当使用background-image设置为应用背景CSS3的柔和光效果。在以下位置查看更多信息:soft-light blend mode
blend-luminosity当使用background-image设置为在后台应用CSS3的发光效果时使用。在以下位置查看更多信息:luminosity blend mode

您可以在此组件中使用基础MobileUI的所有功能。

你可以用透明层添加类添加颜色blend-soft-light, blend-darken, blend-luminosity, blend-multiply, blend-screen and blend-overlay. 请参见带有头部组件的此示例。

您可以与按键 圆圈和列表组件组合

您可以将此组件与列表, , 微章, 图标网格组合在一起。

菜单是侧面菜单导航,可以将其拖出或切换以显示。关闭菜单时,菜单内容将被隐藏。菜单根据平台适应适当的样式。

要使用此组件,您需要使用以下命令进行安装:

Dependency:base and list. The dependencies will be installed together with this module
mobileui install menu

该组件的功能是:

ClassDescription
menu 定义一个元素是一个菜单,该菜单可以断开页面连接或推入页面,具体取决于操作系统。
menu-right 在右侧设置菜单。
open 设置菜单打开。

您的菜单需要有,id 并且对于您来说打开菜单只是调用功能openMenu('ID_YOUR_MENU'),对于关闭菜单只是调用功能closeMenu('ID_YOU_MENU')。默认情况下,菜单是在左侧创建的,但是您可以menu-right在右侧位置添加创建菜单的类。

参见示例:

您可以在菜单中使用颜色主题, 图标列表的所有功能。

您可以组合封面, 微章, , 头部按键来创建一个好的应用程序。

对于高级模式,您可以收听事件openMenu and closeMenu.

您可以启用Swiper事件(在水平单击和拖动时打开或关闭菜单):

网络

MobileUI使用CSS灵活框布局模块标准。

只需连续添加所需的列,它们将平均占用可用空间。如果要三列,请添加三列,如果要五列,请添加五列。对12列的网格没有任何限制,也不必明确声明每列应该有多大。

row类名是用来指定,惊喜,一排,并col用于列。在右边的演示中,我们选择了四列,然后是两列,但我们可以像3、6、7、23等一样容易使用,这没关系。重点是,添加布局所需的列数,并且不必担心计算百分比,因为它会自动计算出百分比。

要使用此组件,您需要使用以下命令进行安装:

mobileui install grid

该组件的功能是:

描述
row创建一条线。
row-between创建一条线,以使各列​​均匀分布。
row-around创建一条线,以使各列​​均匀分布。
row-stretch创建拉伸行,您需要定义高度值。
column创建一列。
wrap默认情况下,所有项目都在一行上,而在此类添加到行时,所有项目将从上到下缠绕在多行上。
vertical-align-top将col对准顶部(Y轴)。
vertical-align-center将col对准中心(Y轴)。
vertical-align-bottom将col对准底部(Y轴)。
horizontal-align-left将col对准左侧(X轴)。
horizontal-align-center将col对准中心(X轴)。
horizontal-align-right将col右对齐(X轴)。
row-center在行上将一列居中。
col用该行的剩余空间创建一列。
col-10创建一个占行的10%的列。
col-20创建一列占行的20%。
col-25创建一个占行的25%的列。
col-34创建一个列,占行的33.3333%。
col-50创建一个占行的50%的列。
col-67创建一个具有66.6666%行的列。
col-75创建一列占行的75%。
col-80创建一个具有80%行的列。
col-90创建一个具有90%行的列。

请使用查看此示例row-between.


请使用查看此示例row-around.


使用查看如何轻松对齐中心的列row-center.


您可以使用创建具有列方向的行column.


请使用 row 和查看此示例 vertical-align-top.


请使用row 和查看此示例 vertical-align-center.


请使用row 和查看此示例 vertical-align-bottom.


请使用row 和查看此示例 horizontal-align-left.


请使用row 和查看此示例 horizontal-align-center.


请使用 row 和查看此示例 horizontal-align-right.


看到这个很好的例子使用 row, horizontal-align-right and vertical-align-center.
您可以自定义水平对齐X和垂直对齐Y的所有类。


使用vertical-align-*类时,需要定义height off元素,例如:style="height: 100px;".
或者您可以使用助手类.full-height


使用头部, coverlist 组件查看此示例。

滑动

Swiper组件是一个功能强大的多页容器,可以在幻灯片之间滑动或拖动每一页。该组件是基于Swiper widget from idangerous.

lib Swiper是免费的,最现代的移动触摸滑块,具有硬件加速过渡和惊人的本机行为。它旨在用于移动网站,移动Web应用程序和移动本机/混合应用程序。主要为iOS设计,但在最新的Android,Windows Phone 8和现代桌面浏览器上也能很好地工作

滑块中有很多组合和配置,可以与出色的元素一起使用,为此,请参阅使用Swiper 的文档事例

要使用此组件,您需要使用以下命令进行安装:

mobileui install swiper

该组件的功能是:

描述
swiper-container定义一个滑块容器。
swiper-wrapper定义swiper的包装。
swiper-slide定义元素幻灯片。
vertical-align-center将所有元素对齐到垂直中心。
swiper-container-autoheight自动高度
swiper-notificationa11y
swiper-wp8-horizontalWindows Phone 8修复
swiper-button-nextArrows
swiper-pagination分页样式
swiper-pagination-bullets常见样式
swiper-pagination-bullet项目符号
swiper-pagination-white定义白色项目符号分页。
swiper-pagination-black定义黑色子弹分页。
swiper-pagination-progress进展
swiper-container-3d3D容器
swiper-scrollbar滚动条
swiper-lazy-preloader预载器

使用时,您需要调用Swiper库来创建幻灯片,请参见下面的简单示例:

请参阅另一个使用Cover 组件的示例。

分页

导航是用户在应用程序中不同页面之间移动的方式。MobileUI的导航遵循标准的本机导航概念,例如iOS中的概念。

要使用此组件,您需要使用以下命令进行安装:

mobileui install page

该组件的功能是:

描述
page 您需要在新页面中添加此类。

该组件的操作非常简单,只需调用该函数即可打开新页面,而仅调用该函数openPage('NAME_FILE_HTML')即可返回backPage().

如果您需要在设备中禁用BackButton,只需定义即可window.disabledBackButton=true.

如果在设备中打开页面时需要禁用效果,只需定义window.disabledOpenPageEffect=true.

对于上面的示例,我们有以下contact 页面:

当您单击列表中的项目时,将contact 显示页面:

打开contact页面时,functionOpenContact 将执行以下功能:

对于高级模式,您可以监听事件openPageclosePage.

包括

该组件在页面中包括一个外部文件HTML。

要使用此组件,您需要使用以下命令进行安装:

mobileui install include
myfile1.htmlmyfile2.html

您可以在包含页面之后调用回调函数:include('myFrame','myfile', myFunctionCallback)

弹窗

弹出窗口是浮动在应用内容上方的视图。弹出窗口提供了一种从用户呈现或收集用户信息的简便方法,通常在以下情况下使用:显示有关当前视图的更多信息,选择一种常用的工具或配置,并显示要在其中一个视图中执行的操作的列表。

Dependency:base and list. The dependencies will be installed together with this module

要使用此组件,您需要使用以下命令进行安装:

mobileui install popover

该组件的功能是:

描述
popover 定义一个新的弹出框。

您的popover需要具备,id而对于您打开popover,只需调用function即可openPopover('ID_YOUR_POPOVER').

See example:

如果您需要在弹出窗口打开后进行绑定事件,只需监听事件即可:

Alert

警报是一种向用户提供选择特定操作或操作列表的能力的好方法。它们还可以为用户提供重要信息,或要求他们做出一个决定(或多个决定)。

从UI的角度来看,可以将警报视为仅覆盖屏幕一部分的“浮动”模式。这意味着“警报”仅应用于快速操作,例如密码验证,小应用程序通知或快速选项。

Dependency:base. The dependencies will be installed together with this module

要使用此组件,您需要使用以下命令进行安装:

mobileui install alert

若要使用,您需要调用函数alert('YOUR MESSAGE') or alert(objectCustomized),并且可以发送更多参数以创建带有标题或多个选项的警报。

参见以下示例:

您可以添加class更高级的自定义警报:

另一种选择像模组件,您可以添加list and input by template 更先进的定制警报:

如果您需要将输入绑定到一个alert公正的监听器事件中:

Toast

toast在一个小弹出窗口中提供有关操作的简单反馈。它仅填充消息所需的空间量,并且当前活动保持可见和交互式。超时后,吐司自动消失。

Dependency:base. The dependencies will be installed together with this module

要使用此组件,您需要使用以下命令进行安装:

mobileui install toast

该组件的功能是:

描述
toast 显示一个Toast消息(一个小的文本弹出窗口)

要使用它,您需要调用函数openToast('YOUR MESSAGE') or openToast(objectCustomized).

See this small example:

Loading

加载组件是一个覆盖层,可防止用户在指示活动时进行交互。默认情况下,它显示基于模式的微调器。动态内容可以与微调器一起传递和显示。旋转器可以隐藏或自定义以使用几个预定义的选项。即使在导航期间,加载指示符也会显示在其他内容之上。

Dependency:alert. The dependencies will be installed together with this module

要使用此组件,您需要使用以下命令进行安装:

mobileui install loading

使用时,您需要调用该函数loading('MESSAGE TO LOADING') or loading()仅用于微调器显示,并且当您可以关闭加载组件时,可以调用该closeLoading() 函数。

您可以在按钮元素中显示加载,只需调用loadingElement('ID_YOUR_ELEMENT') 和关闭调用即可 closeLoading('ID_YOUR_ELEMENT')。可以添加另一个参数: loadingElement('ID_ELEMENT','MESSAGE (optional)', 'LEFT/RIGHT','COLOR')

参见以下示例:

Timeline

要使用此组件,您需要使用以下命令进行安装:

mobileui install timeline

该组件的功能是:

描述
timeline 定义时间线组件。

Chartist

您可能认为这只是另一个图表库。但是Chartist.js 是一个社区的产品,该社区对其他图表库提供的功能感到失望。当然,还有数百种其他出色的图表库,但是使用它们之后,总会有一些您不希望看到的调整。

您可以在Chartist中使用colors theme and icons

要使用此组件,您需要使用以下命令进行安装:

mobileui install chartist

该组件的功能是:

描述
chartist-big为行和条设置大尺寸。
chartist-huge为行和条设置大尺寸。
chartist-white设置图表的配色方案。
chartist-red设置图表的配色方案。
chartist-pink设置图表的配色方案。
chartist-purple设置图表的配色方案。
chartist-deep-purple设置图表的配色方案。
chartist-indigo设置图表的配色方案。
chartist-blue设置图表的配色方案。
chartist-light-blue设置图表的配色方案。
chartist-cyan设置图表的配色方案。
chartist-teal设置图表的配色方案。
chartist-green设置图表的配色方案。
chartist-lime设置图表的配色方案。
chartist-yellow设置图表的配色方案。
chartist-amber设置图表的配色方案。
chartist-orange设置图表的配色方案。
chartist-brown设置图表的配色方案。
chartist-grey设置图表的配色方案。
chartist-blue-grey设置图表的配色方案。
chartist-black设置图表的配色方案。

您可以在此组件中使用基础MobileUI的所有功能。

您可以使用主要方案的颜色以及与其他组件的组合。下面的例子中使用header, grid and list.

在下面的另一个示例中,使用grid和组件具有组合图表chartist-plugin-tooltip。在这种情况下,您需要使用命令安装插件mobileui install chartist-plugin-tooltip

Progress Circle

进度圈是一个简单的组件,广泛用于告知给定指标。您可以通过HTML元素或通过javascript对其进行创建。

Dependency:progressbarjs. The dependencies will be installed together with this module

要使用此组件,您需要使用以下命令进行安装:

mobileui install progress-circle
属性/属性描述
value组件的初始值
title组件标题
subTitle组件字幕
text值的信息,例如:65%,simbol(%)是文本
color外线颜色
textColor文字颜色。使用名称theme colors
textWeight文字的粗细(粗体,300,普通,800等)
titleWeight标题的权重(粗体,300,普通,800等)
subTitleWeight字幕权重(粗体,300,普通,800等)
titleColor标题的颜色。使用名称theme colors
subTitleColor字幕颜色。使用名称theme colors
width尺寸帆布尺寸区域
height尺寸帆布尺寸区域
trailColor尾迹线的颜色。使用名称theme colors
strokeWidth大小描边线。
trailWidth大小描边线。
textSize字体文字大小。示例textSize =“ 25px”
titleSize字体文字大小。示例textSize =“ 25px”
subTitleSize字体文字大小。示例textSize =“ 25px”
fill...
padding...
durationAnimate...

您可以通过JavaScript创建进度圈:

Progress Semicircle

进度半圈是一个简单的组件,广泛用于告知给定指标。您可以通过HTML元素或通过javascript对其进行创建。

Dependency:progressbarjs. The dependencies will be installed together with this module

要使用此组件,您需要使用以下命令进行安装:

mobileui install progress-semicircle
属性/属性描述
value组件的初始值
title组件标题
subTitle组件字幕
text值的信息,例如:65%,simbol(%)是文本
color外线颜色
textColor文字颜色。使用名称theme colors
textWeight文字的粗细(粗体,300,普通,800等)
titleWeight标题的权重(粗体,300,普通,800等)
subTitleWeight字幕权重(粗体,300,普通,800等)
titleColor标题的颜色。使用名称theme colors
subTitleColor字幕颜色。使用名称theme colors
width尺寸帆布尺寸区域
height尺寸帆布尺寸区域
trailColor尾迹线的颜色。使用名称theme colors
strokeWidth大小描边线。
trailWidth大小描边线。
textSize字体文字大小。示例textSize =“ 25px”
textMargin尺寸边距文本。示例textMargin =“ 100px”
titleSize字体文字大小。示例textSize =“ 25px”
subTitleSize字体文字大小。示例textSize =“ 25px”
fill...
padding...
durationAnimate...

Chart Bar

该组件使用的功能提供了有效且可自定义的条形图 base.

要使用此组件,您需要使用以下命令进行安装:

Dependency:base. The dependencies will be installed together with this module
mobileui install chart-bar

该组件的功能是:

描述
chart-bar确定图表栏的面积。
line-white用白色确定图表中的折线。
no-line删除图表中的线。
size-1确定小尺寸。
size-2确定介质尺寸。
size-3确定大尺寸。

MobileUI.JS

该组件是一个简单的库,用于处理JavaScript中的数据,元素状态和Ajax请求。

要使用此组件,您需要使用以下命令进行安装:

mobileui install mobileuijs

最重要的功能是观察对象和数组。为了使用,您需要data在HTML元素中添加名称为object 或的属性 array。如果修改了对象或数组,这将导致元素更改,并且可以使用转义表达式进行显示 ${}

MobileUI.js嵌入了libSuperAgent 以用于调用ajax请求,因为它是轻量级的渐进式ajax API,旨在提供灵活性,可读性和较低的学习曲线。

在此示例中,一个具有object用户属性的:

在我的HTML中,我有一个使用此创建的对象作为数据的元素:

在此示例中,一个具有arraywith对象的用户:

在我的HTML中,我有一个使用此创建的数组作为数据的元素:

如果在数组中添加另一个对象,则HTML元素将更新。实际检查此功能:

该组件的功能是:

功能描述
MobileUI.objectByForm('idElement')返回具有在给定元素中找到的输入值的对象。
MobileUI.formByObject('idElement', object)从通知对象设置输入值。
MobileUI.clearForm('idElement')清除并重置输入元素中的输入。
MobileUI.ajaxAjax使用SuperAgent要求灵活性,可读性和低学习曲线。
MobileUI.show('idElement')显示隐藏的元素。
MobileUI.hide('idElement')隐藏元素。
MobileUI.showHide('idElement')显示隐藏的元素或隐藏可见的元素。
MobileUI.focus('idElement')如果显示了键盘输入,请专注于元素。
MobileUI.disable('idElement')禁用元素和孩子的元素。
MobileUI.enable('idElement')启用一个元素和您的孩子。
document.addEventListener('dataUpdated') 当数据更新时触发事件,您可以检查事件中的数据是什么。详细信息,例如:
document.addEventListener('dataUpdated', function(event){ //event.detail.dataKey //event.detail.dataValue })
MobileUI.formatMoney(number) 返回以money格式设置的字符串,您可以传递小数位数,小数点分隔符和千位分隔符。
例:

MobileUI.formatMoney(256)
MobileUI.formatMoney(1256, 2, ',','.')
MobileUI.myFunction = function(params){} 您可以创建用于数据列表HTML验证的自定义函数,例如$$myFunction{par1}

请参阅使用ajax请求的此示例。

jQuery

jQuery是一个快速,小型且功能丰富的JavaScript库。借助易于使用的API(可在多种浏览器中使用),使HTML文档的遍历和操作,事件处理,动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性,jQuery改变了数百万人编写JavaScript的方式。

要在移动设备上工作,需要JavaScript框架的轻便快速版本,因此MobileUI配备了Zepto.js。

Zepto是用于现代浏览器的极简JavaScript库,具有与jQuery兼容的API。如果您使用jQuery,您已经知道如何使用Zepto。

要使用此组件,您需要使用以下命令进行安装:

mobileui install jquery

请参阅 zeptojs.com上的Zepto文档及其资源。

ProgressBar.js

使用 ProgressBar.js,可以轻松地为Web创建响应式的时尚进度栏。动画即使在移动设备上也表现良好。它提供了一些内置形状,如“直线”,“圆”和“半圆”,但是您也可以使用任何矢量图形编辑器创建自定义形状的进度条。

要使用此组件,您需要使用以下命令进行安装:

mobileui install progressbarjs

MobileUI使用此库来创建另一个组件!

Chart.js

使用画布元素chartjs.org的简单HTML5图表。

要使用此组件,您需要使用以下命令进行安装:

mobileui install chartjs

MobileUI使用此库来创建另一个组件!

Moment.js

Moment.js 是一个轻量级的JavaScript日期库,用于解析,处理和格式化日期。它旨在在浏览器和NodeJS中都可以使用。Moment支持所有标准格式的日期,语言环境,相对时间和时区。

要使用此组件,您需要使用以下命令进行安装:

mobileui install momentjs

见在Moment.js文档和资源momentjs.com/docs.

PullToRefresh

PullToRefresh一个精巧但功能强大的Javascript库,旨在增强Web应用程序的“刷新”功能。无需标记,高度可定制且无依赖!

要使用此组件,您需要使用以下命令进行安装:

mobileui install pulltorefresh

见在PullToRefresh文档和资源github.com/BoxFactura/pulltorefresh.js.

请参阅以下示例: