Ionic Snippets - Sublime Plugin ================== A sublime plugin complete with ionic framework snippets Feel free to let me know what else you want added via: - Twitter [@mbaljeetsingh](https://twitter.com/mbaljeetsingh) - [Issues](https://github.com/PixelDropInc/ionic-snippets-sublime-plugin/issues) ### Installation There are 3 methods for installing this plugin. 1. 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 2. Clone the repository into your Sublime Text 2/3 packages directory. `git clone https://github.com/PixelDropInc/ionic-snippets-sublime-plugin.git 3. 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 - [Header](#header) - [Content](#content) - [Footer](#footer) - [Buttons](#buttons) - [List](#list) - [Cards](#cards) - [Form](#form) - [Toggle](#toggle) - [Checkbox](#checkbox) - [Radiobuttons](#radiobuttons) - [Range](#range) - [Select](#select) - [Tabs](#tabs) - [Utility](#utility) ### JS Snippets - [Tabs](#jstabs) - [SideMenu](#sidemenu) - [Navigation](#navigation) - [HeadersFooters](#headersfooters) - [Content](#content) - [Scroll](#scroll) - [Lists](#lists) - [Form Input](#forminput) - [Slide Box](#slidebox) - [Modal](#modal) - [Popover](#popover) - [ActionSheet](#actionsheet) - [Popup](#popup) - [Loading](#loading) - [Events](#events) - [Backdrop](#backdrop) - [TapClick](#tapclick) - [Keyboard](#keyboard) - [License](#license) ### 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](http://www.gnu.org/copyleft/gpl.html).