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
• 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
• Content
• Footer
• Buttons
• List
• Cards
• Form
• Toggle
• Checkbox
• Radiobuttons
• Range
• Select
• Tabs
• Utility

JS Snippets

• Tabs
• SideMenu
• Navigation
• HeadersFooters
• Content
• Scroll
• Lists
• Form Input
• Slide Box
• Modal
• Popover
• ActionSheet
• Popup
• Loading
• Events
• Backdrop
• TapClick
• Keyboard
• 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.