mobileui / components Goto Github PK

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.

Home Page: https://mobileui.github.io/

License: MIT License

HTML 25.30% CSS 34.09% JavaScript 40.61%

mobile mobile-app mobile-web cordova framework ui ui-components uikit ui-kit

components's Introduction

MobileUI is a simple and easy NPM package to install UI Components for web mobile apps using HTML, CSS and JavaScript.

MobileUI provides a rich variety of UI components specially designed for mobile apps like tabs, side menu, stack navigation and tons of other components such as lists and forms. They all have iOS and Android support, with automatic styling that will change the appearance of the app based on the platform. With MobileUI you can truly support both Android and iOS with the same source code.

See the docs in: https://mobileui.github.io/

Quickstart

The Installation is very simple, but first you need to install Node.js

With Node.js installed, run in your terminal:

npm install mobileui -g

To check the version of mobileui installed, Open the terminal and type mobileui

components's People

Contributors

Stargazers

Watchers

Forkers

gustavoquinalha fluffykitty776 romerito007 barathwaja gustavoprcity luna825 fabiorogeriosj dotenorio dineshdesigner08 andreyhideki muten84 jmazoch vrufine pradoguilherme agneym swa1ps nasirhm marcelobarreto yash-handa galloj sergioartero vfcpwa vitorgit phonsokpheaktra lucasssv moreiraj alfanfirmansyah unoffices gowrav-vishwakarma suzythebeast coda-project techmastersystems singhbhavna cuulee saliu74 mboahost wade1990 mobidian enicassio5 uttamsharma havo07 sulaiman2 cule charlieyqin retschga jack-drake webb24h aurorainternet mwaijohn yangxin1994 sercanarici yield360 ahfato africarisingdev

components's Issues

Guide to contributing

This repository have a guide for contribution? Some code pattern or versioning flow?

Fix position circle icon in base.

Add in .icon-circle style padding-top: 3px;

problem:

Create the component toast

Component: toast

Inspiration in: https://ionicframework.com/docs/components/#toast

Create the component parallax

Component: parallax

Inspiration in: v

Create input type radio

Component: input

Inspiration in: https://ionicframework.com/docs/components/#radio

Create the component Gestures

Component: gesture

Inspiration in: https://ionicframework.com/docs/components/#gestures

Create event and dispatch when page is opening

Documentation about addEventListener('openPage') and addEventListener('backPage')

Menu not work in iOS

Body not transitionX, is there solution without create a div within content?

Create the component Gestures

Component: gestures

Inspiration in: https://ionicframework.com/docs/components/#gestures
See this lib: http://hammerjs.github.io/

Create the component pulse

Component: pulse

Inspiration in: http://materializecss.com/pulse.html

Create grid component

Component: grid

Inspirator in: https://ionicframework.com/docs/v1/components/#grid

Create feature for install font

Component: font

Use same logical getfont NPM package

Create event and dispatch when menu is opening

Documentation about addEventListener('openMenu') and addEventListener('closeMenu')

Create the component popover

Component: popover

Inspiration in: https://ionicframework.com/docs/components/#popovers

Add support Chart.js

Component: chartjs

Using http://www.chartjs.org/samples/latest/

Create the component tab

Component: tab

Inspiration in: https://onsen.io/v2/docs/css.html#tabbar-category

Create input type select

Component: input

Inspiration in: https://ionicframework.com/docs/components/#select

Create component clip-path

Component: clip-path
See this: http://bennettfeely.com/clippy/

Create the component divider

Component: divider

Inspiration in: https://getuikit.com/docs/divider
Use icons base and color

Create chart bar component

Component: chart-bar

Inspiration:

Create the component page

Component: page

Component page is a simple page navigation, the idea is that each page is a new HTML file content only the elements of the new screen. These screens will be called via Ajax using the least possible JavaScript feature.

Create the component dialog

Component: dialog

Inspiration in: https://onsen.io/v2/docs/css.html#dialog-category

Study about create component using clipping and masking css

https://css-tricks.com/clipping-masking-css/

Create option add icon in input

Component: input

Inspiration in: https://ionicframework.com/docs/v1/components/#input-icons

Add effect click in item of list

Component: list

Add effect click, inspiration in: https://ionicframework.com/docs/components/#lists

Create the component carousel

Component: carousel

Inspiration in: http://materializecss.com/carousel.html

Create input type toggle

Component: input

Inspiration in: https://ionicframework.com/docs/components/#toggle

Create the component progress-circular

Component: progress-circular

Inspiration in: http://www.cssscript.com/demo/pure-css-circular-percentage-bar/

Create the component draw in div

Component: draw

Inspiration plugin jQuery: http://intridea.github.io/sketch.js/
Use native JavaScript.
Inspiration idea:

Creater component for add imagem filter

Component: image-filter

See features CSS: https://css-tricks.com/almanac/properties/f/filter/
And this examples: http://bennettfeely.com/image-effects/
http://bennettfeely.com/filters-gallery/

Create component MobileUI.js

Component: mobileuijs

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

Features

Observer object or array to create a element by template, example:

<ul>
  <li data="myArray>Your name is: ${nameOfAtributeObjectByArray}</li>
</ul>
<h1 data="myObject>Your name is: ${nameOfAtributeByObject}</h1>

Create option for add sub itens in .right.

Example:

Create the component accordion

Component: accordion

Inspiration in: http://materializecss.com/collapsible.html

Create input type checkbox

Component: input

Inspiration: https://onsen.io/v2/docs/css.html#checkbox-category

Disable click and drag body effect default browser

Create the component chip

Component: chip

Inspiration in: http://materializecss.com/chips.html

Create the component slider

Component: slider

Inspiration in: https://ionicframework.com/docs/components/#slides

The Icon (tag i) should let the user choose the size and color

When I want to put an Icon with specific color and size, I cannot use the tag i. The "button" tag allows me to change color and size by setting the "big" and "text-blue" classes, but the problem is that the button is clickable and the icon isn't.
I suggest you to improve the Icon, to make easier to customize the icons.

Congrats! the best mobile framework ever! success!! Thanks for helping!

Quando eu quero colocar um Ícone com cor e tamanho específicos eu não posso usar a tag . A tag me permite mudar a cor e tamanho usando as classes "big" e "text-blue", mas o problema é que o botão é clicável e o ícone não.
Sugiro que melhore o Icon para facilitar a customização dos ícones.

Parabéns! melhor framework para mobile!! obrigado pela ajuda!