diff --git a/app/app.ts b/app/app.ts
index 39afe4e..7ae3141 100644
--- a/app/app.ts
+++ b/app/app.ts
@@ -25,6 +25,11 @@ import {GridPage} from './pages/grid/grid';
import {IconsPage} from './pages/icons/icons';
import {InputPage} from './pages/inputs/inputs';
import {LoadingPage} from './pages/loading/loading';
+import {BasicPage} from './pages/popover/popover';
+import {RadioPage} from './pages/radio/radio';
+import {RangePage} from './pages/range/range';
+import {SearchbarPage} from './pages/searchbar/searchbar';
+import {SegmentPage} from './pages/segment/segment';
@Component({
@@ -54,6 +59,11 @@ constructor(private platform:Platform, private menu: MenuController ) {
{ title: "Icons",component:IconsPage},
{ title: "Inputs",component:InputPage},
{ title: "Loading",component:LoadingPage},
+ { title: "Popover", component:BasicPage},
+ { title: "Radio", component:RadioPage},
+ { title: "Range", component:RangePage},
+ { title: "Searchbar", component:SearchbarPage},
+ { title: "Segment", component:SegmentPage},
{ title: "My ChatRooms", component: HomePage },
{ title: "Public Chat Rooms", component: TabsPage },
{ title: "Toolbar" , component: ToolbarPage}
diff --git a/app/pages/buttons/buttons.html b/app/pages/buttons/buttons.html
new file mode 100644
index 0000000..df8728a
--- /dev/null
+++ b/app/pages/buttons/buttons.html
@@ -0,0 +1,12 @@
+
+
+
+ Buttons
+
+
+
+
+
+
diff --git a/app/pages/buttons/buttons.scss b/app/pages/buttons/buttons.scss
new file mode 100644
index 0000000..8da4005
--- /dev/null
+++ b/app/pages/buttons/buttons.scss
@@ -0,0 +1,3 @@
+.button {
+
+}
diff --git a/app/pages/buttons/buttons.ts b/app/pages/buttons/buttons.ts
new file mode 100644
index 0000000..bbb73b9
--- /dev/null
+++ b/app/pages/buttons/buttons.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {NavController, MenuController} from 'ionic-angular';
+
+@Component({
+ templateUrl: 'build/pages/buttons/buttons.html'
+})
+export class ButtonPage {
+ constructor(private navController: NavController,menu: MenuController) {
+ menu.enable(true);
+ }
+}
diff --git a/app/pages/popover/popover.html b/app/pages/popover/popover.html
new file mode 100644
index 0000000..56c2142
--- /dev/null
+++ b/app/pages/popover/popover.html
@@ -0,0 +1,17 @@
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
diff --git a/app/pages/popover/popover.scss b/app/pages/popover/popover.scss
new file mode 100644
index 0000000..2e42c50
--- /dev/null
+++ b/app/pages/popover/popover.scss
@@ -0,0 +1,3 @@
+.home {
+
+}
diff --git a/app/pages/popover/popover.ts b/app/pages/popover/popover.ts
new file mode 100644
index 0000000..74f9080
--- /dev/null
+++ b/app/pages/popover/popover.ts
@@ -0,0 +1,157 @@
+import {Component, ViewChild, ElementRef} from '@angular/core';
+import {App, Popover, NavController, Content, NavParams} from 'ionic-angular';
+
+@Component({
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Athelas
+
+
+
+ Charter
+
+
+
+ Iowan
+
+
+
+ Palatino
+
+
+
+ San Francisco
+
+
+
+ Seravek
+
+
+
+ Times New Roman
+
+
+
+ `,
+})
+class PopoverPage {
+ background: string;
+ contentEle: any;
+ textEle: any;
+ fontFamily;
+
+ colors = {
+ 'white': {
+ 'bg': 'rgb(255, 255, 255)',
+ 'fg': 'rgb(0, 0, 0)'
+ },
+ 'tan': {
+ 'bg': 'rgb(249, 241, 228)',
+ 'fg': 'rgb(0, 0, 0)'
+ },
+ 'grey': {
+ 'bg': 'rgb(76, 75, 80)',
+ 'fg': 'rgb(255, 255, 255)'
+ },
+ 'black': {
+ 'bg': 'rgb(0, 0, 0)',
+ 'fg': 'rgb(255, 255, 255)'
+ },
+ };
+
+ constructor(private navParams: NavParams) {
+
+ }
+
+ ngOnInit() {
+ if (this.navParams.data) {
+ this.contentEle = this.navParams.data.contentEle;
+ this.textEle = this.navParams.data.textEle;
+
+ this.background = this.getColorName(this.contentEle.style.backgroundColor);
+ this.setFontFamily();
+ }
+ }
+
+ getColorName(background) {
+ let colorName = 'white';
+
+ if (!background) return 'white';
+
+ for(var key in this.colors) {
+ if (this.colors[key].bg == background) {
+ colorName = key;
+ }
+ }
+
+ return colorName;
+ }
+
+ setFontFamily() {
+ if (this.textEle.style.fontFamily) {
+ this.fontFamily = this.textEle.style.fontFamily.replace(/'/g, "");
+ }
+ }
+
+ changeBackground(color) {
+ this.background = color;
+ this.contentEle.style.backgroundColor = this.colors[color].bg;
+ this.textEle.style.color = this.colors[color].fg;
+ }
+
+ changeFontSize(direction) {
+ this.textEle.style.fontSize = direction;
+ }
+
+ changeFontFamily() {
+ if (this.fontFamily) this.textEle.style.fontFamily = this.fontFamily;
+ }
+}
+
+
+@Component({
+ templateUrl: 'build/pages/popover/popover.html'
+
+})
+export class BasicPage {
+ @ViewChild('popoverContent', {read: ElementRef}) content: ElementRef;
+ @ViewChild('popoverText', {read: ElementRef}) text: ElementRef;
+
+ constructor(private nav: NavController) {
+
+ }
+
+ presentPopover(ev) {
+ let popover = Popover.create(PopoverPage, {
+ contentEle: this.content.nativeElement,
+ textEle: this.text.nativeElement
+ });
+
+ this.nav.present(popover, {
+ ev: ev
+ });
+ }
+}
\ No newline at end of file
diff --git a/app/pages/radio/radio.html b/app/pages/radio/radio.html
new file mode 100644
index 0000000..f8fee03
--- /dev/null
+++ b/app/pages/radio/radio.html
@@ -0,0 +1,66 @@
+
+
+
+ Radio
+
+
+
+
+
+
diff --git a/app/pages/radio/radio.scss b/app/pages/radio/radio.scss
new file mode 100644
index 0000000..2e42c50
--- /dev/null
+++ b/app/pages/radio/radio.scss
@@ -0,0 +1,3 @@
+.home {
+
+}
diff --git a/app/pages/radio/radio.ts b/app/pages/radio/radio.ts
new file mode 100644
index 0000000..2aa3179
--- /dev/null
+++ b/app/pages/radio/radio.ts
@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {NavController, MenuController} from 'ionic-angular';
+import {
+ Control,
+ ControlGroup,
+ NgForm,
+ Validators,
+ ControlValueAccessor,
+ NgControlName,
+ NgFormModel,
+ FormBuilder
+} from '@angular/common';
+
+@Component({
+ templateUrl: 'build/pages/radio/radio.html'
+})
+export class RadioPage {
+ langs;
+ langForm;
+ constructor(private navController: NavController,menu: MenuController) {
+ menu.enable(true);
+ this.langs = new Control("");
+ this.langForm = new ControlGroup({
+ "langs" : this.langs
+ });
+ }
+ doSubmit(event){
+ console.log('Submitting form', this.langForm.value);
+ event.preventDefault();
+ }
+}
diff --git a/app/pages/range/range.html b/app/pages/range/range.html
new file mode 100644
index 0000000..546bfe9
--- /dev/null
+++ b/app/pages/range/range.html
@@ -0,0 +1,61 @@
+
+
+
+ Range
+
+
+
+
+
+
+ Adjust Display
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Adjust Text
+
+
+
+ A
+ A
+
+
+
+
+
+
diff --git a/app/pages/range/range.scss b/app/pages/range/range.scss
new file mode 100644
index 0000000..2e42c50
--- /dev/null
+++ b/app/pages/range/range.scss
@@ -0,0 +1,3 @@
+.home {
+
+}
diff --git a/app/pages/range/range.ts b/app/pages/range/range.ts
new file mode 100644
index 0000000..49e88d8
--- /dev/null
+++ b/app/pages/range/range.ts
@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+import {NavController, MenuController} from 'ionic-angular';
+
+@Component({
+ templateUrl: 'build/pages/range/range.html'
+})
+export class RangePage {
+ brightness: number = 20;
+ contrast: number = 0;
+ warmth: number = 1300;
+ structure: any = {lower: 33, upper: 60};
+ text: number = 0;
+ constructor(private navController: NavController,menu: MenuController) {
+ menu.enable(true);
+ }
+}
diff --git a/app/pages/searchbar/searchbar.html b/app/pages/searchbar/searchbar.html
new file mode 100644
index 0000000..7dd6543
--- /dev/null
+++ b/app/pages/searchbar/searchbar.html
@@ -0,0 +1,17 @@
+
+
+
+ Searchbar
+
+
+
+
+
+
+
+ {{ item }}
+
+
+
diff --git a/app/pages/searchbar/searchbar.scss b/app/pages/searchbar/searchbar.scss
new file mode 100644
index 0000000..2e42c50
--- /dev/null
+++ b/app/pages/searchbar/searchbar.scss
@@ -0,0 +1,3 @@
+.home {
+
+}
diff --git a/app/pages/searchbar/searchbar.ts b/app/pages/searchbar/searchbar.ts
new file mode 100644
index 0000000..39cd411
--- /dev/null
+++ b/app/pages/searchbar/searchbar.ts
@@ -0,0 +1,68 @@
+import {Component} from '@angular/core';
+import {NavController, MenuController} from 'ionic-angular';
+
+@Component({
+ templateUrl: 'build/pages/searchbar/searchbar.html'
+})
+export class SearchbarPage {
+ items;
+ constructor(private navController: NavController,menu: MenuController) {
+ menu.enable(true);
+ this.initializeItems();
+ }
+ initializeItems() {
+ this.items = [
+ 'Amsterdam',
+ 'Bogota',
+ 'Buenos Aires',
+ 'Cairo',
+ 'Dhaka',
+ 'Edinburgh',
+ 'Geneva',
+ 'Genoa',
+ 'Glasglow',
+ 'Hanoi',
+ 'Hong Kong',
+ 'Islamabad',
+ 'Istanbul',
+ 'Jakarta',
+ 'Kiel',
+ 'Kyoto',
+ 'Le Havre',
+ 'Lebanon',
+ 'Lhasa',
+ 'Lima',
+ 'London',
+ 'Los Angeles',
+ 'Madrid',
+ 'Manila',
+ 'New York',
+ 'Olympia',
+ 'Oslo',
+ 'Panama City',
+ 'Peking',
+ 'Philadelphia',
+ 'San Francisco',
+ 'Seoul',
+ 'Taipeh',
+ 'Tel Aviv',
+ 'Tokio',
+ 'Uelzen',
+ 'Washington'
+ ];
+ }
+ getItems(ev) {
+ // Reset items back to all of the items
+ this.initializeItems();
+
+ // set val to the value of the ev target
+ var val = ev.target.value;
+
+ // if the value is an empty string don't filter the items
+ if (val && val.trim() != '') {
+ this.items = this.items.filter((item) => {
+ return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
+ })
+ }
+ }
+}
diff --git a/app/pages/segment/segment.html b/app/pages/segment/segment.html
new file mode 100644
index 0000000..8c8e74e
--- /dev/null
+++ b/app/pages/segment/segment.html
@@ -0,0 +1,109 @@
+
+
+
+ Segment
+
+
+
+
+
+
+
+ Puppies
+
+
+ Kittens
+
+
+ Ducklings
+
+
+
+
+
+
+
+
diff --git a/app/pages/segment/segment.scss b/app/pages/segment/segment.scss
new file mode 100644
index 0000000..2e42c50
--- /dev/null
+++ b/app/pages/segment/segment.scss
@@ -0,0 +1,3 @@
+.home {
+
+}
diff --git a/app/pages/segment/segment.ts b/app/pages/segment/segment.ts
new file mode 100644
index 0000000..ba21ec4
--- /dev/null
+++ b/app/pages/segment/segment.ts
@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {NavController, MenuController,Platform} from 'ionic-angular';
+
+@Component({
+ templateUrl: 'build/pages/segment/segment.html'
+})
+export class SegmentPage {
+ pet: string = "puppies";
+ isAndroid: boolean = false;
+
+ constructor(private navController: NavController,menu: MenuController,platform: Platform) {
+ menu.enable(true);
+ this.isAndroid = platform.is('android');
+ }
+}
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+