Deprecated - I am no longer maintaing the project.
Ionic - Sublime Plugin
A Simple Sublime Plugin for Ionic Framework Code Snippets
Feel Free to let me know about issues via :
If you like this plugin and want to donate a penny :
Installation
Search for “Ionic Framework” via the “Package Control: Install Packages” menu.
Note: If you don't have Sublime Package Control installed, you can find out how to install it here https://sublime.wbond.net/installation
Clone the repository into your Sublime Text 2/3 packages directory.
git clone https://github.com/imsingh/ionic-sublime-plugin.git
Download the .zip file and unzip it into your Sublime Text 2/3 packages directory.
Note: You can find your Sublime Text 2/3 packages directory by going to Preferences > Browse Packages.
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 |
Side Menu
| Component |
Snippet Code |
| ion-side-menus |
ionic-side-menus |
Navigation
| Component |
Snippet Code |
| ion-nav-bar |
ionic-nav-bar |
| 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 |
Form Snippets
| 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 |
Popup JS Snippet
| Component |
Snippet Code |
| Alert $ionicPopup |
ionic-js-popup:alert |
| Confirm $ionicPopup |
ionic-js-popup:confirm |
| Prompt $ionicPopup |
ionic-js-popup:prompt |
Broadcasts
Sometimes you need to broadcast some events to Ionic complete some actions, in
ionic-broadcast-* you can find all the events you need.
| Snippet Code |
| ionic-broadcast-infinite-scroll |
| ionic-broadcast-refresh-complete |
License
Ionic Sublime Plugin is open-sourced software licensed under the MIT License .
