Ionic CSS inputs

In this example below you will see how to do a Ionic CSS inputs with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -kaik-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -kaik- ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Ionic CSS inputs</title>
  
  
  
  
  
</head>

<body>

  <html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Test</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

  
<body>
  
<ul class="list">

  <div class="item item-divider">Toogle</div>
  <li class="item item-toggle">
     HTML5
     <label class="toggle toggle-assertive">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>
  <div class="item item-divider">Checkbox</div>
  <ion-checkbox ng-model="filter.blue">Red</ion-checkbox>
  <ion-checkbox ng-model="filter.yellow">Yellow</ion-checkbox>

  <div class="item item-divider">Radio buttons</div>
  <ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
  <ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>

  <div class="item item-divider">Range</div>
    <div class="item range range-positive">
    <i class="icon ion-ios-sunny-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-ios-sunny"></i>
  </div>
  
  <div class="item item-divider">Range</div>  
  <label class="item item-input item-select">
    <div class="input-label">
      Lightsaber
    </div>
    <select>
      <option>Blue</option>
      <option selected>Green</option>
      <option>Red</option>
    </select>
  </label>  

</ul>

  
</body>
  
  
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-kaik-/ionic-css-inputs-BKKxmB */
angular.module('ionicApp', ['ionic'])

Comments