Introduction

In a previous article, we started with the Ionic framework and discussed the Visual Studio Code where we are going to implement our applications. Now we are going to implement a small application where we will make some menus in the form of the grid using ionic.
Step 1: Open Visual Studio Code,
Code
Step 2: Now after starting Visual studio Code, open a folder where you want to put your application,
application
Step 3: Create a new folder and name it Ionic_Grid_Menu,
Ionic_Grid_Menu
And select that folder,
folder
After we created the folder we can see an Explorer opened with two tabs,
  1. Working Files: shows the present files are in work.
  2. IONIC_GRID_MENU: shows all the files in the folder.
Step 4: Create the files,
Create
  1. index.html
  2. ionic.min.css
  3. style.css
  4. ionic.bundle.min.js
  5. script.min.js
file
Step 5: Let’s code for the application,
index.html:
  1. <html ng-app="ionicApp">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6. <title> Menu Buttons</title>
  7. <link href="Style\ionic.min.css" rel="stylesheet">
  8. <link href="Style\style.css" rel="stylesheet">
  9. <script src="JS\ionic.bundle.min.js"></script>
  10. <script src="JS\Script.bundle.js"></script>
  11. </head>
  13. <body ng-controller="MyCtrl">
  15. <ion-header-bar class="bar-positive">
  16. <div class="buttons">
  17. <h1 class="title">Menu buttons</h1>
  18. </div>
  19. </ion-header-bar>
  21. <ion-content id="fhm_page">
  22. <div class="fhm_container">
  23. <div class="fhm_row">
  24. <div class="fhm_item fhm_item1">
  25. <span>Article</span>
  26. </div>
  27. <div class="fhm_item fhm_item2">
  28. <span> Blog</span>
  29. </div>
  30. </div>
  31. <div class="fhm_row">
  32. <div class="fhm_item fhm_item3">
  33. <span> News</span>
  34. </div>
  35. <div class="fhm_item fhm_item4">
  36. <span>Video</span>
  37. </div>
  38. </div>
  39. <div class="fhm_row">
  40. <div class="fhm_item fhm_item5">
  41. <span>Job</span>
  42. </div>
  43. <div class="fhm_item fhm_item6">
  44. <span>Book</span>
  45. </div>
  46. </div>
  47. </div>
  48. </ion-content>
  50. </body>
  52. </html>
style.css
  1. body {
  2. cursor: url('http://ionicframework.com/img/finger.png'),
  3. auto;
  4. }
  6. #fhm_page.scroll,
  7. .fhm_container
  8. {
  9. position: absolute;
  10. top: 0;
  11. right: 0;
  12. left: 0;
  13. bottom: 0;
  14. }
  16. .fhm_row
  17. {
  18. /* position: absolute; */
  19. height: 33.3 % ;
  20. left: 0;
  21. right: 0;
  22. background - color: #FF0000;
  23. clear: both;
  24. }
  26. .fhm_item
  27. {
  28. height: 100 % ;
  29. width: 49.95 % ;
  30. font - family: Arial,
  31. Helvetica,
  32. sans - serif;
  33. font - size: 50 px;
  34. color: white;
  35. text - align: center;
  36. border: 1 px solid# FFFFFF;
  37. float: left;
  38. position: relative;
  39. }
  41. .fhm_item1
  42. {
  43. background - color: #1d8a77;
  44. }
  46. .fhm_item2
  47. {
  48. background-color: # ff6600;
  49. }
  50. .fhm_item3
  51. {
  52. background - color: #dd5151;
  53. }
  54. .fhm_item4
  55. {
  56. background - color: #6bc042;
  57. }
  58. .fhm_item5
  59. {
  60. background-color: # ffca2a;
  61. }
  62. .fhm_item6
  63. {
  64. background - color: #0086dc;
  65. }
  66. span{
  67. position: absolute;
  68. top:0;
  69. right:0;
  70. left:0;
  71. bottom:0;
  72. margin: auto;
  73. width:100%;
  74. height: 10%;
  75. }
ionic.min.css
Download the file from the url
script.bundle.js
  1. angular.module('ionicApp', ['ionic'])
  3. .controller('MyCtrl', function($scope)
  4. {
  6. });
  7. ionic.bundle.min.js
Download the file from the url.
Now we have completed code for our application now run it. Here are the steps,
  1. Press Ctrl+Shift+P.
  2. >ext install chrome (Debugger for Chrome)
    Note:
    Don’t write ext install chrome at once it will not give any output, so first write ext install & press enter and wait for its output and after u will get a list, then write chrome preceding to ext install.
  3. After complete installation, press Ctrl+Shift+D (Debug).
  4. Press F5 or click on the Run symbol.
  5. After pressing, we will ask to select the environment for debug by VS Code, select chrome in that list.
  6. You will get a new file created by default and named launch.json.
  7. Press F5 or click on the Run symbol, Again.
The output of our application will be,
output
Check this for different platforms,
For iPhone 6,
IPhone 6
For IPad,
IPad
We can use that on any platform and it will work similarly for each platform,
platform
Read more articles on the Ionic framework: