ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Ionic Snippets

by TenthGeek ST2/ST3

A sublime plugin complete with ionic framework snippets

Labels snippets, markup

Details

Installs

  • Total 17K
  • Win 10K
  • OS X 5K
  • Linux 3K
Aug 20 Aug 19 Aug 18 Aug 17 Aug 16 Aug 15 Aug 14 Aug 13 Aug 12 Aug 11 Aug 10 Aug 9 Aug 8 Aug 7 Aug 6 Aug 5 Aug 4 Aug 3 Aug 2 Aug 1 Jul 31 Jul 30 Jul 29 Jul 28 Jul 27 Jul 26 Jul 25 Jul 24 Jul 23 Jul 22 Jul 21 Jul 20 Jul 19 Jul 18 Jul 17 Jul 16 Jul 15 Jul 14 Jul 13 Jul 12 Jul 11 Jul 10 Jul 9 Jul 8 Jul 7 Jul 6
Windows 3 4 12 8 7 11 7 3 4 13 9 11 3 9 6 6 8 9 10 10 8 6 6 12 6 10 11 5 6 8 10 6 10 11 6 7 6 4 14 6 6 8 6 9 11 17
OS X 0 2 1 2 4 3 3 2 2 0 5 5 4 1 0 3 1 3 1 1 1 3 2 2 5 1 2 2 1 1 2 4 2 1 1 2 4 0 1 2 3 1 3 1 2 2
Linux 1 0 5 4 2 2 2 0 2 3 3 3 2 2 1 2 4 4 1 3 1 1 1 4 1 2 3 2 5 3 3 1 0 1 3 0 2 1 1 4 0 0 1 1 1 2

Readme

Source
raw.​githubusercontent.​com

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.

  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

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.