• Packages
  • Themes
  • Documentation
  • Blog
  • Discussions
Sign in

ionic-framework-snippets

A Snippet Plugin for Ionic Framework
imsingh
1.2.1 28,287
19
  • Repo
  • Bugs
  • Versions
  • License
Flag as spam or malicious

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

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.

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

License

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

I think this package is bad news.

Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.

  • Terms of Use
  • Privacy
  • Code of Conduct
  • Releases
  • FAQ
  • Contact
with by