Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>Ionic Template</title>

        <link href="https://code.ionicframework.com/1.0.0-beta.10/css/ionic.css" rel="stylesheet">
          <script src="https://code.ionicframework.com/1.0.0-beta.10/js/ionic.bundle.js"></script>
          </head>

        <body ng-controller="MyCtrl">
          <ion-slide-box>
            <ion-slide>
              <ion-content>
                <ion-list>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                </ion-list>
              </ion-content>
            </ion-slide>
            <ion-slide>
              <ion-content>
                <ion-list>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                </ion-list>
              </ion-content>
            </ion-slide>
            <ion-slide>
              <ion-content>
                <ion-list>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                </ion-list>
              </ion-content>
            </ion-slide>
            <ion-slide>
              <ion-content>
                <ion-list>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                </ion-list>
              </ion-content>
            </ion-slide>
            <ion-slide>
              <ion-content>
                <ion-list>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                  <ion-item>Item</ion-item>
                </ion-list>
              </ion-content>
            </ion-slide>
          </ion-slide-box>
        </body>

        </html>

              
            
!

CSS

              
                body {
  cursor: url('https://ionicframework.com/img/finger.png'), auto;
}


.slider{
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important ;
  right: 0 !important;
}
              
            
!

JS

              
                angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
 
  
  
});
              
            
!
999px

Console