{"id":33091734,"url":"https://github.com/imsingh/ionic-sublime-plugin","last_synced_at":"2025-12-16T15:56:46.009Z","repository":{"id":16903368,"uuid":"19664310","full_name":"imsingh/ionic-sublime-plugin","owner":"imsingh","description":"This is a simple plugin for sublime text 3 for development of Mobile Apps with Ionic Framework.","archived":false,"fork":false,"pushed_at":"2018-07-05T09:37:57.000Z","size":77,"stargazers_count":166,"open_issues_count":7,"forks_count":29,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-11-19T12:02:54.985Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imsingh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-05-11T11:08:13.000Z","updated_at":"2024-08-27T16:15:39.000Z","dependencies_parsed_at":"2022-08-26T16:21:09.941Z","dependency_job_id":null,"html_url":"https://github.com/imsingh/ionic-sublime-plugin","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/imsingh/ionic-sublime-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imsingh%2Fionic-sublime-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imsingh%2Fionic-sublime-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imsingh%2Fionic-sublime-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imsingh%2Fionic-sublime-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imsingh","download_url":"https://codeload.github.com/imsingh/ionic-sublime-plugin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imsingh%2Fionic-sublime-plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27767436,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-16T02:00:10.477Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-11-14T18:00:30.356Z","updated_at":"2025-12-16T15:56:45.979Z","avatar_url":"https://github.com/imsingh.png","language":null,"funding_links":[],"categories":["And A Bunch More! (I am in the process of sorting these)"],"sub_categories":[],"readme":"# Deprecated - I am no longer maintaing the project. \n\nIonic - Sublime Plugin\n====================\n\nA Simple Sublime Plugin for Ionic Framework Code Snippets\n\nFeel Free to let me know about issues via :\n\n* [Issues](https://github.com/imsingh/ionic-sublime-plugin/issues)\n\nIf you like this plugin and want to donate a penny :\n\n* [Donate](https://www.gittip.com/on/github/imsingh/)\n\n### Installation\n\n1. Search for \"Ionic Framework\" via the \"Package Control: Install Packages\" menu.\n**Note:** If you don't have Sublime Package Control installed, you can find out how to install it here [https://sublime.wbond.net/installation](https://sublime.wbond.net/installation)\n\n2. Clone the repository into your Sublime Text 2/3 packages directory.\ngit clone https://github.com/imsingh/ionic-sublime-plugin.git\n\n3. Download the .zip file and unzip it into your Sublime Text 2/3 packages directory.\n**Note:** You can find your Sublime Text 2/3 packages directory by going to Preferences \u003e Browse Packages.\n\n## What's Included - Content\n\n### AngularJS Directive based Ionic Snippets\n#### These snippets will work only in HTML Files\n\n* [Tabs](#tabs)\n* [Side Menu](#sidemenu)\n* [Navigation](#navigation)\n* [Header Bar/Footer Bar](https://github.com/imsingh/ionic-sublime-plugin#header)\n* [Content](#content)\n* [Scroll](#scroll)\n* [List](#list)\n* [Forms](#forms)\n* [Slide Box](#slide-box)\n* [Popover](#popover)\n\n### Simple HTML Ionic Snippets\n#### These snippets will work only in HTML Files\n\n#### 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.\n\n* [Header Bar \u0026 Footer Bar](#cssheader)\n* [Buttons](#cssbuttons)\n* [List](#csslist)\n* [Cards](#csscards)\n* [Forms](#cssforms)\n* [Toggle](#csstoggle)\n* [Checkbox](#csscheckbox)\n* [Radio Buttons](#cssradio)\n* [Range](#cssrange)\n* [Select](#cssselect)\n* [Tabs](#csstabs)\n\n### Javascript based snippets\n#### Following snippets will only work in javascript file.\n\n* [Actionsheet](#jsactionsheet)\n* [Backdrop](#jsbackdrop)\n* [Popover](#jspopover)\n* [Popup](#jspopup)\n\n\n## AngularJS Directive based Ionic Snippets\n\n\u003ch2 id=\"tabs\"\u003eTabs\u003c/h2\u003e\n\n\n| Component | Snippet Code |\n|---------- | :-----------:|\n| ion-tabs  | ionic-tabs   |\n| ion-tab   | ionic-tab    |\n\n\n\u003ch2 name=\"sidemenu\"\u003eSide Menu\u003c/h2\u003e\n\n| Component      | Snippet Code     |\n|----------------| :---------------:|\n| ion-side-menus | ionic-side-menus |\n\n\n\u003ch2 id=\"navigation\"\u003eNavigation\u003c/h2\u003e\n\n| Component             | Snippet Code            |\n|-----------------------| :----------------------:|\n| ion-nav-bar           | ionic-nav-bar           |\n| ion-nav-view          | ionic-nav-view          |\n| ion-view              | ionic-view              |\n| ion-nav-buttons Left  | ionic-nav-buttons:left  |\n| ion-nav-buttons Right | ionic-nav-buttons:right |\n| ion-nav-back-button   | ionic-nav-back-button   |\n\n\u003ch2 id=\"header\"\u003eHeader Bar/Footer Bar\u003c/h2\u003e\n\n| Component      | Snippet Code     |\n| ---------------| :---------------:|\n| ion-header-bar | ionic-header-bar |\n| ion-footer-bar | ionic-footer-bar |\n\n\u003ch2 id=\"content\"\u003eContent\u003c/h2\u003e\n\n| Component             | Snippet Code            |\n|-----------------------| :----------------------:|\n| ion-content          \t| ionic-content\t          |\n| ion-pane           \t| ionic-pane              |\n| ion-refresher \t \t| ionic-refresher\t\t  |\n\n\u003ch2 id=\"list\"\u003eScroll\u003c/h2\u003e\n\n| Component             \t| Snippet Code            |\n|---------------------------| :----------------------:|\n| ion-scroll\t           \t| ionic-scroll         \t  |\n| ion-infinite-scroll\t\t| ionic-infinite-scrol\t  |\n\n\n\u003ch2 id=\"list\"\u003eList\u003c/h2\u003e\n\n| Component             \t| Snippet Code            |\n|---------------------------| :----------------------:|\n| ion-list\t            \t| ionic-list         \t  |\n| ion-item\t\t\t\t\t| ionic-item\t\t\t  |\n| ion-reorder-button\t\t| ionic-reorder-button\t  |\n| ion-option-button\t\t\t| ionic-option-button\t  |\n| ion-delete-button\t\t\t| ionic-delete-button\t  |\n\n\u003ch2 id=\"forms\"\u003eForms\u003c/h2\u003e\n\n| Component    \t\t\t\t| Snippet Code   \t\t\t|\n| --------------------------| :------------------------:|\n| ion-checkbox \t\t\t\t| ionic-checkbox \t\t\t|\n| ion-radio    \t\t\t\t| ionic-radio    \t\t\t|\n| ion-toggle   \t\t\t\t| ionic-toggle   \t\t\t|\n| ion-checkbox with theme\t| ionic-checkbox:themecolor\t|\n\n##### You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table.\n\n\u003ch2 id=\"slidebox\"\u003eSlide Box\u003c/h2\u003e\n\n| Component     | Snippet Code    |\n| --------------| :--------------:|\n| ion-slide-box | ionic-slide-box |\n| ion-slide     | ionic-slide     |\n\n\u003ch2 id=\"popover\"\u003ePopover\u003c/h2\u003e\n\n| Component    \t\t\t\t| Snippet Code   \t\t\t|\n| --------------------------| :------------------------:|\n| ion-popover-view\t\t\t| ionic-popover \t\t\t|\n\n\n## Simple HTML Ionic Snippets\n\n##### You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in following tables.\n\nExample : ionic-css-footer:calm for calm theme footer.\n\n\u003ch2 name=\"cssheader\"\u003eHeader \u0026 Footer Bar\u003c/h2\u003e\n\n| Component             \t| Snippet Code            \t\t|\n|---------------------------| :----------------------------:|\n| Header Bar\t           \t| ionic-css-header     \t \t \t|\n| Header Bar Theme\t\t\t| ionic-css-header:themecolor\t|\n| Sub Header Bar\t\t\t| ionic-css-subheader\t  \t\t|\n| Footer Bar\t\t\t\t| ionic-css-footer  \t  \t\t|\n| Footer Bar Theme\t\t\t| ionic-css-footer:themecolor\t|\n\n\u003ch2 name=\"cssbuttons\"\u003eButtons Snippet\u003c/h2\u003e\n\n| Component             \t| Snippet Code            \t\t\t\t\t|\n|---------------------------| :----------------------------------------:|\n| Button\t\t           \t| ionic-css-button     \t \t \t\t\t\t|\n| Button Theme\t\t\t\t| ionic-css-button:themecolor\t\t\t\t|\n| Full Width Button\t\t\t| ionic-css-button-full\t  \t\t\t\t\t|\n| Full Width Button Theme\t| ionic-css-button-full:themecolor \t  \t\t|\n| Large Button\t\t\t\t| ionic-css-button-large\t\t\t\t\t|\n| Large Button Theme\t\t| ionic-css-button-large:themecolor \t\t|\n| Small Button\t\t\t\t| ionic-css-button-small\t\t\t\t\t|\n| Small Button Theme\t\t| ionic-css-button-small:themecolor\t\t\t|\n| Outlined Button\t\t\t| ionic-css-button-outline\t\t\t\t\t|\n| Outlined Button Theme\t\t| ionic-css-button-outline:themecolor \t\t|\n| Clear Button\t\t\t\t| ionic-css-button-clear\t\t\t\t\t|\n| Clear Button Theme\t\t| ionic-css-button-clear:themecolor\t\t\t|\n\n\n\u003ch2 name=\"csslist\"\u003eList Snippets\u003c/h2\u003e\n\n| Component             \t\t| Snippet Code            \t\t\t\t\t|\n|-------------------------------| :----------------------------------------:|\n| List\t\t\t           \t\t| ionic-css-list    \t \t \t\t\t\t|\n| List Inset\t\t\t\t\t| ionic-css-list:inset\t\t\t\t\t\t|\n| List Item\t\t\t\t\t\t| ionic-css-list:item\t  \t\t\t\t\t|\n| List Divider\t\t\t\t\t| ionic-css-list:divider\t\t\t  \t\t|\n| List Item with Avatar\t\t\t| ionic-css-list-item:avatar\t\t\t\t|\n| List Item with Left Button\t| ionic-css-list-item:buttonleft\t \t\t|\n| List Item with Right Button\t| ionic-css-list-item:buttonright\t\t\t|\n| List Item with Left Icon\t\t| ionic-css-list-item:iconright\t\t\t\t|\n| List Item with Right Icon\t\t| ionic-css-list-item:iconleft\t\t\t\t|\n| List Item with Right Thumbnail| ionic-css-list-item:thumbright\t\t\t|\n| List Item with Left Thumbnail\t| ionic-css-list-item:thumbleft\t\t\t\t|\n\n\u003ch2 name=\"csscards\"\u003eCard Snippets\u003c/h2\u003e\n\n| Component             \t\t| Snippet Code            \t\t\t\t\t|\n|-------------------------------| :----------------------------------------:|\n| Card\t\t\t           \t\t| ionic-css-card    \t \t \t\t\t\t|\n| Card List\t\t\t\t\t\t| ionic-css-card:list\t\t\t\t\t\t|\n| Card Divider\t\t\t\t\t| ionic-css-card:divider  \t\t\t\t\t|\n| Card Showcase\t\t\t\t\t| ionic-css-card:showcase\t\t\t  \t\t|\n| Cards with Images\t\t\t\t| ionic-css-card:image\t\t\t\t\t\t|\n\n\u003ch2 name=\"cssforms\"\u003eForm Snippets\u003c/h2\u003e\n\n| Component             \t\t| Snippet Code            \t\t\t\t\t|\n|-------------------------------| :----------------------------------------:|\n| Floating Form Element        \t| ionic-css-form-floating \t \t\t\t\t|\n| Stacked Form Element\t\t\t| ionic-css-form-stacked\t\t\t\t\t|\n| Inset\tForm\t\t\t\t\t| ionic-css-form-inset\t  \t\t\t\t\t|\n| Placeholder Form Element\t\t| ionic-css-form-placehoder\t\t\t  \t\t|\n| Header Form Elements\t\t\t| ionic-css-form-header\t\t\t\t\t\t|\n| Inline Form Elements\t\t\t| ionic-css-form-inline\t\t\t\t \t\t|\n| Icon based Form Elements\t\t| ionic-css-form-icon\t\t\t\t\t\t|\n\n\u003ch2 name=\"csstoggle\"\u003eToggle Snippets\u003c/h2\u003e\n\n| Component             \t\t| Snippet Code            \t\t\t\t\t|\n|-------------------------------| :----------------------------------------:|\n| Toggle Default Theme     \t\t| ionic-css-toggle    \t \t \t\t\t\t|\n| Toggle with Theme\t\t\t\t| ionic-css-toggle:themecolor\t\t\t\t|\n\n##### You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table.\n\n\u003ch2 name=\"csscheckbox\"\u003eCheckbox Snippets\u003c/h2\u003e\n\n| Component             \t\t\t| Snippet Code            \t\t\t\t\t|\n|-----------------------------------| :----------------------------------------:|\n| Checkbox Default Theme     \t\t| ionic-css-checkbox    \t \t \t\t\t|\n| Checkbox with Theme\t\t\t\t| ionic-css-checkbox:themecolor\t\t\t\t|\n\n##### You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table.\n\n\u003ch2 name=\"cssradio\"\u003eRadio Buttons Snippets\u003c/h2\u003e\n\n| Component             \t\t\t| Snippet Code            \t\t\t\t\t|\n|-----------------------------------| :----------------------------------------:|\n| Radio Buttons\t\t\t     \t\t| ionic-css-radio\t    \t \t \t\t\t|\n\n\u003ch2 name=\"cssrange\"\u003eRange Snippets\u003c/h2\u003e\n\n| Component             \t\t\t| Snippet Code            \t\t\t\t\t|\n|-----------------------------------| :----------------------------------------:|\n| Range Default Theme     \t\t\t| ionic-css-range\t    \t \t \t\t\t|\n| Range with Theme\t\t\t\t\t| ionic-css-range:themecolor\t\t\t\t|\n\n##### You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table.\n\n\u003ch2 name=\"cssselect\"\u003eSelect Snippets\u003c/h2\u003e\n\n| Component             \t\t\t| Snippet Code            \t\t\t\t\t|\n|-----------------------------------| :----------------------------------------:|\n| Select Element\t\t     \t\t| ionic-css-select\t    \t \t \t\t\t|\n\n\u003ch2 name=\"csstabs\"\u003eTabs Snippets\u003c/h2\u003e\n\n| Component             \t\t| Snippet Code            \t\t\t\t\t|\n|-------------------------------| :----------------------------------------:|\n| Tabs\t\t        \t\t\t| ionic-css-tabs     \t \t \t\t\t\t|\n| Tabs with Theme\t\t\t\t| ionic-css-tabs:themecolor\t\t\t\t\t|\n| Tabs with Icon\t\t\t\t| ionic-css-tabs-icon\t  \t\t\t\t\t|\n| Tabs with Icon \u0026 Theme\t\t| ionic-css-tabs-icon:themecolor \t  \t\t|\n| Tabs with Top Icon\t\t\t| ionic-css-tabs-icontop\t\t\t\t\t|\n| Tabs with Top Icon \u0026 Theme\t| ionic-css-tabs-icontop:themecolor \t\t|\n| Tabs with Left Icon\t\t\t| ionic-css-tabs-iconleft\t\t\t\t\t|\n| Tabs with Left Icon \u0026 Theme\t| ionic-css-tabs-iconleft:themecolor\t\t|\n\n##### You can use any themecolor like light,stable,positive,calm,balanced,energized,assertive,royal,dark, in place of ##themecolor in above table.\n\n## JS Code Snippets for Ionic\n### Theme Snippets will work only in JS File\n\n\u003ch2 name=\"jsactionsheet\"\u003eAction Sheet JS Snippet\u003c/h2\u003e\n\n| Component             \t\t\t| Snippet Code            \t\t\t\t\t|\n|-----------------------------------| :----------------------------------------:|\n| $ionicActionSheet \t     \t\t| ionic-js-actionsheet    \t \t \t\t\t|\n\n\u003ch2 name=\"jsbackdrop\"\u003eBackdrop JS Snippet\u003c/h2\u003e\n\n| Component             \t\t\t| Snippet Code            \t\t\t\t\t|\n|-----------------------------------| :----------------------------------------:|\n| $ionicBackdrop \t     \t\t\t| ionic-js-backdrop\t    \t \t \t\t\t|\n\n\u003ch2 name=\"jspopover\"\u003ePopover JS Snippet\u003c/h2\u003e\n\n| Component             \t\t\t| Snippet Code            \t\t\t\t\t|\n|-----------------------------------| :----------------------------------------:|\n| $ionicPopover\t     \t\t\t\t| ionic-js-popover\t    \t \t \t\t\t|\n\n\u003ch2 name=\"jspopup\"\u003ePopup JS Snippet\u003c/h2\u003e\n\n| Component             \t\t\t| Snippet Code            \t\t\t\t\t|\n|-----------------------------------| :----------------------------------------:|\n| Alert $ionicPopup \t     \t\t| ionic-js-popup:alert    \t \t \t\t\t|\n| Confirm $ionicPopup \t     \t\t| ionic-js-popup:confirm    \t \t \t\t|\n| Prompt $ionicPopup \t     \t\t| ionic-js-popup:prompt  \t \t \t\t\t|\n\n\u003ch2 name=\"jspopup\"\u003eBroadcasts\u003c/h2\u003e\nSometimes you need to broadcast some events to Ionic complete some actions, in `ionic-broadcast-*` you can find all the events you need.\n\n| Snippet Code                     |\n|:--------------------------------:|\n| ionic-broadcast-infinite-scroll  |\n| ionic-broadcast-refresh-complete |\n\n\n## License\n\nIonic Sublime Plugin is open-sourced software licensed under the [MIT License ](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimsingh%2Fionic-sublime-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimsingh%2Fionic-sublime-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimsingh%2Fionic-sublime-plugin/lists"}