Deprecated - I am no longer maintaing the project.
Ionic - Atom Snippet Plugin
A Simple Atom Package for Ionic Framework Code Snippets
Feel Free to let me know about issues via :
What's Included - Content
AngularJS Directive based Ionic Snippets
These snippets will work only in HTML Files
Simple HTML Ionic Snippets
These snippets will work only in HTML Files
If you don't want or don't need to use AngularJS directives and only want to use Ionic's CSS than you should use following snippets.
Javascript based snippets
Following snippets will only work in javascript file.
AngularJS Directive based Ionic Snippets
Tabs
| Component |
Snippet Code |
| ion-tabs |
ionic-tabs |
| ion-tab |
ionic-tab |
| Component |
Snippet Code |
| ion-side-menus |
ionic-side-menus |
Navigation
| Component |
Snippet Code |
| ion-nav-view |
ionic-nav-view |
| ion-view |
ionic-view |
| ion-nav-buttons Left |
ionic-nav-buttons:left |
| ion-nav-buttons Right |
ionic-nav-buttons:right |
| ion-nav-back-button |
ionic-nav-back-button |
| Component |
Snippet Code |
| ion-header-bar |
ionic-header-bar |
| ion-footer-bar |
ionic-footer-bar |
Content
| Component |
Snippet Code |
| ion-content |
ionic-content |
| ion-pane |
ionic-pane |
| ion-refresher |
ionic-refresher |
Scroll
| Component |
Snippet Code |
| ion-scroll |
ionic-scroll |
| ion-infinite-scroll |
ionic-infinite-scrol |
List
| Component |
Snippet Code |
| ion-list |
ionic-list |
| ion-item |
ionic-item |
| ion-reorder-button |
ionic-reorder-button |
| ion-option-button |
ionic-option-button |
| ion-delete-button |
ionic-delete-button |
| Component |
Snippet Code |
| ion-checkbox |
ionic-checkbox |
| ion-radio |
ionic-radio |
| ion-toggle |
ionic-toggle |
| ion-checkbox with theme |
ionic-checkbox:themecolor |
You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table.
Slide Box
| Component |
Snippet Code |
| ion-slide-box |
ionic-slide-box |
| ion-slide |
ionic-slide |
Popover
| Component |
Snippet Code |
| ion-popover-view |
ionic-popover |
Simple HTML Ionic Snippets
You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in following tables.
Example : ionic-css-footer:calm for calm theme footer.
Header & Footer Bar
| Component |
Snippet Code |
| Header Bar |
ionic-css-header |
| Header Bar Theme |
ionic-css-header:themecolor |
| Sub Header Bar |
ionic-css-subheader |
| Footer Bar |
ionic-css-footer |
| Footer Bar Theme |
ionic-css-footer:themecolor |
Buttons Snippet
| Component |
Snippet Code |
| Button |
ionic-css-button |
| Button Theme |
ionic-css-button:themecolor |
| Full Width Button |
ionic-css-button-full |
| Full Width Button Theme |
ionic-css-button-full:themecolor |
| Large Button |
ionic-css-button-large |
| Large Button Theme |
ionic-css-button-large:themecolor |
| Small Button |
ionic-css-button-small |
| Small Button Theme |
ionic-css-button-small:themecolor |
| Outlined Button |
ionic-css-button-outline |
| Outlined Button Theme |
ionic-css-button-outline:themecolor |
| Clear Button |
ionic-css-button-clear |
| Clear Button Theme |
ionic-css-button-clear:themecolor |
List Snippets
| Component |
Snippet Code |
| List |
ionic-css-list |
| List Inset |
ionic-css-list:inset |
| List Item |
ionic-css-list:item |
| List Divider |
ionic-css-list:divider |
| List Item with Avatar |
ionic-css-list-item:avatar |
| List Item with Left Button |
ionic-css-list-item:buttonleft |
| List Item with Right Button |
ionic-css-list-item:buttonright |
| List Item with Left Icon |
ionic-css-list-item:iconright |
| List Item with Right Icon |
ionic-css-list-item:iconleft |
| List Item with Right Thumbnail |
ionic-css-list-item:thumbright |
| List Item with Left Thumbnail |
ionic-css-list-item:thumbleft |
Card Snippets
| Component |
Snippet Code |
| Card |
ionic-css-card |
| Card List |
ionic-css-card:list |
| Card Divider |
ionic-css-card:divider |
| Card Showcase |
ionic-css-card:showcase |
| Cards with Images |
ionic-css-card:image |
| Component |
Snippet Code |
| Floating Form Element |
ionic-css-form-floating |
| Stacked Form Element |
ionic-css-form-stacked |
| Inset Form |
ionic-css-form-inset |
| Placeholder Form Element |
ionic-css-form-placehoder |
| Header Form Elements |
ionic-css-form-header |
| Inline Form Elements |
ionic-css-form-inline |
| Icon based Form Elements |
ionic-css-form-icon |
Toggle Snippets
| Component |
Snippet Code |
| Toggle Default Theme |
ionic-css-toggle |
| Toggle with Theme |
ionic-css-toggle:themecolor |
You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table.
Checkbox Snippets
| Component |
Snippet Code |
| Checkbox Default Theme |
ionic-css-checkbox |
| Checkbox with Theme |
ionic-css-checkbox:themecolor |
You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table.
Radio Buttons Snippets
| Component |
Snippet Code |
| Radio Buttons |
ionic-css-radio |
Range Snippets
| Component |
Snippet Code |
| Range Default Theme |
ionic-css-range |
| Range with Theme |
ionic-css-range:themecolor |
You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table.
Select Snippets
| Component |
Snippet Code |
| Select Element |
ionic-css-select |
Tabs Snippets
| Component |
Snippet Code |
| Tabs |
ionic-css-tabs |
| Tabs with Theme |
ionic-css-tabs:themecolor |
| Tabs with Icon |
ionic-css-tabs-icon |
| Tabs with Icon & Theme |
ionic-css-tabs-icon:themecolor |
| Tabs with Top Icon |
ionic-css-tabs-icontop |
| Tabs with Top Icon & Theme |
ionic-css-tabs-icontop:themecolor |
| Tabs with Left Icon |
ionic-css-tabs-iconleft |
| Tabs with Left Icon & Theme |
ionic-css-tabs-iconleft:themecolor |
You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table.
JS Code Snippets for Ionic
Theme Snippets will work only in JS File
Action Sheet JS Snippet
| Component |
Snippet Code |
| $ionicActionSheet |
ionic-js-actionsheet |
Backdrop JS Snippet
| Component |
Snippet Code |
| $ionicBackdrop |
ionic-js-backdrop |
Popover JS Snippet
| Component |
Snippet Code |
| $ionicPopover |
ionic-js-popover |
| Component |
Snippet Code |
| Alert $ionicPopup |
ionic-js-popup:alert |
| Confirm $ionicPopup |
ionic-js-popup:confirm |
| Prompt $ionicPopup |
ionic-js-popup:prompt |
License
Ionic Atom Plugin is open-sourced software licensed under the MIT License .