-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
executable file
·4222 lines (4128 loc) · 198 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>MobileUI - The UI components for web mobile apps</title>
<meta name="description" content="Nice UI components for web mobile apps." />
<meta property="og:type" content="website" />
<meta property="og:title" content="The UI components for web mobile apps" />
<meta property="og:site_name" content="MobileUI" />
<meta property="og:url" content="https://mobileui.github.io" />
<meta property="og:image" content="https://mobileui.github.io/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="manifest" href="/icons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/icons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=Chewy|Dosis|Monoton|Raleway:300,400,700|Roboto:300,400,900|Open+Sans:300," rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
<link rel="stylesheet" href="/mobileui/imports.css">
<link rel="stylesheet" href="/css/master.css">
<link rel="stylesheet" href="/mobileui/chartist-plugin-tooltip.min.css">
</head>
<body>
<div class="top font-dosis">
<a href="/"><img src="/img/logo.png" alt="MobileUI"></a>
<iframe class="header-star" src="https://ghbtns.com/github-btn.html?user=MobileUI&repo=components&type=star" frameborder="0" scrolling="0" width="55" height="20"></iframe>
<ul>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#getting-started">GETTING STARTED</a>
</li>
<li>
<a href="#colors">DOCS</a>
</li>
<li>
<a href="https://github.com/mobileui/components">GITHUB</a>
</li>
</ul>
</div>
<div class="banner">
<h1 class="font-raleway">Create beautiful and efficient hybrid mobile web apps!</h1>
<h2 class="font-raleway">You can use the components yourself or in Progressive Web Apps and Apache Cordova Apps.</h2>
<ul class="hero-cards">
<li class="hero-card-1"></li>
<li class="hero-card-2"></li>
<li class="hero-card-3"></li>
<li class="hero-card-4"></li>
<li class="hero-card-5"></li>
<li class="hero-card-6"></li>
<li class="hero-card-7"></li>
<li class="hero-card-8"></li>
<li class="hero-card-9"></li>
</ul>
</div>
<div class="menuland font-raleway"><div class="list radius grey-50"><div class="item space-small icon ion-search" id="searchComponent"><input type="text" placeholder="Search..." autofocus="autofocus"></div></div><h1>Getting started</h1><ul><a href="#getting-started" onclick="goDoc('getting-started')"><li>Install</li></a><a href="#templates" onclick="goDoc('templates')"><li>Templates</li></a><a href="/demos" onclick="goDoc('demos')"><li>Demos</li></a></ul><h1>Components base</h1><ul><a href="#base" onclick="goDoc('base')"><li>Base</li></a><a href="#colors" onclick="goDoc('colors')"><li>Colors</li></a><a href="#icons" onclick="goDoc('icons')"><li>Icons</li></a><a href="#fonts" onclick="goDoc('fonts')"><li>Fonts</li></a><a href="#header" onclick="goDoc('header')"><li>Header</li></a><a href="#button" onclick="goDoc('button')"><li>Button</li></a><a href="#input" onclick="goDoc('input')"><li>Input</li></a><a href="#list" onclick="goDoc('list')"><li>List</li></a><a href="#tab" onclick="goDoc('tab')"><li>Tab</li></a><a href="#card" onclick="goDoc('card')"><li>Card</li></a><a href="#badge" onclick="goDoc('badge')"><li>Badge</li></a><a href="#cover" onclick="goDoc('cover')"><li>Cover</li></a><a href="#menu" onclick="goDoc('menu')"><li>Menu</li></a><a href="#grid" onclick="goDoc('grid')"><li>Grid</li></a><a href="#swiper" onclick="goDoc('swiper')"><li>Swiper</li></a><a href="#page" onclick="goDoc('page')"><li>Page</li></a><a href="#include" onclick="goDoc('include')"><li>Include</li></a><a href="#popover" onclick="goDoc('popover')"><li>Popover</li></a><a href="#alert" onclick="goDoc('alert')"><li>Alert</li></a><a href="#toast" onclick="goDoc('toast')"><li>Toast</li></a><a href="#loading" onclick="goDoc('loading')"><li>Loading</li></a><a href="#timeline" onclick="goDoc('timeline')"><li>Timeline</li></a></ul><h1>Components charts</h1><ul><a href="#chartist" onclick="goDoc('chartist')"><li>Chartist</li></a><a href="#progress-circle" onclick="goDoc('progress-circle')"><li>Progress Circle</li></a><a href="#progress-semicircle" onclick="goDoc('progress-semicircle')"><li>Progress Semicircle</li></a><a href="#chart-bar" onclick="goDoc('chart-bar')"><li>Chart Bar</li></a></ul><h1>Libs</h1><ul><a href="#mobileuijs" onclick="goDoc('mobileuijs')"><li>MobileUI.js</li></a><a href="#jquery" onclick="goDoc('jquery')"><li>jQuery</li></a><a href="#progressbarjs" onclick="goDoc('progressbarjs')"><li>ProgressBar.js</li></a><a href="#chartjs" onclick="goDoc('chartjs')"><li>Chart.js</li></a><a href="#momentjs" onclick="goDoc('momentjs')"><li>Moment.js</li></a><a href="#pulltorefresh" onclick="goDoc('pulltorefresh')"><li>PullToRefresh</li></a></ul></div><div class="content-land font-raleway"><div class="content-doc-reader">
<h2 class="title-doc" id="getting-started">Getting started</h2>
<p>
MobileUI was created thinking of making your hybrid application <strong>faster</strong> and <strong>smaller</strong>, since you only install what you
are really going to use for UI.
</p>
<p>
Certainly, you will love using it in <a href="https://developers.google.com/web/progressive-web-apps/" target="_blank">Progressive Web Apps</a>
and <a href="https://cordova.apache.org/" target="_blank">Apache Cordova Apps</a>.
You can use only the components you want in your projects created with <a href="http://phonegap.com/" target="_blank">PhoneGap</a>,
<a href="http://ionicframework.com/" target="_blank">Ionic Framework</a>, <a href="https://onsen.io/" target="_blank">Onsen UI</a>,
<a href="http://framework7.io/" target="_blank">Framework7</a> and others focused on creating web apps.
</p>
<p>
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.
</p>
<p>
The Installation is straightforward, but first, you need to install <a href="https://nodejs.org" target="_blank">Node.js</a>.
Then, install Cordova via terminal <strong>npm install -g cordova</strong>(add sudo if you are in Linux).
</p>
<p>
After that, just execute the command in your terminal:
</p>
<pre>npm install -g mobileui</pre>
<p>To check if MobileUI is installed or not, open the terminal and type <strong>mobileui</strong></p>
<h4><strong>Simple Example</strong></h4>
<p>Let's create a Simple Example using MobileUI and Cordova:</p>
<pre>
cordova create apptest
cd apptest
mobileui install template cordova-blank
mobileui install header
mobileui preview
</pre>
<p>Let's check the commands:</p>
<table class="tableDoc">
<tr>
<td>
<code>cordova create apptest</code>
</td>
<td>Create a cordova project</td>
</tr>
<tr>
<td>
<code>cd apptest</code>
</td>
<td> Change the directory to your project</td>
</tr>
<tr>
<td>
<code>mobileui install template cordova-blank</code>
</td>
<td>Clears the sample files created by the Cordova</td>
</tr>
<tr>
<td>
<code>mobileui install header</code>
</td>
<td>For sample we can take header component</td>
</tr>
<tr>
<td>
<code>mobileui preview</code>
</td>
<td>Emulates the app to run in the browser</td>
</tr>
</table>
<p> After that add the below code in index.html </p>
<textarea class="bind-just-code" mode="text/html">
<div class="header purple">
<button class="left icon ion-navicon" name="button"></button>
<h1>Application title</h1>
</div></textarea>
<p>By default, an HTTP server will run on port 8080, but you can change it by passing the <code>--port</code> parameter with the desired port, eg <code>--port 8000</code></p>
<a href="https://github.com/MobileUI/components/tree/master/base/install.html" target="_blank" class="button-contribute right border-grey-300 text-grey-600"><i class="text-black icon ion-social-github"></i>Contribute on Github! Edit this section.</a>
</div><div class="content-doc-reader">
<h2 class="title-doc" id="templates">Templates</h2>
<p>
To make application development faster and easier you can use some templates available through MobileUI.
</p>
<p>
To use a template you need to install with the command:
</p>
<pre>mobileui install template name-of-template</pre>
<p>
See list of template for this moment:
</p>
<div class="content-table">
<table class="tableDoc">
<tbody>
<tr>
<th>Template</th>
<th>Description</th>
</tr>
<tr>
<td><code>cordova-blank</code></td>
<td>Create a files base to app created in Apache Cordova.</td>
</tr>
<tr>
<td><code>cordova-angular1</code></td>
<td>Create a scaffold project using AngularJS</td>
</tr>
<tr>
<td><code>cordova-phaser</code></td>
<td>Create a scaffold project using Phaser.</td>
</tr>
<tr>
<td><code>cordova-vuejs</code></td>
<td>Create a scaffold project using VueJS.</td>
</tr>
</tbody>
</table>
</div>
<a href="https://github.com/MobileUI/components/tree/master/base/templates.html" target="_blank" class="button-contribute right border-grey-300 text-grey-600"><i class="text-black icon ion-social-github"></i>Contribute on Github! Edit this section.</a>
</div><div class="content-doc-reader">
<h2 class="title-doc" id="base">Base</h2>
<p>
The base component contains the basic features to use MobileUI and any other component of this kit.
With this component, you can use the <a href="#colors">color themes</a>, <a href="#icons">icons</a> and some classes of positioning and alignment of elements in the interface.
</p>
<p>
To use it you need to install with the command:
</p>
<pre>mobileui install base</pre>
<p>The features of this component are:</p><div class="content-table"><table class="tableDoc"><tr><th>Class</th><th>Description</th></tr><tr><td><code>content </code></td><td>Create the scrollable viewport of your app.</td></tr><tr><td><code>left </code></td><td>Floats any element to the left.</td></tr><tr><td><code>right </code></td><td>Floats any element to the right.</td></tr><tr><td><code>top </code></td><td>Floats any element to the top.</td></tr><tr><td><code>bottom </code></td><td>Floats any element to the bottom.</td></tr><tr><td><code>align-left </code></td><td>Align text, icons, and elements to the left.</td></tr><tr><td><code>align-center </code></td><td>Align text, icons, and elements to the center.</td></tr><tr><td><code>align-right </code></td><td>Align text, icons, and elements to the right.</td></tr><tr><td><code>border </code></td><td>Add a small border in element.</td></tr><tr><td><code>hidden </code></td><td>Hide a element.</td></tr><tr><td><code>opacity-90 </code></td><td>Define 90% of opacity.</td></tr><tr><td><code>opacity-80 </code></td><td>Define 80% of opacity.</td></tr><tr><td><code>opacity-70 </code></td><td>Define 70% of opacity.</td></tr><tr><td><code>opacity-60 </code></td><td>Define 60% of opacity.</td></tr><tr><td><code>opacity-50 </code></td><td>Define 50% of opacity.</td></tr><tr><td><code>opacity-40 </code></td><td>Define 40% of opacity.</td></tr><tr><td><code>opacity-30 </code></td><td>Define 30% of opacity.</td></tr><tr><td><code>opacity-20 </code></td><td>Define 20% of opacity.</td></tr><tr><td><code>opacity-10 </code></td><td>Define 10% of opacity.</td></tr><tr><td><code>line </code></td><td>Create a horizontal line, you need define color using <code>base</code> colors.</td></tr><tr><td><code>padding </code></td><td>Add an internal space.</td></tr><tr><td><code>padding-top </code></td><td>Add a padding on the top.</td></tr><tr><td><code>margin </code></td><td>Add an external space.</td></tr><tr><td><code>radius </code></td><td>Add a small rounded border.</td></tr><tr><td><code>radius-big </code></td><td>Add a large rounded border.</td></tr><tr><td><code>circle </code></td><td>Add a circular border.</td></tr><tr><td><code>radius-left </code></td><td>Adds a small border just to the left.</td></tr><tr><td><code>radius-right </code></td><td>Adds a small border just to the right.</td></tr><tr><td><code>radius-top </code></td><td>Adds a small border just to the top.</td></tr><tr><td><code>ellipsis </code></td><td>Limit the display of a text in only one line with periods at the end.</td></tr><tr><td><code>shadow </code></td><td>Create a shadow on an element (not text).</td></tr><tr><td><code>space </code></td><td>Add a space vertically.</td></tr><tr><td><code>space-big </code></td><td>Add a big space vertically.</td></tr><tr><td><code>space-huge </code></td><td>Add a huge space vertically.</td></tr><tr><td><code>margin-bottom </code></td><td>Add a margin on the bottom.</td></tr><tr><td><code>margin-top </code></td><td>Add a margin on the top.</td></tr><tr><td><code>text-shadow </code></td><td>Create a shadow in a text.</td></tr><tr><td><code>text-small </code></td><td>Leave the text small.</td></tr><tr><td><code>icon-small </code></td><td>Leave the icon small.</td></tr><tr><td><code>icon-big </code></td><td>Leave the icon big.</td></tr><tr><td><code>icon-huge </code></td><td>Leave the icon huge.</td></tr><tr><td><code>icon-extra-huge </code></td><td>Leave the icon extra-huge.</td></tr><tr><td><code>text-big </code></td><td>Leave the text large.</td></tr><tr><td><code>text-extra-huge </code></td><td>Leave the text extra-huge.</td></tr><tr><td><code>text-huge </code></td><td>Leave the text huge.</td></tr><tr><td><code>text-light </code></td><td>Leave the text thinner.</td></tr><tr><td><code>text-bold </code></td><td>Leave a bold text.</td></tr><tr><td><code>text-strong </code></td><td>Leave the text thicker.</td></tr><tr><td><code>float-bottom-right </code></td><td>Floats an element in the footer to the right.</td></tr><tr><td><code>float-bottom-left </code></td><td>Floats an element in the footer to the left.</td></tr><tr><td><code>float-bottom-center </code></td><td>Floats an element in the footer to the left.</td></tr><tr><td><code>icon-circle </code></td><td>Create a completely round icon.</td></tr></table></div>
<a href="https://github.com/MobileUI/components/tree/master/base/base.html" target="_blank" class="button-contribute right border-grey-300 text-grey-600"><i class="text-black icon ion-social-github"></i>Contribute on Github! Edit this section.</a>
</div><div class="content-doc-reader">
<h2 class="title-doc" id="colors">Colors</h2>
<p>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.</p>
<p>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.</p>
<p>Themes enable consistent app styling through surface shades, shadow depth, and ink opacity.</p>
<p>
The theme's colors are in base MobileUI, to use it install base through the command:
</p>
<pre>mobileui install base</pre>
<p>And just add the class in your component to use the color, example: </p>
<textarea class="bind-code" mode="text/html" header-absolute="true" replace="body,div|grey-100,grey-100 body" height-preview="430px">
<body class="grey-100">
<div class="header indigo">
<button class="left icon ion-navicon"></button>
<button class="right icon ion-plus-circled"></button>
</div>
<div class="content has-header">
<div class="row padding indigo">
<div class="col-25 padding">
<img class="avatar circle" src="/img/33.jpg" />
</div>
<div class="col padding">
<h1 class="text-big text-light">Jeanette Fletcher</h1>
<p class="text-blue-200">[email protected]</p>
</div>
</div>
<div class="row align-center">
<div class="col padding light-blue">
<h1 class="text-huge text-strong">12</h1>
<p>remaning tasks</p>
</div>
<div class="col padding pink-400">
<h1 class="text-huge text-strong">32</h1>
<p>completed tasks</p>
</div>
</div>
<div class="list no-border">
<div class="item border-bottom text-grey-300">
<h1 class="text-grey-600 text-light">Finish landing page concept</h1>
<span class="purple radius padding text-small">design</span>
<span class="blue radius padding text-small">freelance</span>
<span class="red radius padding text-small">web</span>
<i class="right icon ion-ios-arrow-right text-grey-700 text-huge"></i>
</div>
<div class="item border-bottom text-grey-300">
<h1 class="text-grey-600 text-light">Design app illustrations</h1>
<span class="purple radius padding text-small">design</span>
<span class="blue radius padding text-small">freelance</span>
<span class="green radius padding text-small">mobile</span>
<i class="right icon ion-ios-arrow-right text-grey-700 text-huge"></i>
</div>
</div>
</div>
</body></textarea>
<h3 class="sub-title-doc">Colors MobileUI:</h3>
<div class="color-palettes">
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #f44336;">red</li>
<li class="color dark" style="background-color: #ffebee;">red-50</li>
<li class="color dark" style="background-color: #ffcdd2;">red-100</li>
<li class="color dark" style="background-color: #ef9a9a">red-200</li>
<li class="color dark" style="background-color: #e57373;">red-300</li>
<li class="color" style="background-color: #ef5350;">red-400</li>
<li class="color" style="background-color: #f44336;">red-500</li>
<li class="color" style="background-color: #e53935;">red-600</li>
<li class="color" style="background-color: #d32f2f;">red-700</li>
<li class="color" style="background-color: #c62828;">red-800</li>
<li class="color" style="background-color: #b71c1c;">red-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #E91E63;">pink</li>
<li class="color dark" style="background-color: #fce4ec;">pink-50</li>
<li class="color dark" style="background-color: #f8bbd0;">pink-100</li>
<li class="color dark" style="background-color: #f48fb1;">pink-200</li>
<li class="color light-strong" style="background-color: #f06292;">Pink-300</li>
<li class="color " style="background-color: #ec407a;">pink-400</li>
<li class="color" style="background-color: #e91e63;">pink-500</li>
<li class="color" style="background-color: #d81b60;">pink-600</li>
<li class="color" style="background-color: #c2185b;">pink-700</li>
<li class="color" style="background-color: #ad1457;">pink-800</li>
<li class="color" style="background-color: #880e4f;">pink-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #9c27b0;">purple</li>
<li class="color dark" style="background-color: #f3e5f5;">purple-50</li>
<li class="color dark" style="background-color: #e1bee7;">purple-100</li>
<li class="color dark" style="background-color: #ce93d8;">purple-200</li>
<li class="color light-strong" style="background-color: #ba68c8;">purple-300</li>
<li class="color light-strong" style="background-color: #ab47bc;">purple-400</li>
<li class="color" style="background-color: #9c27b0;">purple-500</li>
<li class="color" style="background-color: #8e24aa;">purple-600</li>
<li class="color" style="background-color: #7b1fa2;">purple-700</li>
<li class="color" style="background-color: #6a1b9a;">purple-800</li>
<li class="color" style="background-color: #4a148c;">purple-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #673ab7;">deep-purple</li>
<li class="color dark" style="background-color: #ede7f6;">deep-purple-50</li>
<li class="color dark" style="background-color: #d1c4e9;">deep-purple-100</li>
<li class="color dark" style="background-color: #b39ddb;">deep-purple-200</li>
<li class="color" style="background-color: #9575cd;">deep-purple-300</li>
<li class="color" style="background-color: #7e57c2;">deep-purple-400</li>
<li class="color" style="background-color: #673ab7;">deep-purple-500</li>
<li class="color" style="background-color: #5e35b1;">deep-purple-600</li>
<li class="color" style="background-color: #512da8;">deep-purple-700</li>
<li class="color" style="background-color: #4527a0;">deep-purple-800</li>
<li class="color" style="background-color: #311b92;">deep-purple-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #3f51b5;">indigo</li>
<li class="color dark" style="background-color: #e8eaf6;">indigo-50</li>
<li class="color dark" style="background-color: #c5cae9;">indigo-100</li>
<li class="color dark" style="background-color: #9fa8da;">indigo-200</li>
<li class="color" style="background-color: #7986cb;">indigo-300</li>
<li class="color" style="background-color: #5c6bc0;">indigo-400</li>
<li class="color" style="background-color: #3f51b5;">indigo-500</li>
<li class="color" style="background-color: #3949ab;">indigo-600</li>
<li class="color" style="background-color: #303f9f;">indigo-700</li>
<li class="color" style="background-color: #283593;">indigo-800</li>
<li class="color" style="background-color: #1a237e;">indigo-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #2196F3;">blue</li>
<li class="color dark" style="background-color: #e3f2fd;">blue-50</li>
<li class="color dark" style="background-color: #bbdefb;">blue-100</li>
<li class="color dark" style="background-color: #90caf9;">blue-200</li>
<li class="color dark" style="background-color: #64b5f6;">blue-300</li>
<li class="color dark" style="background-color: #42a5f5;">blue-400</li>
<li class="color light-strong" style="background-color: #2196f3;">blue-500</li>
<li class="color" style="background-color: #1e88e5;">blue-600</li>
<li class="color" style="background-color: #1976d2;">blue-700</li>
<li class="color" style="background-color: #1565c0;">blue-800</li>
<li class="color" style="background-color: #0d47a1;">blue-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #03a9f4;">light-blue</li>
<li class="color dark" style="background-color: #e1f5fe;">light-blue-50</li>
<li class="color dark" style="background-color: #b3e5fc;">light-blue-100</li>
<li class="color dark" style="background-color: #81d4fa;">light-blue-200</li>
<li class="color dark" style="background-color: #4fc3f7;">light-blue-300</li>
<li class="color dark" style="background-color: #29b6f6;">light-blue-400</li>
<li class="color dark" style="background-color: #03a9f4;">light-blue-500</li>
<li class="color light-strong" style="background-color: #039be5;">light-blue-600</li>
<li class="color" style="background-color: #0288d1;">light-blue-700</li>
<li class="color" style="background-color: #0277bd;">light-blue-800</li>
<li class="color" style="background-color: #01579b;">light-blue-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #00bcd4;">cyan</li>
<li class="color dark" style="background-color: #e0f7fa;">cyan-50</li>
<li class="color dark" style="background-color: #b2ebf2;">cyan-100</li>
<li class="color dark" style="background-color: #80deea;">cyan-200</li>
<li class="color dark" style="background-color: #4dd0e1;">cyan-300</li>
<li class="color dark" style="background-color: #26c6da;">cyan-400</li>
<li class="color dark" style="background-color: #00bcd4;">cyan-500</li>
<li class="color dark" style="background-color: #00acc1;">cyan-600</li>
<li class="color" style="background-color: #0097a7;">cyan-700</li>
<li class="color" style="background-color: #00838f;">cyan-800</li>
<li class="color" style="background-color: #006064;">cyan-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #009688;">teal</li>
<li class="color dark" style="background-color: #e0f2f1;">teal-50</li>
<li class="color dark" style="background-color: #b2dfdb;">teal-100</li>
<li class="color dark" style="background-color: #80cbc4;">teal-200</li>
<li class="color dark" style="background-color: #4db6ac;">teal-300</li>
<li class="color dark" style="background-color: #26a69a;">teal-400</li>
<li class="color light-strong" style="background-color: #009688;">teal-500</li>
<li class="color light-strong" style="background-color: #00897b;">teal-600</li>
<li class="color light-strong" style="background-color: #00796b;">teal-700</li>
<li class="color" style="background-color: #00695c;">teal-800</li>
<li class="color" style="background-color: #004d40;">teal-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #4caf50;">green</li>
<li class="color dark" style="background-color: #e8f5e9;">green-50</li>
<li class="color dark" style="background-color: #c8e6c9;">green-100</li>
<li class="color dark" style="background-color: #a5d6a7;">green-200</li>
<li class="color dark" style="background-color: #81c784;">green-300</li>
<li class="color dark" style="background-color: #66bb6a;">green-400</li>
<li class="color dark" style="background-color: #4caf50;">green-500</li>
<li class="color light-strong" style="background-color: #43a047;">green-600</li>
<li class="color" style="background-color: #388e3c;">green-700</li>
<li class="color" style="background-color: #2e7d32;">green-800</li>
<li class="color" style="background-color: #1b5e20;">green-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #8bc34a;">light-green</li>
<li class="color dark" style="background-color: #f1f8e9;">light-green-50</li>
<li class="color dark" style="background-color: #dcedc8;">light-green-100</li>
<li class="color dark" style="background-color: #c5e1a5;">light-green-200</li>
<li class="color dark" style="background-color: #aed581;">light-green-300</li>
<li class="color dark" style="background-color: #9ccc65;">light-green-400</li>
<li class="color dark" style="background-color: #8bc34a;">light-green-500</li>
<li class="color dark" style="background-color: #7cb342;">light-green-600</li>
<li class="color light-strong" style="background-color: #689f38;">light-green-700</li>
<li class="color" style="background-color: #558b2f;">light-green-800</li>
<li class="color" style="background-color: #33691e;">light-green-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #cddc39;">lime</li>
<li class="color dark" style="background-color: #f9fbe7;">lime-50</li>
<li class="color dark" style="background-color: #f0f4c3;">lime-100</li>
<li class="color dark" style="background-color: #e6ee9c;">lime-200</li>
<li class="color dark" style="background-color: #dce775;">lime-300</li>
<li class="color dark" style="background-color: #d4e157;">lime-400</li>
<li class="color dark" style="background-color: #cddc39;">lime-500</li>
<li class="color dark" style="background-color: #c0ca33;">lime-600</li>
<li class="color dark" style="background-color: #afb42b;">lime-700</li>
<li class="color dark" style="background-color: #9e9d24;">lime-800</li>
<li class="color" style="background-color: #827717;">lime-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #ffeb3b;">yellow</li>
<li class="color dark" style="background-color: #fffde7;">yellow-50</li>
<li class="color dark" style="background-color: #fff9c4;">yellow-100</li>
<li class="color dark" style="background-color: #fff59d;">yellow-200</li>
<li class="color dark" style="background-color: #fff176;">yellow-300</li>
<li class="color dark" style="background-color: #ffee58;">yellow-400</li>
<li class="color dark" style="background-color: #ffeb3b;">yellow-500</li>
<li class="color dark" style="background-color: #fdd835;">yellow-600</li>
<li class="color dark" style="background-color: #fbc02d;">yellow-700</li>
<li class="color dark" style="background-color: #f9a825;">yellow-800</li>
<li class="color dark" style="background-color: #f57f17;">yellow-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #ffc107;">amber</li>
<li class="color dark" style="background-color: #fff8e1;">amber-50</li>
<li class="color dark" style="background-color: #ffecb3;">amber-100</li>
<li class="color dark" style="background-color: #ffe082;">amber-200</li>
<li class="color dark" style="background-color: #ffd54f;">amber-300</li>
<li class="color dark" style="background-color: #ffca28;">amber-400</li>
<li class="color dark" style="background-color: #ffc107;">amber-500</li>
<li class="color dark" style="background-color: #ffb300;">amber-600</li>
<li class="color dark" style="background-color: #ffa000;">amber-700</li>
<li class="color dark" style="background-color: #ff8f00;">amber-800</li>
<li class="color dark" style="background-color: #ff6f00;">amber-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #ff9800;">orange</li>
<li class="color dark" style="background-color: #fff3e0;">orange-50</li>
<li class="color dark" style="background-color: #ffe0b2;">orange-100</li>
<li class="color dark" style="background-color: #ffcc80;">orange-200</li>
<li class="color dark" style="background-color: #ffb74d;">orange-300</li>
<li class="color dark" style="background-color: #ffa726;">orange-400</li>
<li class="color dark" style="background-color: #ff9800;">orange-500</li>
<li class="color dark" style="background-color: #fb8c00;">orange-600</li>
<li class="color dark" style="background-color: #f57c00;">orange-700</li>
<li class="color light-strong" style="background-color: #ef6c00;">orange-800</li>
<li class="color" style="background-color: #e65100;">orange-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #ff5722;">deep-orange</li>
<li class="color dark" style="background-color: #fbe9e7;">deep-orange-50</li>
<li class="color dark" style="background-color: #ffccbc;">deep-orange-100</li>
<li class="color dark" style="background-color: #ffab91;">deep-orange-200</li>
<li class="color dark" style="background-color: #ff8a65;">deep-orange-300</li>
<li class="color dark" style="background-color: #ff7043;">deep-orange-400</li>
<li class="color light-strong" style="background-color: #ff5722;">deep-orange-500</li>
<li class="color" style="background-color: #f4511e;">deep-orange-600</li>
<li class="color" style="background-color: #e64a19;">deep-orange-700</li>
<li class="color" style="background-color: #d84315;">deep-orange-800</li>
<li class="color" style="background-color: #bf360c;">deep-orange-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #795548;">brown</li>
<li class="color dark" style="background-color: #efebe9;">brown-50</li>
<li class="color dark" style="background-color: #d7ccc8;">brown-100</li>
<li class="color dark" style="background-color: #bcaaa4;">brown-200</li>
<li class="color light-strong" style="background-color: #a1887f;">brown-300</li>
<li class="color" style="background-color: #8d6e63;">brown-400</li>
<li class="color" style="background-color: #795548;">brown-500</li>
<li class="color" style="background-color: #6d4c41;">brown-600</li>
<li class="color" style="background-color: #5d4037;">brown-700</li>
<li class="color" style="background-color: #4e342e;">brown-800</li>
<li class="color" style="background-color: #3e2723;">brown-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #9e9e9e;">grey</li>
<li class="color dark" style="background-color: #fafafa;">grey-50</li>
<li class="color dark" style="background-color: #f5f5f5;">grey-100</li>
<li class="color dark" style="background-color: #eeeeee;">grey-200</li>
<li class="color dark" style="background-color: #e0e0e0;">grey-300</li>
<li class="color dark" style="background-color: #bdbdbd;">grey-400</li>
<li class="color dark" style="background-color: #9e9e9e;">grey-500</li>
<li class="color" style="background-color: #757575;">grey-600</li>
<li class="color" style="background-color: #616161;">grey-700</li>
<li class="color" style="background-color: #424242;">grey-800</li>
<li class="color" style="background-color: #212121;">grey-900</li>
</ul>
</section>
<section class="color-group">
<ul>
<li class="color main-color" style="background-color: #607d8b;">blue-grey</li>
<li class="color dark" style="background-color: #eceff1;">blue-grey-50</li>
<li class="color dark" style="background-color: #cfd8dc;">blue-grey-100</li>
<li class="color dark" style="background-color: #b0bec5;">blue-grey-200</li>
<li class="color dark" style="background-color: #90a4ae;">blue-grey-300</li>
<li class="color light-strong" style="background-color: #78909c;">blue-grey-400</li>
<li class="color" style="background-color: #607d8b;">blue-grey-500</li>
<li class="color" style="background-color: #546e7a;">blue-grey-600</li>
<li class="color" style="background-color: #455a64;">blue-grey-700</li>
<li class="color" style="background-color: #37474f;">blue-grey-800</li>
<li class="color" style="background-color: #263238;">blue-grey-900</li>
</ul>
</section>
<section class="color-group" style="background-image:url(/img/roller.jpg);background-size:cover">
<ul>
<li class="color" style="background-color: #000000;">black</li>
<li class="color dark" style="background-color: #ffffff;">white</li>
<li class="color" style="background-color: rgba(0,0,0,0.9);">black-opacity-90</li>
<li class="color dark" style="background-color: rgba(255,255,255,0.9);">white-opacity-90</li>
<li class="color" style="background-color: rgba(0,0,0,0.8);">black-opacity-70</li>
<li class="color dark" style="background-color: rgba(255,255,255,0.7);">white-opacity-70</li>
<li class="color" style="background-color: rgba(0,0,0,0.7);">black-opacity-50</li>
<li class="color dark" style="background-color: rgba(255,255,255,0.5);">white-opacity-50</li>
<li class="color" style="background-color: rgba(0,0,0,0.6);">black-opacity-30</li>
<li class="color dark" style="background-color: rgba(255,255,255,0.3);">white-opacity-30</li>
<li class="color" style="background-color: rgba(0,0,0,0.5);">black-opacity-10</li>
<li class="color dark" style="background-color: rgba(255,255,255,0.1);">white-opacity-10</li>
</ul>
</section>
</div>
<a href="https://github.com/MobileUI/components/tree/master/base/colors.html" target="_blank" class="button-contribute right border-grey-300 text-grey-600"><i class="text-black icon ion-social-github"></i>Contribute on Github! Edit this section.</a>
</div><div class="content-doc-reader">
<h2 class="title-doc" id="icons">Icons</h2>
<p>
MobileUI also comes with its own free and open-source icon font, <a href="https://ionicons.com/v2/" target="_blank">Ionicons</a>, with over 500 icons to choose from.
</p>
<p>
The icons are in base MobileUI, for use just install base the command:
</p>
<pre>mobileui install base</pre>
<p>
And add <code>icon</code> and the Ionicon class name for the icon to show, which can be easily looked up on the <a href="https://ionicons.com/v2/" target="_blank">Ionicons</a> homepage. You can change the color add class colors for text.
</p>
<textarea class="bind-code" mode="text/html" custom-class="result-icon">
<i class="icon ion-navicon"></i>
<i class="icon ion-heart red"></i>
<i class="icon ion-refresh"></i>
<i class="icon ion-chatbox-working"></i>
<i class="icon ion-wifi green"></i>
<i class="icon ion-gear-a"></i>
<i class="icon ion-trash-a red"></i>
<i class="icon ion-clipboard blue"></i>
<i class="icon ion-pie-graph"></i>
<i class="icon ion-person-add"></i>
<br>
<i class="icon ion-ios-heart-outline"></i>
<i class="icon ion-ios-home-outline"></i>
<i class="icon ion-ios-cloud-upload-outline"></i>
<i class="icon ion-ios-loop"></i>
<i class="icon ion-ios-cart-outline"></i>
<i class="icon ion-ios-gear-outline"></i>
<i class="icon ion-ios-alarm-outline"></i>
<i class="icon ion-ios-calendar-outline"></i>
<i class="icon ion-ios-camera-outline"></i>
<i class="icon ion-ios-location-outline"></i>
<br>
<i class="icon ion-android-favorite"></i>
<i class="icon ion-android-alarm-clock"></i>
<i class="icon ion-android-calendar"></i>
<i class="icon ion-android-star-outline"></i>
<i class="icon ion-android-star-half"></i>
<i class="icon ion-android-star"></i>
<i class="icon ion-android-restaurant"></i>
<i class="icon ion-android-drafts"></i>
<i class="icon ion-android-delete"></i>
<i class="icon ion-android-happy"></i>
</textarea>
<a href="https://github.com/MobileUI/components/tree/master/base/icons.html" target="_blank" class="button-contribute right border-grey-300 text-grey-600"><i class="text-black icon ion-social-github"></i>Contribute on Github! Edit this section.</a>
</div><div class="content-doc-reader">
<h2 class="title-doc" id="fonts">Fonts</h2>
<p>
One of MobileUI's primary concerns is UX Design, so we offer a easy way to install new fonts in your web apps.
</p>
<p>
You can install any source in the <a href="https://fonts.google.com" target="_blank">Google Fonts</a> repository.
Example, I want to install the fonts <a href="https://fonts.google.com/?selection.family=Monoton|Open+Sans:300&query=open" target="_blank">Open Sans light and Monoton</a>,
my command would look like this:
</p>
<pre>mobileui install font "Monoton|Open+Sans:300"</pre>
<textarea class="bind-code" mode="text/html">
<div class="blue align-center padding">
<h1 style="font-family: 'Monoton', cursive;font-size:50px">
Google Fonts
</h1>
<h2 style="font-family: 'Open Sans', sans-serif;font-size:22px">
Making the web more beautiful, fast, and open through great typography
</h2>
</div></textarea>
<a href="https://github.com/MobileUI/components/tree/master/base/fonts.html" target="_blank" class="button-contribute right border-grey-300 text-grey-600"><i class="text-black icon ion-social-github"></i>Contribute on Github! Edit this section.</a>
</div><div class="content-doc-reader">
<h2 class="title-doc" id="header">Header</h2>
<p>
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.
</p>
<p>
To use this component you need install with the command:
</p>
<div class="dependency tooltip">
<strong>Dependency:</strong> <code>base</code> and <code>button</code>.
<span class="tooltiptext">The dependencies will be installed together with this module</span>
</div>
<pre>mobileui install header</pre>
<p>The features of this component are:</p><div class="content-table"><table class="tableDoc"><tr><th>Class</th><th>Description</th></tr><tr><td><code>header </code></td><td>Create a fixed bar at the top of the page.</td></tr><tr><td><code>footer </code></td><td>Create a fixed bar at the bottom of the page.</td></tr><tr><td><code>sub </code></td><td>If used with <code>header</code> create a fixed sub-bar at the top of the page, if using with <code>footer</code> creates a fixed sub-bar at the bottom.</td></tr><tr><td><code>has-header </code></td><td>Used in the parent element of the <code>header</code>, or body element, to define that the page uses <code>header</code>.</td></tr><tr><td><code>has-sub-header </code></td><td>Used in the parent element of the <code>header</code> and <code>sub</code>, or body element, to define that the page uses <code>sub</code>.</td></tr><tr><td><code>has-footer </code></td><td>Used in the parent element of the <code>header</code> and <code>footer</code>, or body element, to define that the page uses <code>header</code> in bottom.</td></tr><tr><td><code>has-sub-footer </code></td><td>Used in the parent element of the <code>header</code> with <code>sub</code> and <code>bottom</code>, or body element, to define that the page uses <code>sub</code> in bottom.</td></tr><tr><td><code>avatar </code></td><td>Set a fixed size for an image.</td></tr><tr><td><code>border-big </code></td><td>Add big border in element.</td></tr><tr><td><code>title </code></td><td>Create a title in the header, you can just use h1 element.</td></tr><tr><td><code>icon-badge </code></td><td>Create a floating badge next to an icon.</td></tr><tr><td><code>placeholder-white</code></td><td>Defines a light color for the placeholder.</td></tr></table></div>
<p>You can use all features the <a href="#base">base</a> MobileUI in this component.</p>
<textarea class="bind-code" mode="text/html">
<div class="header purple">
<button class="left icon ion-navicon" name="button"></button>
<h1>Application title</h1>
</div></textarea>
<p>
You can put the title in center or right add class <code>align-center</code> or <code>align-right</code>.
</p>
<textarea class="bind-code" mode="text/html">
<div class="header red">
<h1 class="align-center">Application title in center</h1>
</div></textarea>
<p>
For put buttons in left and right you need create a div with class <code>left</code> or <code>right</code>.
</p>
<textarea class="bind-code" mode="text/html">
<div class="header blue">
<div class="left">
<button class="icon ion-navicon-round"></button>
</div>
<h1>Application title</h1>
<div class="right">
<button class="icon ion-search"></button>
<button class="icon ion-android-more-vertical"></button>
</div>
</div></textarea>
<p>
You can put buttons with text and another options of buttons settings, see section <a href="#button">Button</a>.
</p>
<textarea class="bind-code" mode="text/html">
<div class="header blue-grey">
<div class="left">
<button class="icon-text blue-grey-900">
<i class="icon ion-android-arrow-back"></i>
Back
</button>
</div>
<div class="right">
<button class="cyan">New</button>
</div>
</div></textarea>
<p>
If you need the header transparent just add text color class.
</p>
<textarea class="bind-code" mode="text/html" header-absolute="true">
<div class="header text-white">
<div class="left">
<button class="icon ion-navicon-round"></button>
</div>
<h1>Application title</h1>
<div class="right">
<button class="icon ion-search"></button>
<button class="icon ion-android-more-vertical"></button>
</div>
</div>
<img src="/img/city.jpg" /></textarea>
<p>
If you don't use transparent header you need add class <code>has-header</code> in your <code>content</code> or div for top position add margin. For this example the component <a href="#list">list</a> was used too.
</p>
<p>For this example you need to install the following components:</p>
<pre>mobileui install header list</pre>
<textarea class="bind-code" mode="text/html" header-absolute="true" replace="body,div">
<body class="pink-50">
<div class="header pink">
<div class="left">
<button class="icon ion-android-arrow-back"></button>
</div>
<h2>Contacts</h2>
<p>List of your contacts</p>
</div>
<div class="content has-header padding">
<p>List of contacts.</p>
<div class="list white">
<div class="item">
<h2>Fábio Rogério</h2>
<p>[email protected]</p>
</div>
<div class="item">
<h2>Silva José</h2>
<p>[email protected]</p>
</div>
<div class="item">
<h2>Rosangela Oliveira</h2>
<p>[email protected]</p>
</div>
</div>
</div>
</body></textarea>
<p>A secondary header bar can be placed below the original header bar. There are quite a few more ways to customize Headers.</p>
<textarea class="bind-code" mode="text/html" header-absolute="true" replace="body,div">
<body class="has-header has-sub-header grey-50 padding">
<div class="header green-900">
<div class="left">
<button class="icon ion-android-arrow-back"></button>
</div>
<div class="title">
Contacts
</div>
</div>
<div class="header sub green-800">
<div class="title">
List of contacts
</div>
</div>
<p>Content here.</p>
</body></textarea>
<p>You can add group of buttons in header.</p>
<textarea class="bind-code" mode="text/html" header-absolute="true" replace="body,div">
<body class="has-header has-sub-header grey-50 padding">
<div class="header indigo">
<div class="left">
<button class="icon ion-android-arrow-back"></button>
</div>
<div class="title">
Contacts
</div>
</div>
<div class="header sub indigo-400">
<div class="buttons-group full small">
<button class="indigo-400 border-white radius-left">Left</button>
<button class="indigo-400 border-white">Middle</button>
<button class="indigo-400 border-white radius-right">Right</button>
</div>
</div>
<p>Content here.</p>
</body></textarea>
<p>
You can create a header in bottom of screen, just add class <code>footer</code>.
</p>
<textarea class="bind-code" mode="text/html" header-absolute="true" replace="body,div" height-preview="400px">
<body class="has-footer has-sub-footer grey-50 padding">
<div class="footer green-900">
<div class="right">
<button class="icon ion-gear-b"></button>
</div>
<div class="title">
Device connected
</div>
</div>
<div class="footer sub green-800">
<div class="title">
All items are ready!
</div>
</div>
<p>Content here.</p>
</body></textarea>
<a href="https://github.com/MobileUI/components/tree/master/header/index.html" target="_blank" class="button-contribute right border-grey-300 text-grey-600"><i class="text-black icon ion-social-github"></i>Contribute on Github! Edit this section.</a>
</div><div class="content-doc-reader">
<h2 class="title-doc" id="button">Button</h2>
<p>
You can use <a href="#colors">colors theme</a> and <a href="#icons">icons</a> in button. If you need use base mode just add theme color name,
you can alter border color using class <code>border-[COLOR]</code>, alter text color using class <code>text-[COLOR]</code> and add radius border using class <code>radius</code>.
</p>
<p>For use icon in button you need add class <code>icon-text</code> and you can use diferent size, see the examples below.</p>
<p>
To use this component you need install with the command:
</p>
<div class="dependency tooltip">
<strong>Dependency:</strong> <code>base</code>.
<span class="tooltiptext">The dependencies will be installed together with this module</span>
</div>
<pre>mobileui install button</pre>
<p>The features of this component are:</p><div class="content-table"><table class="tableDoc"><tr><th>Class</th><th>Description</th></tr><tr><td><code>icon-text </code></td><td>Determines that the button will have an icon.</td></tr><tr><td><code>icon-right </code></td><td>If the button has the class <code>icon-text</code> and <code>icon-right</code> the icon will be aligned to the right.</td></tr><tr><td><code>full </code></td><td>Leave the button occupying 100% width of the screen.</td></tr><tr><td><code>big </code></td><td>Leave the big button.</td></tr><tr><td><code>small </code></td><td>Leave the small button.</td></tr><tr><td><code>huge </code></td><td>hugebutton.</td></tr><tr><td><code>buttons-group </code></td><td>Create groups of buttons</td></tr></table></div>
<p>You can use all features the <a href="#base">base</a> MobileUI in this component.</p>
<textarea class="bind-code" mode="text/html">
<button class="green">Login with email</button>
<button class="border-green text-green">Create a new user</button>
<p>Customize as you wish:</p>
<button class="brown border-brown-800 text-brown-50 radius icon-text">
<i class="icon ion-ios-settings-strong"></i>
Setting
</button>
<button class="brown border-brown-800 text-brown-50 radius icon-text icon-right">
<i class="icon ion-ios-settings-strong"></i>
Setting
</button>
<p>Social login:</p>
<button class="blue icon-text">
<i class="icon ion-social-facebook"></i>
Login with Facebook
</button>
<p>Different sizes:</p>
<button class="red icon-text big">
<i class="icon ion-trash-b"></i>
Delete
</button>
<button class="cyan">Edit</button>
<button class="purple small">View</button>
<p>Full size:</p>
<button class="pink full">View more detail</button>
<p>Group buttons:</p>
<div class="buttons-group full">
<button class="teal border-teal-700 radius-left">Left</button>
<button class="teal border-teal-700">Middle</button>
<button class="teal-700 border-teal-700">Middle</button>
<button class="teal border-teal-700 radius-right">Right</button>
</div>
<p>And different size in group:</p>
<div class="buttons-group full small">
<button class="red border-red-600 radius-left">Left</button>
<button class="red border-red-600">Middle</button>
<button class="red border-red-600 radius-right">Right</button>
</div></textarea>
<p>Another type button used in Android is a Tap, for this you can put <code>circle</code> class in button. You can controller what position button.</p>
<textarea class="bind-code" mode="text/html" height-preview="400px" replace="body,div">
<body class="padding grey-200">
<button class="green circle icon ion-plus"></button>
<button class="red circle icon ion-headphone shadow"></button>
<button class="green circle icon ion-chatbox shadow float-bottom-right"></button>
<button class="blue circle icon ion-ios-gear shadow float-bottom-left"></button>
</body></textarea>
<a href="https://github.com/MobileUI/components/tree/master/button/index.html" target="_blank" class="button-contribute right border-grey-300 text-grey-600"><i class="text-black icon ion-social-github"></i>Contribute on Github! Edit this section.</a>
</div><div class="content-doc-reader">
<h2 class="title-doc" id="input">Input</h2>
<p>
Inputs are essential in an application to collect user data, so we need to worry about the layout and MobileUI does it for you.
</p>
<p>
To use this component you need install with the command:
</p>
<div class="dependency tooltip">
<strong>Dependency:</strong> <code>base</code> and <code>list</code>.
<span class="tooltiptext">The dependencies will be installed together with this module</span>
</div>
<pre>mobileui install input</pre>
<p>The features of this component are:</p><div class="content-table"><table class="tableDoc"><tr><th>Class</th><th>Description</th></tr><tr><td><code>label-fixed </code></td><td>Define a fixed label beside the input element.</td></tr><tr><td><code>label-float </code></td><td>Define a floating label above the input element.</td></tr><tr><td><code>placeholder-white</code></td><td>Defines a light color for the placeholder.</td></tr><tr><td><code>icon-right</code></td><td>Align an icon from a field to the right.</td></tr><tr><td><code>range </code></td><td>Defines a item of list is range input.</td></tr></table></div>
<p>You can use all features the <a href="#base">base</a> and <a href="#list">list</a> components in this component.</p>
<textarea class="bind-code" mode="text/html">
<div class="list">
<div class="item">
<input type="text" placeholder="First name">
</div>
<div class="item">
<input type="text" placeholder="Last name">
</div>
<div class="item">
<select>
<option>Choose type register</option>
<option>Publisher</option>
<option>Administrator</option>
</select>
</div>
<div class="item">
<button class="green radius full">Create a new user</button>
</div>
</div></textarea>
<p>If you put label on the items, you can have a line view of the component.</p>
<textarea class="bind-code" mode="text/html">
<div class="list">
<div class="item">
<label class="text-orange">Username</label>
<input type="text">
</div>
<div class="item">
<label class="text-orange">Password</label>
<input type="password">
</div>
<div class="item">
<button class="orange-900 radius full">Login user</button>
</div>
</div></textarea>
<p>Use class <code>label-fixed</code> in <code>item</code> of the list for fixed the label.</p>
<textarea class="bind-code" mode="text/html">
<div class="list">
<div class="item label-fixed">
<label>Username</label>
<input type="text">
</div>
<div class="item label-fixed">
<label>Password</label>
<input type="password">
</div>
<div class="item">
<button class="blue radius full">Login user</button>
</div>
</div></textarea>
<p>Input floating is a good option for forms login, just add class <code>label-float</code> in item.</p>
<textarea class="bind-code" mode="text/html">
<div class="list">
<div class="item label-float">
<label>Username</label>
<input type="text">
</div>
<div class="item label-float">
<label>Password</label>
<input type="password">
</div>
<div class="item">
<button class="pink radius full">Login user</button>
</div>
</div></textarea>
<p>You can put <code>align-right</code> for align your text in right item.</p>
<textarea class="bind-code" mode="text/html">
<div class="list">
<div class="item label-fixed">
<label>Value</label>
<input type="number" class="align-right">
</div>
</div></textarea>
<p>
You can use <a href="#icons">icons</a> in your input. Simply add a class <code>icon</code> and your <code>ion-*</code>.
By default the icon will take the left. However, you can put them on the right by adding the class <code>icon-right</code>.
</p>
<textarea class="bind-code" mode="text/html">
<div class="list">
<div class="item icon ion-search">
<input type="text" placeholder="Search">
</div>
<div class="item icon ion-person">
<select>
<option value="">Select a user</option>
</select>
</div>
<div class="item icon ion-heart text-red">
<input type="text" placeholder="Search">
</div>
<div class="item icon ion-music-note icon-right">
<input type="text" placeholder="Search">
</div>
<div class="item icon ion-person pink text-pink-300">
<input class="placeholder-white text-white" type="text" placeholder="Enter your name">
</div>
</div>
<p>Radius input</p>
<div class="list no-border">
<div class="item radius icon ion-person grey-200">
<input type="text" placeholder="Enter your name">
</div>