MobileUI

Getting started

Components base

Components charts

Libs

Getting started

MobileUI was created thinking of making your hybrid application faster and smaller, since you only install what you are really going to use for UI.

Certainly, you will love using it in Progressive Web Apps and Apache Cordova Apps. You can use only the components you want in your projects created with PhoneGap, Ionic Framework, Onsen UI, Framework7 and others focused on creating web apps.

A rich variety of UI components specially designed for mobile apps. MobileUI provides tabs, side menu, stack navigation and tons of other components such as lists and forms. Some of the existing components are displayed differently on Android and iOS, with automatic styling that will change the appearance of the app based on the platform.

The Installation is straightforward, but first, you need to install Node.js. Then, install Cordova via terminal npm install -g cordova(add sudo if you are in Linux).

After that, just execute the command in your terminal: 

npm install -g mobileui

To check if MobileUI is installed or not, open the terminal and type mobileui

Simple Example

Let's create a Simple Example using MobileUI and Cordova:

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

Let's check the commands:

cordova create apptest Create a cordova project
cd apptest Change the directory to your project
mobileui install template cordova-blank Clears the sample files created by the Cordova
mobileui install header For sample we can take header component
mobileui preview Emulates the app to run in the browser

After that add the below code in index.html

By default, an HTTP server will run on port 8080, but you can change it by passing the --port parameter with the desired port, eg --port 8000

Contribute on Github! Edit this section.

Templates

To make application development faster and easier you can use some templates available through MobileUI.

To use a template you need to install with the command: 

mobileui install template name-of-template

See list of template for this moment:

Template Description
cordova-blank Create a files base to app created in Apache Cordova.
cordova-angular1 Create a scaffold project using AngularJS
cordova-phaser Create a scaffold project using Phaser.
cordova-vuejs Create a scaffold project using VueJS.
Contribute on Github! Edit this section.

Base

The base component contains the basic features to use MobileUI and any other component of this kit. With this component, you can use the color themes, icons and some classes of positioning and alignment of elements in the interface.

To use it you need to install with the command: 

mobileui install base

The features of this component are:

ClassDescription
content Create the scrollable viewport of your app.
left Floats any element to the left.
right Floats any element to the right.
top Floats any element to the top.
bottom Floats any element to the bottom.
align-left Align text, icons, and elements to the left.
align-center Align text, icons, and elements to the center.
align-right Align text, icons, and elements to the right.
border Add a small border in element.
hidden Hide a element.
opacity-90 Define 90% of opacity.
opacity-80 Define 80% of opacity.
opacity-70 Define 70% of opacity.
opacity-60 Define 60% of opacity.
opacity-50 Define 50% of opacity.
opacity-40 Define 40% of opacity.
opacity-30 Define 30% of opacity.
opacity-20 Define 20% of opacity.
opacity-10 Define 10% of opacity.
line Create a horizontal line, you need define color using base colors.
padding Add an internal space.
padding-top Add a padding on the top.
margin Add an external space.
radius Add a small rounded border.
radius-big Add a large rounded border.
circle Add a circular border.
radius-left Adds a small border just to the left.
radius-right Adds a small border just to the right.
radius-top Adds a small border just to the top.
ellipsis Limit the display of a text in only one line with periods at the end.
shadow Create a shadow on an element (not text).
space Add a space vertically.
space-big Add a big space vertically.
space-huge Add a huge space vertically.
margin-bottom Add a margin on the bottom.
margin-top Add a margin on the top.
text-shadow Create a shadow in a text.
text-small Leave the text small.
icon-small Leave the icon small.
icon-big Leave the icon big.
icon-huge Leave the icon huge.
icon-extra-huge Leave the icon extra-huge.
text-big Leave the text large.
text-extra-huge Leave the text extra-huge.
text-huge Leave the text huge.
text-light Leave the text thinner.
text-bold Leave a bold text.
text-strong Leave the text thicker.
float-bottom-right Floats an element in the footer to the right.
float-bottom-left Floats an element in the footer to the left.
float-bottom-center Floats an element in the footer to the left.
icon-circle Create a completely round icon.
Contribute on Github! Edit this section.

Colors

MobileUI uses the suggestions material design colors because material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.

This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other. The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS.

Themes enable consistent app styling through surface shades, shadow depth, and ink opacity.

The theme's colors are in base MobileUI, to use it install base through the command: 

mobileui install base

And just add the class in your component to use the color, example:

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
Contribute on Github! Edit this section.

Icons

MobileUI also comes with its own free and open-source icon font, Ionicons, with over 500 icons to choose from.

The icons are in base MobileUI, for use just install base the command: 

mobileui install base

And add icon and the Ionicon class name for the icon to show, which can be easily looked up on the Ionicons homepage. You can change the color add class colors for text.

Contribute on Github! Edit this section.

Fonts

One of MobileUI's primary concerns is UX Design, so we offer a easy way to install new fonts in your web apps.

You can install any source in the Google Fonts repository. Example, I want to install the fonts Open Sans light and Monoton, my command would look like this: 

mobileui install font "Monoton|Open+Sans:300"
Contribute on Github! Edit this section.

Headers are fixed regions at the top of a screen that can contain a title label, and left/right buttons for navigation or to carry out various actions.

To use this component you need install with the command:

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

The features of this component are:

ClassDescription
header Create a fixed bar at the top of the page.
footer Create a fixed bar at the bottom of the page.
sub If used with header create a fixed sub-bar at the top of the page, if using with footer creates a fixed sub-bar at the bottom.
has-header Used in the parent element of the header, or body element, to define that the page uses header.
has-sub-header Used in the parent element of the header and sub, or body element, to define that the page uses sub.
has-footer Used in the parent element of the header and footer, or body element, to define that the page uses header in bottom.
has-sub-footer Used in the parent element of the header with sub and bottom, or body element, to define that the page uses sub in bottom.
avatar Set a fixed size for an image.
border-big Add big border in element.
title Create a title in the header, you can just use h1 element.
icon-badge Create a floating badge next to an icon.
placeholder-whiteDefines a light color for the placeholder.

You can use all features the base MobileUI in this component.

You can put the title in center or right add class align-center or align-right.

For put buttons in left and right you need create a div with class left or right.

You can put buttons with text and another options of buttons settings, see section Button.

If you need the header transparent just add text color class.

If you don't use transparent header you need add class has-header in your content or div for top position add margin. For this example the component list was used too.

For this example you need to install the following components:

mobileui install header list

A secondary header bar can be placed below the original header bar. There are quite a few more ways to customize Headers.

You can add group of buttons in header.

You can create a header in bottom of screen, just add class footer.

Contribute on Github! Edit this section.

Button

You can use colors theme and icons in button. If you need use base mode just add theme color name, you can alter border color using class border-[COLOR], alter text color using class text-[COLOR] and add radius border using class radius.

For use icon in button you need add class icon-text and you can use diferent size, see the examples below.

To use this component you need install with the command:

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

The features of this component are:

ClassDescription
icon-text Determines that the button will have an icon.
icon-right If the button has the class icon-text and icon-right the icon will be aligned to the right.
full Leave the button occupying 100% width of the screen.
big Leave the big button.
small Leave the small button.
huge hugebutton.
buttons-group Create groups of buttons

You can use all features the base MobileUI in this component.

Another type button used in Android is a Tap, for this you can put circle class in button. You can controller what position button.

Contribute on Github! Edit this section.

Input

Inputs are essential in an application to collect user data, so we need to worry about the layout and MobileUI does it for you.

To use this component you need install with the command:

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

The features of this component are:

ClassDescription
label-fixed Define a fixed label beside the input element.
label-float Define a floating label above the input element.
placeholder-whiteDefines a light color for the placeholder.
icon-rightAlign an icon from a field to the right.
range Defines a item of list is range input.

You can use all features the base and list components in this component.

If you put label on the items, you can have a line view of the component.

Use class label-fixed in item of the list for fixed the label.

Input floating is a good option for forms login, just add class label-float in item.

You can put align-right for align your text in right item.

You can use icons in your input. Simply add a class icon and your ion-*. By default the icon will take the left. However, you can put them on the right by adding the class icon-right.

You can be creative and also use the other components such as cover and grid components. And you can install new fonts using feature fonts.

A switch is an input component that holds a boolean value. Like the checkbox, switches are often used to allow the user to switch a setting on or off. Attributes like value, disabled, and checked can be applied to the toggle to control its behavior.

A checkbox is an input component that holds a boolean value. Checkboxes are no different than HTML checkbox inputs. However, like other Ionic components, checkboxes are styled differently on each platform.

Like the checkbox, a radio is an input component that holds a boolean value. Under the hood, radios are no different than HTML radio inputs. Radios are styled differently on each platform

You can use a range input for control that lets users select from a range of values by moving a slider knob along the slider bar or track.

Contribute on Github! Edit this section.

List

To use this component you need install with the command:

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

The features of this component are:

ClassDescription
list Define an element as list. This feature depends on the item to function properly.
item Define an element as item. This feature depends on the list to function properly.
space-small Define a small space between the top and bottom elements.
block Block line space with left avatar.
no-space-top Remove space in top item.
no-space-bottom Remove space in bottom item.
no-border Define that a list or an item has no borders.
border-bottom Define that a list or an item has a bottom border.
full Define an item without internal spaces.
avatar Set a fixed size for an image.
avatar-badge Set a floating badge above the image.
border-big Add big border in item or element.

You can use all features the base MobileUI in this component.

You can put images and icons in list.

You can combinate with others components and class.

Another example of a combination of components header, button and cover.

You can add class mark for change color border.

Contribute on Github! Edit this section.

Tab

Tabs are a horizontal region of buttons or links that allow for a consistent navigation experience between screens. It can contain any combination of text and icons, and is a popular method for enabling mobile navigation.

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

To use this component you need install with the command: 

mobileui install tab

The features of this component are:

ClassDescription
tab Define a new tab.
tab-content Define a area content by tab
active Define that tab and ab-content is open.
badge Create a badge in tab.

Your tab need have id and for you open tab, just call function openTab('ID_YOUR_TAB'). For init you tab opne you need add class `active` in your button by tab and in your content of tab. See this small example:

You can put your tab in footer and using just icon

See this good example using another components MobileUI :)

Contribute on Github! Edit this section.

Card

Card is a popular component in apps mobile. In MobileUI you can create a card using base classes.

If you have installed any component, the base classes are already installed. Otherwise run the command: 

mobileui install base

You can combinate card style and list component, just add class shadow.

Contribute on Github! Edit this section.

Badge

Badges are used to provide additional information about something. In MobileUI you can create a card using base classes.

If you have installed any component, the base classes are already installed. Otherwise run the command: 

mobileui install base

You can combinate this component with others, example a list.

Contribute on Github! Edit this section.

Cover

This component allows you to create teasers using images. Regardless of what kind of element, it will always be centered vertically and horizontally and cover its container without losing its proportions. You can also place additional content, like text or image, on top of the image.

To use this component you need install with the command:

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

The features of this component are:

ClassDescription
cover Define that an element has a background-image and must cover the space required.
cover-200 Fixed height size.
cover-200 Fixed height size.
cover-400 Fixed height size.
cover-500 Fixed height size.
no-padding Remove space inner the cover.
avatar Limit the size of an image and add large border.
float-bottom-left Float an element in the footer on the left.
float-bottom-right Float an element in the footer on the right.
float-bottom-center Float an element in the footer on the center.
gradient Set a gradient effect from black to transparent in the background of an element.
blend-multiply Used when a background-image is set to apply the multiply effect of CSS3 in the background. See more at: multiply blend mode
blend-screen Used when a background-image is set to apply the screen effect of CSS3 in the background. See more at: screen blend mode
blend-overlay Used when a background-image is set to apply the overlay effect of CSS3 in the background. See more at: overlay blend mode
blend-darken Used when a background-image is set to apply the darken effect of CSS3 in the background. See more at: darken blend mode
blend-lighten Used when a background-image is set to apply the lighten effect of CSS3 in the background. See more at: lighten blend mode
blend-color-dodge Used when a background-image is set to apply the color-dodge effect of CSS3 in the background. See more at: color-dodge blend mode
blend-color-burn Used when a background-image is set to apply the color-burn effect of CSS3 in the background. See more at: color-burn blend mode
blend-hard-light Used when a background-image is set to apply the hard-light effect of CSS3 in the background. See more at: hard-light blend mode
blend-soft-light Used when a background-image is set to apply the soft-light effect of CSS3 in the background. See more at: soft-light blend mode
blend-luminosity Used when a background-image is set to apply the luminosity effect of CSS3 in the background. See more at: luminosity blend mode

You can use all features the base MobileUI in this component.

You can add color with transparent layer adding class blend-soft-light, blend-darken, blend-luminosity, blend-multiply, blend-screen and blend-overlay. See this example with header component.

You can combinate with button circle and list component.

You can combinate this component with list, card, badge, icons and grid.

Contribute on Github! Edit this section.

Menu is a side-menu navigation that can be dragged out or toggled to show. The content of a menu will be hidden when the menu is closed. Menu adapts to the appropriate style based on the platform.

To use this component you need install with the command:

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

The features of this component are:

ClassDescription
menu Define an element being a menu, being able to disconnect over the page or to push the page, depending on the operating system.
menu-right Set a menu on the right side.
open Set a menu is open.

Your menu need have id and for you open menu, just call function openMenu('ID_YOUR_MENU'), for close menu just call function closeMenu('ID_YOU_MENU'). By default the menu is created in the left, but you can add class menu-right for create menu in right position.

See example:

You can use all features of colors theme, icons and list in menu.

You can combinate cover, badge, card, header and button for create a good apps.

For advanced mode you can listen to the event openMenu and closeMenu.

Your can enable the Swiper event (open or close the menu when clicking and dragging horizontally):

Contribute on Github! Edit this section.

Grid

MobileUI uses CSS Flexible Box Layout Module standard.

Simply add columns you want in a row, and they'll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns. There's no restriction to a 12 column grid, or having to explicitly state how large each column should be.

The row class name is used to designate, surprise, a row, and col is used for a column. In the demo to the right we chose to have four, then two, columns, but we could have just as easily used 3, 6, 7, 23, etc., it doesn't matter. Point is, add the number of columns your layout requires and don't worry about figuring out the percentages because it figures it out automatically.

To use this component you need install with the command: 

mobileui install grid

The features of this component are:

ClassDescription
row Create a line.
row-between Create a line that the columns are distributed in an equal space.
row-around Create a line that the columns are distributed in an equal space around.
row-stretch Create a stretch row, you need define height value.
column Create a column.
wrap Default all items will be on one line, whit this class add to row all items will wrap onto multiple lines, from top to bottom.
vertical-align-top Align col to the top(Axis Y).
vertical-align-center Align col to the center(Axis Y).
vertical-align-bottom Align col to the bottom(Axis Y).
horizontal-align-left Align col to the left(Axis X).
horizontal-align-center Align col to the center(Axis X).
horizontal-align-right Align col to the right(Axis X).
row-center Center a column on the row.
col Create a column with remaining space of the row.
col-10 Create a column with 10% of the row.
col-20 Create a column with 20% of the row.
col-25 Create a column with 25% of the row.
col-34 Create a column with 33.3333% of the row.
col-50 Create a column with 50% of the row.
col-67 Create a column with 66.6666% of the row.
col-75 Create a column with 75% of the row.
col-80 Create a column with 80% of the row.
col-90 Create a column with 90% of the row.

See this good example using row-between.


See this good example using row-around.


See how is easy align a column in the center, using row-center.


You can create a row with column direction, using column.


See this good example using row and vertical-align-top.


See this good example using row and vertical-align-center.


See this good example using row and vertical-align-bottom.


See this good example using row and horizontal-align-left.


See this good example using row and horizontal-align-center.


See this good example using row and horizontal-align-right.


See this good example using row, horizontal-align-right and vertical-align-center.
You can customize all classes of horizontal-align-X and vertical-align-Y.


When you use the vertical-align-* classes, you need to define height off element, for example: style="height: 100px;".
Or you can use helper class .full-height


See this good example using header, cover and list components.

Contribute on Github! Edit this section.

Swiper

The Swiper component is a powerful multi-page container where each page can be swiped or dragged between of slides. This component is based on the Swiper widget from idangerous.

The lib Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers

There is a lot of combination and configuration for use with great elements in your sliders, for this see the documentation and examples to use Swiper.

To use this component you need install with the command: 

mobileui install swiper

The features of this component are:

ClassDescription
swiper-container Define a container of sliders.
swiper-wrapper Define a wrapper of swiper.
swiper-slide Define a element slide.
vertical-align-center Align all elements in the center of vertical.
swiper-container-autoheight Auto Height
swiper-notification a11y
swiper-wp8-horizontal Windows Phone 8 Fixes
swiper-button-next Arrows
swiper-pagination Pagination Styles
swiper-pagination-bullets Common Styles
swiper-pagination-bullet Bullets
swiper-pagination-white Define a white bullet pagination.
swiper-pagination-black Define a black bullet pagination.
swiper-pagination-progress Progress
swiper-container-3d 3D Container
swiper-scrollbar Scrollbar
swiper-lazy-preloader Preloader

For use you need invoke a Swiper lib for create a slide, see a simple example below:

See another example using a Cover component.

Contribute on Github! Edit this section.

Page

Navigation is how users move between different pages in your app. MobileUI’s navigation follows standard native navigation concepts, like those in iOS.

For use this component you need install with command: 

mobileui install page

The features of this component are:

ClassDescription
page You need add this class in you new page.

The operation of this component is very simple, to open a new page just call the function openPage('NAME_FILE_HTML') and to go back just call the function backPage().

If you need disabled BackButton in your device, just define window.disabledBackButton=true.

If you need disabled effect when the page is openning in your device, just define window.disabledOpenPageEffect=true.

For the example above we have the contacts page:

When you click on an item in the list the contact page appears:

And when opening the contact page the function functionOpenContact will be executed:

For advanced mode you can listener the event openPage and closePage.

Contribute on Github! Edit this section.

Include

This component include an external file HTML in your page.

To use this component you need install with the command: 

mobileui install include
myfile1.html myfile2.html

You can invoke callback function after include page: include('myFrame','myfile', myFunctionCallback)

Contribute on Github! Edit this section.

Popover

The Popover is a view that floats above an app’s content. Popovers provide an easy way to present or gather information from the user and are commonly used in the following situations: Show more info about the current view ,select a commonly used tool or configuration and present a list of actions to perform inside one of your views.

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

To use this component you need install with the command: 

mobileui install popover

The features of this component are:

ClassDescription
popover Define a new popover.

Your popover need have id and for you open popover, just call function openPopover('ID_YOUR_POPOVER').

See example:

If you need make bind some event after popover open just listener event:

Contribute on Github! Edit this section.

Alert

Alerts are a great way to offer the user the ability to choose a specific action or list of actions. They also can provide the user with important information, or require them to make a decision (or multiple decisions).

From a UI perspective, Alerts can be thought of as a type of “floating” modal that covers only a portion of the screen. This means Alerts should only be used for quick actions like password verification, small app notifications, or quick options.

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

To use this component you need install with the command: 

mobileui install alert

To use, you need to call the function alert('YOUR MESSAGE') or alert(objectCustomized), and you can send more paramters for create alert with title or multiple options.

See this small example:

You can add class with more advanced customized alert:

Another option like modal component you can add list and input by template with more advanced customized alert:

If you need make bind in inputs into a alert just listener event:

Contribute on Github! Edit this section.

Toast

A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. Toasts automatically disappear after a timeout.

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

To use this component you need install with the command: 

mobileui install toast

The features of this component are:

ClassDescription
toast Show a Toast message (a little text popup)

To use, you need to call the function openToast('YOUR MESSAGE') or openToast(objectCustomized).

See this small example:

Contribute on Github! Edit this section.

Loading

The Loading component is an overlay that prevents user interaction while indicating activity. By default, it shows a spinner based on the mode. Dynamic content can be passed and displayed with the spinner. The spinner can be hidden or customized to use several predefined options. The loading indicator is presented on top of other content even during navigation.

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

To use this component you need install with the command: 

mobileui install loading

For use you need call the function loading('MESSAGE TO LOADING') or loading() for just spinner show, and when you can close the loading component you call closeLoading() function.

You can show loading in button element, just call loadingElement('ID_YOUR_ELEMENT') and close call closeLoading('ID_YOUR_ELEMENT'). It is posible add another params: loadingElement('ID_ELEMENT','MESSAGE (optional)', 'LEFT/RIGHT','COLOR')

See this small example:

Contribute on Github! Edit this section.

Timeline

To use this component you need install with the command: 

mobileui install timeline

The features of this component are:

ClassDescription
timeline Define a timeline component.
Contribute on Github! Edit this section.

Chartist

You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included.

You can use colors theme and icons in Chartist.

To use this component you need install with the command: 

mobileui install chartist

The features of this component are:

ClassDescription
chartist-big Set a big size for rows and bars..
chartist-huge Set a big size for rows and bars..
chartist-white Sets a color scheme for the chart.
chartist-red Sets a color scheme for the chart.
chartist-pink Sets a color scheme for the chart.
chartist-purple Sets a color scheme for the chart.
chartist-deep-purple Sets a color scheme for the chart.
chartist-indigo Sets a color scheme for the chart.
chartist-blue Sets a color scheme for the chart.
chartist-light-blue Sets a color scheme for the chart.
chartist-cyan Sets a color scheme for the chart.
chartist-teal Sets a color scheme for the chart.
chartist-green Sets a color scheme for the chart.
chartist-lime Sets a color scheme for the chart.
chartist-yellow Sets a color scheme for the chart.
chartist-amber Sets a color scheme for the chart.
chartist-orange Sets a color scheme for the chart.
chartist-brown Sets a color scheme for the chart.
chartist-grey Sets a color scheme for the chart.
chartist-blue-grey Sets a color scheme for the chart.
chartist-black Sets a color scheme for the chart.

You can use all features the base MobileUI in this component.

Your can use the primary scheme colors and combination with others components. Next example use header, grid and list.

Below another example with combined charts using grid and component chartist-plugin-tooltip. In this case you need install plugin with command mobileui install chartist-plugin-tooltip

Contribute on Github! Edit this section.

Progress Circle

Progress circle is a simple component widely used to inform metrics about a given. You can create it either by the HTML element or programmed via javascript.

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

To use this component you need install with the command: 

mobileui install progress-circle
Atribute/property Description
value Initial value for component
title Title for component
subTitle Subtitle for component
text Info of the value, example: 65%, the simbol (%) is the text
color Color of external line
textColor Color of text. Use name theme colors
textWeight Weight of text (bold, 300, normal, 800, etc)
titleWeight Weight of title (bold, 300, normal, 800, etc)
subTitleWeight Weight of subtitle (bold, 300, normal, 800, etc)
titleColor Color of title. Use name theme colors
subTitleColor Color of subtitle. Use name theme colors
width Size canvas size area
height Size canvas size area
trailColor Color of trail line. Use name theme colors
strokeWidth Size stroke line.
trailWidth Size stroke line.
textSize Size font text. Example textSize="25px"
titleSize Size font text. Example textSize="25px"
subTitleSize Size font text. Example textSize="25px"
fill ...
padding ...
durationAnimate ...

You can create a progress circle by JavaScript:

Contribute on Github! Edit this section.

Progress Semicircle

Progress semi circle is a simple component widely used to inform metrics about a given. You can create it either by the HTML element or programmed via javascript.

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

To use this component you need install with the command: 

mobileui install progress-semicircle
Atribute/property Description
value Initial value for component
title Title for component
subTitle Subtitle for component
text Info of the value, example: 65%, the simbol (%) is the text
color Color of external line
textColor Color of text. Use name theme colors
textWeight Weight of text (bold, 300, normal, 800, etc)
titleWeight Weight of title (bold, 300, normal, 800, etc)
subTitleWeight Weight of subtitle (bold, 300, normal, 800, etc)
titleColor Color of title. Use name theme colors
subTitleColor Color of subtitle. Use name theme colors
width Size canvas size area
height Size canvas size area
trailColor Color of trail line. Use name theme colors
strokeWidth Size stroke line.
trailWidth Size stroke line.
textSize Size font text. Example textSize="25px"
textMargin Size margin text. Example textMargin="100px"
titleSize Size font text. Example textSize="25px"
subTitleSize Size font text. Example textSize="25px"
fill ...
padding ...
durationAnimate ...
Contribute on Github! Edit this section.

Chart Bar

This component provides an efficient and customizable bar chart using the capabilities of the base.

To use this component you need install with the command:

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

The features of this component are:

ClassDescription
chart-bar Determines a area of chart bar.
line-white Determines line in chart with white color.
no-line Remove line in chart.
size-1 Determines the small size.
size-2 Determines the medium size.
size-3 Determines the big size.
Contribute on Github! Edit this section.

MobileUI.JS

This component is a simple library for manipulating data, states of elements and Ajax request in JavaScript.

To use this component you need install with the command: 

mobileui install mobileuijs

The most important functionality is the observation in objects and arrays. For use you need add attribute data in your HTML element with the name of a object or array. This causes an element to be changed if the object or array is modified and you can display using a escape expression ${}

MobileUI.js embed the lib SuperAgent for call ajax request, because it is light-weight progressive ajax API crafted for flexibility, readability, and a low learning curve.

In this example a have a object with attributes of user:

And in my HTML I have an element that uses this created object as data:

In this example a have a array with objects of user:

And in my HTML I have an element that uses this created array as data:

If you add another object in array, the HTML elements will update. Check this feature in action:

The features of this component are:

Function Description
MobileUI.objectByForm('idElement') Returns an object with the values of the inputs found within the given element.
MobileUI.formByObject('idElement', object) Set the input values from an informed object.
MobileUI.clearForm('idElement') Clear and reset inputs within the entered element.
MobileUI.ajax Ajax request flexibility, readability, and a low learning curve using SuperAgent.
MobileUI.show('idElement') Display an element that is hidden.
MobileUI.hide('idElement') Hidden an element.
MobileUI.showHide('idElement') Display an element that is hidden or hides an element if it is visible.
MobileUI.focus('idElement') Focus on an element, if input to keyboard is displayed.
MobileUI.disable('idElement') Disable an element and your children's.
MobileUI.enable('idElement') Enable an element and your children's.
document.addEventListener('dataUpdated') Fire event when data is updated, you can check whats is data in the event.detail, ex:
document.addEventListener('dataUpdated', function(event){ //event.detail.dataKey //event.detail.dataValue })
MobileUI.formatMoney(number) Returns a string formatted in money, you can pass the number of decimal places, the decimal separator, and the thousands separator.
Example:

MobileUI.formatMoney(256)
MobileUI.formatMoney(1256, 2, ',','.')
MobileUI.myFunction = function(params){} You can create a custom function for use in data list HTML validation, example $$myFunction{par1}

See this example using ajax request.

Contribute on Github! Edit this section.

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

To work on mobile devices requires a light and fast version of the frameworks for JavaScript, so MobileUI is equipped with Zepto.js.

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.

To use this component you need install with the command: 

mobileui install jquery

See the Zepto documentation and its resources at zeptojs.com.

Contribute on Github! Edit this section.

ProgressBar.js

With ProgressBar.js, it's easy to create responsive and stylish progress bars for the web. Animations perform well even on mobile devices. It provides a few built‑in shapes like Line, Circle and SemiCircle but you can also create custom shaped progress bars with any vector graphic editor.

To use this component you need install with the command: 

mobileui install progressbarjs

MobileUI use this lib for create another components!

Contribute on Github! Edit this section.

Chart.js

Simple HTML5 Charts using the canvas element chartjs.org.

To use this component you need install with the command: 

mobileui install chartjs

MobileUI use this lib for create another components!

Contribute on Github! Edit this section.

Moment.js

Moment.js is a lightweight JavaScript date library for parsing, manipulating, and formatting dates. It is design to work in both the browser and in NodeJS. Moment supports dates in all standard formats, locales, relative time, and time zones.

To use this component you need install with the command: 

mobileui install momentjs

See the Moment.js documentation and its resources at momentjs.com/docs.

Contribute on Github! Edit this section.

PullToRefresh

PullToRefresh A small, but powerful Javascript library crafted to power your webapp's pull to refresh feature. No markup needed, highly customizable and dependency-free!

To use this component you need install with the command: 

mobileui install pulltorefresh

See the PullToRefresh documentation and its resources at github.com/BoxFactura/pulltorefresh.js.

See this example:

Contribute on Github! Edit this section.