Creating checkbox page

matheusrocha89 · Dec 24, 2015 · 158af6e · 158af6e
1 parent 13c060f
commit 158af6e
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 2 deletions.
diff --git a/app/checkboxes/checkboxes.html b/app/checkboxes/checkboxes.html
@@ -0,0 +1,41 @@
+<ion-view view-title="Checkboxes">
+  <ion-content padding="true">
+    <h1>Checkboxes documentation</h1>
+    <p>It uses the same pattern of Ionic, the name of the color with `bar` as prefix</p>
+
+    <h2>Yellow:</h2>
+    <ion-list ng-repeat="color in vm.classesYellow">
+      <ion-checkbox ng-checked="true" class="checkbox-{{color}}">{{color}}</ion-checkbox>
+    </ion-list>
+
+    <h2>Red:</h2>
+    <ion-list ng-repeat="color in vm.classesRed">
+      <ion-checkbox ng-checked="true" class="checkbox-{{color}}">{{color}}</ion-checkbox>
+    </ion-list>
+
+    <h2>Blue:</h2>
+    <ion-list ng-repeat="color in vm.classesBlue">
+      <ion-checkbox ng-checked="true" class="checkbox-{{color}}">{{color}}</ion-checkbox>
+    </ion-list>
+
+    <h2>Green:</h2>
+    <ion-list ng-repeat="color in vm.classesGreen">
+      <ion-checkbox ng-checked="true" class="checkbox-{{color}}">{{color}}</ion-checkbox>
+    </ion-list>
+
+    <h2>Gray:</h2>
+    <ion-list ng-repeat="color in vm.classesGray">
+      <ion-checkbox ng-checked="true" class="checkbox-{{color}}">{{color}}</ion-checkbox>
+    </ion-list>
+
+    <h2>Pink:</h2>
+    <ion-list ng-repeat="color in vm.classesPink">
+      <ion-checkbox ng-checked="true" class="checkbox-{{color}}">{{color}}</ion-checkbox>
+    </ion-list>
+
+    <h2>Purple:</h2>
+    <ion-list ng-repeat="color in vm.classesPurple">
+      <ion-checkbox ng-checked="true" class="checkbox-{{color}}">{{color}}</ion-checkbox>
+    </ion-list>
+  </ion-content>
+</ion-view>
diff --git a/app/checkboxes/checkboxes.js b/app/checkboxes/checkboxes.js
@@ -0,0 +1,15 @@
+angular.module('checkboxes.controller', [])
+  .controller('CheckboxesController', CheckboxesController);
+
+CheckboxesController.$inject = ['colorClasses'];
+
+function CheckboxesController(colorClasses) {
+  var vm = this;
+  vm.classesYellow = colorClasses.yellow;
+  vm.classesBlue = colorClasses.blue;
+  vm.classesGreen = colorClasses.green;
+  vm.classesGray = colorClasses.gray;
+  vm.classesPink = colorClasses.pink;
+  vm.classesRed = colorClasses.red;
+  vm.classesPurple = colorClasses.purple;
+}
diff --git a/app/index.js b/app/index.js
@@ -1 +1,6 @@
-angular.module('ionic-flat', ['ionic', 'bars.controller', 'buttons.controller']);
+angular.module('ionic-flat', [
+  'ionic', 
+  'bars.controller', 
+  'buttons.controller',
+  'checkboxes.controller'
+]);
diff --git a/app/routes.js b/app/routes.js
@@ -16,6 +16,11 @@ function Routes($stateProvider, $urlRouterProvider) {
       url: '/buttons',
       templateUrl: 'app/buttons/buttons.html',
       controller: 'ButtonsController as vm'
+    })
+    .state('checkboxes', {
+      url: '/checkboxes',
+      templateUrl: 'app/checkboxes/checkboxes.html',
+      controller: 'CheckboxesController as vm'
     });
 
   $urlRouterProvider.otherwise('/');

diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
     <script src="app/constants.js"></script>
     <script src="app/bars/bars.js"></script>
     <script src="app/buttons/buttons.js"></script>
+    <script src="app/checkboxes/checkboxes.js"></script>
     <script src="app/routes.js"></script>
   </head>
   <body ng-app="ionic-flat">
@@ -25,7 +26,7 @@ <h1 class="title">Components</h1>
             <ion-item menu-close href="#">Colors</ion-item>
             <ion-item menu-close href="#/bars">Bars</ion-item>
             <ion-item menu-close href="#/buttons">Buttons</ion-item>
-            <ion-item menu-close href="#">Checkboxes</ion-item>
+            <ion-item menu-close href="#/checkboxes">Checkboxes</ion-item>
           </ion-list>
         </ion-content>
       </ion-side-menu>