Ionic Snippets - Sublime Plugin
A sublime plugin complete with ionic framework snippets
Feel free to let me know what else you want added via:
Installation
There are 3 methods for installing this plugin.
Search for “ionic snippets” 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/PixelDropInc/ionic-snippets-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 - contents
CSS Snippets
JS Snippets
CSS Snippets
ionic css snippets are prefixed with ion-
Header
| Component |
Snippet code |
| bar-light |
ion-bar-light |
| bar-stable |
ion-bar-balanced |
| bar-positive |
ion-bar-positive |
| bar-calm |
ion-bar-calm |
| bar-balanced |
ion-bar-balanced |
| bar-energized |
ion-bar-energized |
| bar-assertive |
ion-bar-assertive |
| bar-royal |
ion-bar-royal |
| bar-dark |
ion-bar-dark |
| Sub Header |
ion-bar-subheader |
Footer
| Component |
Snippet code |
| bar-footer |
ion-bar-footer |
| bar-footer-left-right |
ion-bar-footer-left-right |
| bar-footer-pull-left |
ion-bar-footer-pull-left |
| bar-footer-pull-right |
ion-bar-footer-pull-right |
Buttons
| Component |
Snippet code |
| button |
ion-button |
| button-block |
ion-button-block |
| button-light |
ion-button-light |
| button-stable |
ion-button-stable |
| button-positive |
ion-button-positive |
| button-calm |
ion-button-calm |
| button-balanced |
ion-button-balanced |
| button-energized |
ion-button-energized |
| button-assertive |
ion-button-assertive |
| button-royal |
ion-button-royal |
| button-dark |
ion-button-dark |
| button-fullwidth |
ion-button-full |
| button-smallsize |
ion-button-small |
| button-largesize |
ion-button-large |
| button-outline |
ion-button-outline |
| button-clear |
ion-button-clear |
| button-home |
ion-button-home |
| button-star |
ion-button-star |
| button-chevron-left |
ion-button-chevron-left |
| button-chevron-right |
ion-button-chevron-right |
| button-gear |
ion-button-gear |
| button-setting |
ion-button-setting |
| button-navicon |
ion-button-navicon |
| button-clear |
ion-button-clear |
| button-bar |
ion-button-bar |
List
| Component |
Snippet code |
| list |
ion-list-ul |
| list-divider |
ion-item-divider |
| list-icons-email |
ion-list-icon-email |
| list-icons-chatBubble |
ion-list-icon-chatbubble |
| list-icons-mic |
ion-list-icon-mic |
| list-icons-person |
ion-list-icon-person |
| list-button |
ion-list-button-positive |
| list-item-avatar |
ion-list-item-avatar |
| list-item-thumbnail |
ion-list-item-thumbnail |
| list-inset |
ion-item-inset |
Cards
| Component |
Snippet code |
| card |
ion-card |
| card-header-footer |
ion-card-header-footer |
| card-list |
ion-list-card |
| card-showcase |
ion-list-card-showcase |
| card-images |
ion-list-card-img |
Forms
| Component |
Snippet code |
| form |
ion-form |
| form-placeholder-label |
ion-form-placeholder-label |
| form-inline-label |
ion-form-inline-label |
| form-stacked-label |
ion-form-stacked-label |
| form-floating-label |
ion-form-floating-label |
| inset-form |
ion-form-inset |
| form-input-icon |
ion-form-input-icon |
| form-inline-label |
ion-form-inline-label |
| form-header-input |
ion-form-header-input |
Toggle
| Component |
Snippet code |
| toggle |
ion-toggle |
| toggle-item |
ion-item-toggle |
Checkbox
| Component |
Snippet code |
| Checkbox |
ion-item-checkbox |
RadioButtons
| Component |
Snippet code |
| RadioButton |
ion-item-radio |
Range
| Component |
Snippet code |
| range |
ion-range |
| range-list |
ion-range-list |
Select
| Component |
Snippet code |
| select |
ion-item-select |
Tabs
| Component |
Snippet code |
| tabs |
ion-tabs |
| tabs-icon |
ion-tabs-icon |
| tabs-top-icon |
ion-tabs-icon-top |
| tabs-left-icon |
ion-tabs-icon-left |
Utility
| Component |
Snippet code |
| icons |
ion-star |
JsTabs
| Component |
Snippet code |
| tabs |
ion-js-tabs |
| tab |
ion-js-tab |
| ionictabsdelegate(html) |
ion-js-$ionictabsdelegate-html |
| ionictabsdelegate(angular) |
ion-js-$ionictabsdelegate-ng |
SideMenu
| Component |
Snippet code |
| SideMenus |
ion-js-side-menus-html |
| SideMenu |
ion-js-side-menu-html |
| SideMenu(angular) |
ion-js-side-menu-ng |
| SideMenu-Content |
ion-js-side-menu-content-html |
| Menu-toggle |
ion-js-menu-toggle |
| Menu-close |
ion-js-menu-close |
| SideMenu-Content |
ion-js-side-menu-content |
| Ionic-sidemenu-delegate(html) |
ion-js-$ionicsidemenudelegate-html |
| Ionic-sidemenu-delegate(angular) |
ion-js-$ionicSideMenuDelegate-ng |
Navigation
| Component |
Snippet code |
| Nav-view |
ion-js-nav-view |
| View |
ion-js-view |
| Nav-bar |
ion-js-nav-bar |
| Nav-button |
ion-js-nav-button |
| Nav-backButton |
ion-js-nav-back-button |
| Nav-clear |
ion-js-nav-clear |
| Nav-bar-Delegate(html) |
ion-js-$ionicnavbardelegate-html |
| Nav-bar-Delegate(angular) |
ion-js-$ionicnavbardelegate-ng |
HeadersFooters
| Component |
Snippet code |
| Header |
ion-js-header-bar |
| Footer |
ion-js-footer-bar |
Content
| Component |
Snippet code |
| Content |
ion-js-content |
| Refresher |
ion-js-refresher |
| Pane |
ion-js-pane |
Scroll
| Component |
Snippet code |
| Scroll |
ion-js-scroll |
| Infinite-Scroll |
ion-js-infinite-scroll |
| Ionic-scroll-delegate(html) |
ion-js-$ionicScrollDelegate-html |
| Ionic-scroll-delegate(angular) |
ion-js-$ionicScrollDelegate-ng |
Lists
| Component |
Snippet code |
| list |
ion-js-list |
| item |
ion-js-item |
| DeleteButton |
ion-js-delete-button |
| ReorderButton(html) |
ion-js-reorder-button-html |
| ReorderButton(angular) |
ion-js-reorder-button-ng |
| OptionButton |
ion-js-option-button |
| CollectionRepeat(html) |
ion-js-collection-repeat-html |
| CollectionRepeat(angular) |
ion-js-collection-repeat-ng |
| ListDelegate(html) |
ion-js-$ioniclistdelegate-html |
| ListDelegate(angular) |
ion-js-$ioniclistdelegate-ng |
FormInput
| Component |
Snippet code |
| Checkbox |
ion-js-checkbox |
| Radio |
ion-js-radion |
| Toggle |
ion-js-toggle |
SlideBox
| Component |
Snippet code |
| SlideBox |
ion-js-slidebox |
| SlideboxDelegate (html) |
ion-js-$ionicslideboxdelegate-html |
| SlideboxDelegate (angular) |
ion-js-$ionicslideboxdelegate-ng |
Modal
| Component |
Snippet code |
| Modal (html) |
ion-js-$ionicmodal-html |
| Modal (angular) |
ion-js-$ionicmodal-ng |
Popover
| Component |
Snippet code |
| Popover (html) |
ion-js-$ionicpopover-html |
| Popover (angular) |
ion-js-$ionicpopover-ng |
ActionSheet
| Component |
Snippet code |
| ActionSheet |
ion-js-$ionicactionsheet-ng |
Popup
| Component |
Snippet code |
| PopupAlert |
ion-js-$ionicpopup-alert-ng |
| PopupConfirm |
ion-js-$ionicpopup-confirm-ng |
Loading
| Component |
Snippet code |
| Loading |
ion-js-$ionicLoading-ng |
| LoadingConfig |
ion-js-$ionicLoadingConfig-ng |
Events
| Component |
Snippet code |
| on-hold |
ion-js-on-hold |
| on-tap |
ion-js-on-tap |
| on-tap |
ion-js-on-tap |
| on-touch |
ion-js-on-touch |
| on-release |
ion-js-on-release |
| on-drag |
ion-js-on-drag |
| on-drag-up |
ion-js-on-drag-up |
| on-drag-right |
ion-js-on-drag-right |
| on-drag-down |
ion-js-on-drag-down |
| on-drag-left |
ion-js-on-drag-left |
| on-swipe |
ion-js-on-swipe |
| on-drag-up |
ion-js-on-swipe-up |
| on-drag-right |
ion-js-on-swipe-right |
| on-drag-down |
ion-js-on-swipe-down |
| on-drag-left |
ion-js-on-swipe-left |
BackDrop
| Component |
Snippet code |
| backdrop |
ion-js-$ionicbackdrop-ng |
Events
| Component |
Snippet code |
| on-hold |
ion-js-on-hold |
TapClick
| Component |
Snippet code |
| tap |
ion-js-tap |
Keyboard
| Component |
Snippet code |
| keyboard |
ion-js-keyboard |
| keyboard-attach |
ion-js-keyboard-attach |
License
Ionic Snippets - Sublime Plugin is open-sourced software licensed under the GNU GPL license.
