public/assets/plugins/angular-material-form-builder/index.html

   1 <!DOCTYPE html>
   2 <html ng-app="angularMaterialFormBuilder" ng-strict-di layout="column">
   3   <head>
   4     <meta charset="utf-8" />
   5     <title>Angular Material Form Builder</title>
   6     <meta
   7       name="description"
   8       content="AngularJS dynamic form builder with material design implementation"
   9     />
  10     <meta
  11       name="keywords"
  12       content="angular, angularjs, google material, material design, form builder, form generator"
  13     />
  14     <meta name="viewport" content="width=device-width" />
  15     <link rel="icon" href="./favicon.ico" />
  16     <!-- Dependencies -->
  17     <link
  18       href="https://fonts.googleapis.com/icon?family=Material+Icons"
  19       rel="stylesheet"
  20     />
  21     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
  22     <link rel="stylesheet" href="./node_modules/angular/angular-csp.css" />
  23     <link
  24       rel="stylesheet"
  25       href="./node_modules/mdi/css/materialdesignicons.min.css"
  26     />
  27     <link
  28       rel="stylesheet"
  29       href="./node_modules/angular-material/angular-material.min.css"
  30     />
  31     <link rel="stylesheet" href="./dist/angular-material-form-builder.css" />
  32   </head>
  33   <body ng-controller="MainController as main" class="main-view">
  34     <!--[if lt IE 10]>
  35       <p class="browsehappy">
  36         You are using an <strong>outdated</strong> browser. Please
  37         <a href="http://browsehappy.com/">upgrade your browser</a> to improve
  38         your experience.
  39       </p>
  40     <![endif]-->
  41
  42     <div class="content" layout="row" layout-padding layout-margin layout-fill>
  43       <div flex layout="column" class="builder">
  44         <h2>Form Builder</h2>
  45         <div layout="column">
  46           <form-item
  47             ng-repeat="item in main.form.items track by $index"
  48             type="{{item.type}}"
  49             item="item"
  50             index="$index"
  51             on-delete="main.delete(item, index)"
  52             on-up="main.up(item, index)"
  53             on-down="main.down(item, index)"
  54           >
  55           </form-item>
  56         </div>
  57       </div>
  58
  59       <div flex layout="column" class="view">
  60         <h2>Preview</h2>
  61         <form name="myForm">
  62           <form-view form="main.form"></form-view>
  63         </form>
  64       </div>
  65
  66       <div flex="20" layout="column" class="json">
  67         <h2>Json</h2>
  68         <pre>{{main.form | json}}</pre>
  69       </div>
  70     </div>
  71
  72     <md-fab-speed-dial
  73       md-open="main.isOpen"
  74       md-direction="up"
  75       class="md-fab-bottom-right md-scale"
  76     >
  77       <md-fab-trigger>
  78         <md-button aria-label="..." class="md-fab md-warn">
  79           <md-icon class="material-icons medium">add</md-icon>
  80         </md-button>
  81       </md-fab-trigger>
  82       <md-fab-actions>
  83         <!-- 9 upload -->
  84         <md-button
  85           aria-label="..."
  86           class="md-fab md-raised md-mini"
  87           ng-click="main.addItem('upload')"
  88         >
  89           <md-icon class="material-icons">upload</md-icon>
  90           <md-tooltip md-direction="left" md-autohide>Upload</md-tooltip>
  91         </md-button>
  92         <!-- 8 agreement -->
  93         <md-button
  94           aria-label="..."
  95           class="md-fab md-raised md-mini"
  96           ng-click="main.addItem('agreement')"
  97         >
  98           <md-icon class="material-icons">pan_tool</md-icon>
  99           <md-tooltip md-direction="left" md-autohide>Agree Box</md-tooltip>
 100         </md-button>
 101         <!-- 7 Label -->
 102         <md-button
 103           aria-label="..."
 104           class="md-fab md-raised md-mini"
 105           ng-click="main.addItem('label')"
 106         >
 107           <md-icon class="material-icons">label</md-icon>
 108           <md-tooltip md-direction="left" md-autohide>Label</md-tooltip>
 109         </md-button>
 110         <!-- 6 Select -->
 111         <md-button
 112           aria-label="..."
 113           class="md-fab md-raised md-mini"
 114           ng-click="main.addItem('chooseFromList')"
 115         >
 116           <md-icon class="material-icons">playlist_add_check</md-icon>
 117           <md-tooltip md-direction="left" md-autohide>Select</md-tooltip>
 118         </md-button>
 119         <!-- 5 MATRIX -->
 120         <md-button
 121           aria-label="..."
 122           class="md-fab md-raised md-mini"
 123           ng-click="main.addItem('matrix')"
 124         >
 125           <md-icon class="material-icons">grid_on</md-icon>
 126           <md-tooltip md-direction="left" md-autohide>Matrix</md-tooltip>
 127         </md-button>
 128         <!-- 4 Text Area -->
 129         <md-button
 130           aria-label="..."
 131           class="md-fab md-raised md-mini"
 132           ng-click="main.addItem('textarea')"
 133         >
 134           <md-icon class="material-icons">keyboard</md-icon>
 135           <md-tooltip md-direction="left" md-autohide>Text-Area</md-tooltip>
 136         </md-button>
 137         <!-- 3 Text Input -->
 138         <md-button
 139           aria-label="..."
 140           class="md-fab md-raised md-mini"
 141           ng-click="main.addItem('input')"
 142         >
 143           <md-icon class="material-icons">text_format</md-icon>
 144           <md-tooltip md-direction="left" md-autohide>Text-Input</md-tooltip>
 145         </md-button>
 146         <!-- 2 Radio -->
 147         <md-button
 148           aria-label="..."
 149           class="md-fab md-raised md-mini"
 150           ng-click="main.addItem('multipleChoices')"
 151         >
 152           <md-icon class="material-icons">radio_button_checked</md-icon>
 153           <md-tooltip md-direction="left" md-autohide>Radio-Buttons</md-tooltip>
 154         </md-button>
 155         <!-- 1 Checkboxes -->
 156         <md-button
 157           aria-label="..."
 158           class="md-fab md-raised md-mini"
 159           ng-click="main.addItem('checkboxes')"
 160         >
 161           <md-icon class="material-icons">check_box</md-icon>
 162           <md-tooltip md-direction="left" md-autohide>Checkboxes</md-tooltip>
 163         </md-button>
 164       </md-fab-actions>
 165     </md-fab-speed-dial>
 166
 167     <a href="https://github.com/vlio20/angular-material-form-builder"
 168       ><img
 169         style="position: absolute; top: 0; right: 0; border: 0"
 170         src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
 171         alt="Fork me on GitHub"
 172         data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
 173     /></a>
 174
 175     <!-- Dependencies -->
 176     <script src="./node_modules/angular/angular.js"></script>
 177     <script src="./node_modules/angular-animate/angular-animate.js"></script>
 178     <script src="./node_modules/angular-aria/angular-aria.js"></script>
 179     <script src="./node_modules/angular-material/angular-material.js"></script>
 180     <script src="./node_modules/angular-messages/angular-messages.js"></script>
 181     <script src="./node_modules/angular-sortable-view/src/angular-sortable-view.js"></script>
 182     <script src="./dist/angular-material-form-builder.js"></script>
 183   </body>
 184 </html>