Ionic - Atom Snippet Plugin

A Simple Atom Package for Ionic Framework Code Snippets

Feel Free to let me know about issues via :

• Issues

What's Included - Content

AngularJS Directive based Ionic Snippets

These snippets will work only in HTML Files

• Tabs
• Side Menu
• Navigation
• Header Bar/Footer Bar
• Content
• Scroll
• List
• Forms
• Slide Box
• Popover

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.

• Header Bar & Footer Bar
• Buttons
• List
• Cards
• Forms
• Toggle
• Checkbox
• Radio Buttons
• Range
• Select
• Tabs

Javascript based snippets

Following snippets will only work in javascript file.

• Actionsheet
• Backdrop
• Popover
• Popup

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

License

Ionic Atom Plugin is open-sourced software licensed under the MIT License .