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
| Component | Snippet Code |
|---|---|
| ion-tabs | ionic-tabs |
| ion-tab | ionic-tab |
| Component | Snippet Code |
|---|---|
| ion-side-menus | ionic-side-menus |
| 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 |
| Component | Snippet Code |
|---|---|
| ion-content | ionic-content |
| ion-pane | ionic-pane |
| ion-refresher | ionic-refresher |
| Component | Snippet Code |
|---|---|
| ion-scroll | ionic-scroll |
| ion-infinite-scroll | ionic-infinite-scrol |
| 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.
| Component | Snippet Code |
|---|---|
| ion-slide-box | ionic-slide-box |
| ion-slide | ionic-slide |
| 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.
| 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 |
| 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 |
| 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 |
| 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 |
| 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.
| 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.
| Component | Snippet Code |
|---|---|
| Radio Buttons | ionic-css-radio |
| 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.
| Component | Snippet Code |
|---|---|
| Select Element | ionic-css-select |
| 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
| Component | Snippet Code |
|---|---|
| $ionicActionSheet | ionic-js-actionsheet |
| Component | Snippet Code |
|---|---|
| $ionicBackdrop | ionic-js-backdrop |
| 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 .