imsingh/ionic-sublime-plugin imsingh/ionic-sublime-plugin

  • Stars
    star
    167
  • Rank 226,635 (Top 5 %)
  • Language
  • License
    MIT License
  • Created over 10 years ago
  • Updated over 6 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
imsingh/ionic-sublime-plugin
github

imsingh

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

This is a simple plugin for sublime text 3 for development of Mobile Apps with Ionic Framework.

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

  1. 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

  2. Clone the repository into your Sublime Text 2/3 packages directory. git clone https://github.com/imsingh/ionic-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 - 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

Header Bar/Footer Bar

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

Forms

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 .

More Repositories

1

auth0-audio

demo app for auth0 audio blog post
TypeScript
42
star
2

ionic-atom-plugin

This is simple Ionic Snippet Plugin for Github's Atom Editor
CoffeeScript
36
star
3

rxjs-audio

Dead simple way to have audio playback functionality in the JS application.
TypeScript
21
star
4

ionic2-radio

A Radio Player Demo with Ionic 2 and HTML5
JavaScript
15
star
5

ionic-animated-drawer

This is the repo of animated drawer demo.
JavaScript
10
star
6

ionic-drawer-demo

This is repo of demo of Ionic Drawer Repo.
JavaScript
6
star
7

ionic-flickr-album

Demo app for displaying Flickr Albums of User in Ionic App.
JavaScript
5
star
8

ionic-sworkit-sidemenu

This is the repo of sworkit like sidemenu Demo
JavaScript
5
star
9

audio-player

An audio player demo app using Angular, Ionic, RxJS and NgRx.
TypeScript
4
star
10

changelog

Shell
2
star
11

angular-audio

TypeScript
1
star
12

ts-play

TypeScript PlayGround with support of ES6 Modules
JavaScript
1
star