Deprecated - I am no longer maintaing the project.
Ionic - Atom Snippet Plugin
A Simple Atom Package for Ionic Framework Code Snippets
Feel Free to let me know about issues via :
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
Component
Snippet Code
ion-tabs
ionic-tabs
ion-tab
ionic-tab
Component
Snippet Code
ion-side-menus
ionic-side-menus
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
Component
Snippet Code
ion-header-bar
ionic-header-bar
ion-footer-bar
ionic-footer-bar
Component
Snippet Code
ion-content
ionic-content
ion-pane
ionic-pane
ion-refresher
ionic-refresher
Component
Snippet Code
ion-scroll
ionic-scroll
ion-infinite-scroll
ionic-infinite-scrol
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
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.
Component
Snippet Code
ion-slide-box
ionic-slide-box
ion-slide
ionic-slide
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
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
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
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
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
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.
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.
Component
Snippet Code
Radio Buttons
ionic-css-radio
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.
Component
Snippet Code
Select Element
ionic-css-select
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
Component
Snippet Code
$ionicActionSheet
ionic-js-actionsheet
Component
Snippet Code
$ionicBackdrop
ionic-js-backdrop
Component
Snippet Code
$ionicPopover
ionic-js-popover
Component
Snippet Code
Alert $ionicPopup
ionic-js-popup:alert
Confirm $ionicPopup
ionic-js-popup:confirm
Prompt $ionicPopup
ionic-js-popup:prompt
Ionic Atom Plugin is open-sourced software licensed under the MIT License .