|
| 1 | +Ionic Snippets - Sublime Plugin |
| 2 | +================== |
| 3 | + |
| 4 | +A sublime plugin complete with ionic framework snippets |
| 5 | + |
| 6 | +Feel free to let me know what else you want added via: |
| 7 | + |
| 8 | +- Twitter [@tenthgeek](https://twitter.com/tenthgeek) |
| 9 | +- [Issues](https://github.com/PixelDropInc/ionic-snippets-sublime-plugin/issues) |
| 10 | + |
| 11 | + |
| 12 | +## What's included - contents |
| 13 | +- [Installation](#installation) |
| 14 | +- [Header](#header) |
| 15 | +- [Content](#content) |
| 16 | +- [Footer](#footer) |
| 17 | +- [Buttons](#buttons) |
| 18 | +- [List](#list) |
| 19 | +- [Cards](#cards) |
| 20 | +- [Form](#form) |
| 21 | +- [Toggle](#toggle) |
| 22 | +- [Checkbox](#checkbox) |
| 23 | +- [Radiobuttons](#radiobuttons) |
| 24 | +- [Range](#range) |
| 25 | +- [Select](#select) |
| 26 | +- [Tabs](#tabs) |
| 27 | +- [Grid](#grid) |
| 28 | +- [Utility](#utility) |
| 29 | +- [License](#license) |
| 30 | + |
| 31 | + |
| 32 | +### Installation |
| 33 | + |
| 34 | +There are 3 methods for installing this plugin. |
| 35 | + |
| 36 | +1. Search for "ionic framework snippets" via the "Package Control: Install Packages" menu. |
| 37 | +**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) |
| 38 | + |
| 39 | +2. Clone the repository into your Sublime Text 2/3 packages directory. |
| 40 | +`git clone https://github.com/PixelDropInc/ionic-snippets-sublime-plugin.git |
| 41 | + |
| 42 | +3. Download the .zip file and unzip it into your Sublime Text 2/3 packages directory. |
| 43 | +**Note:** You can find your Sublime Text 2/3 packages directory by going to Preferences > Browse Packages. |
| 44 | + |
| 45 | +### Header |
| 46 | + |
| 47 | +| Component | Snippet code | |
| 48 | +|------------------------------- | :-----------------------------:| |
| 49 | +| bar-light | ion-bar-light | |
| 50 | +| bar-stable | ion-bar-balanced | |
| 51 | +| bar-positive | ion-bar-positive | |
| 52 | +| bar-calm | ion-bar-calm | |
| 53 | +| bar-balanced | ion-bar-balanced | |
| 54 | +| bar-energized | ion-bar-energized | |
| 55 | +| bar-assertive | ion-bar-assertive | |
| 56 | +| bar-royal | ion-bar-royal | |
| 57 | +| bar-dark | ion-bar-dark | |
| 58 | +| Sub Header | ion-bar-subheader | |
| 59 | + |
| 60 | + |
| 61 | + |
| 62 | +### Footer |
| 63 | + |
| 64 | +| Component | Snippet code | |
| 65 | +|------------------------------- | :-----------------------------:| |
| 66 | +| bar-footer | ion-bar-footer | |
| 67 | +| bar-footer-left-right | ion-bar-footer-left-right | |
| 68 | +| bar-footer-pull-left | ion-bar-footer-pull-left | |
| 69 | +| bar-footer-pull-right | ion-bar-footer-pull-right | |
| 70 | + |
| 71 | +### Buttons |
| 72 | + |
| 73 | +| Component | Snippet code | |
| 74 | +|------------------------------- | :-----------------------------:| |
| 75 | +| button | ion-button | |
| 76 | +| button-light | ion-button-light | |
| 77 | +| button-stable | ion-button-stable | |
| 78 | +| button-positive | ion-button-positive | |
| 79 | +| button-calm | ion-button-calm | |
| 80 | +| button-balanced | ion-button-balanced | |
| 81 | +| button-energized | ion-button-energized | |
| 82 | +| button-assertive | ion-button-assertive | |
| 83 | +| button-royal | ion-button-royal | |
| 84 | +| button-dark | ion-button-dark | |
| 85 | +| button-fullwidth | ion-button-full | |
| 86 | +| button-smallsize | ion-button-small | |
| 87 | +| button-largesize | ion-button-large | |
| 88 | +| button-outline | ion-button-outline | |
| 89 | +| button-clear | ion-button-clear | |
| 90 | +| button-home | ion-button-home | |
| 91 | +| button-star | ion-button-star | |
| 92 | +| button-chevron-left | ion-button-chevron-left | |
| 93 | +| button-chevron-right | ion-button-chevron-right | |
| 94 | +| button-gear | ion-button-gear | |
| 95 | +| button-setting | ion-button-setting | |
| 96 | +| button-navicon | ion-button-navicon | |
| 97 | +| button-clear | ion-button-clear | |
| 98 | +| button-bar | ion-button-bar | |
| 99 | + |
| 100 | + |
| 101 | + |
| 102 | + |
| 103 | +### List |
| 104 | + |
| 105 | +| Component | Snippet code | |
| 106 | +|------------------------------- | :-----------------------------:| |
| 107 | +| list | ion-list-ul | |
| 108 | +| list-divider | ion-item-divider | |
| 109 | +| list-icons-email | ion-list-icon-email | |
| 110 | +| list-icons-chatBubble | ion-list-icon-chatbubble | |
| 111 | +| list-icons-mic | ion-list-icon-mic | |
| 112 | +| list-icons-person | ion-list-icon-person | |
| 113 | +| list-icons-chatBubble | ion-list-icon-chatbubble | |
| 114 | + |
| 115 | + |
| 116 | +### Cards |
| 117 | + |
| 118 | +| Component | Snippet code | |
| 119 | +|------------------------------- | :-----------------------------:| |
| 120 | +| card | ion-card | |
| 121 | +| card-header-footer | ion-card-header-footer | |
| 122 | +| card-list | ion-list-card | |
| 123 | +| card-showcase | ion-list-card-showcase | |
| 124 | +| card-images | ion-list-card-img | |
| 125 | + |
| 126 | +### Forms |
| 127 | + |
| 128 | +| Component | Snippet code | |
| 129 | +|------------------------------- | :-----------------------------:| |
| 130 | +| form | ion-form | |
| 131 | +| form-placeholder-label | ion-form-placeholder-label | |
| 132 | +| form-inline-label | ion-form-inline-label | |
| 133 | +| form-stacked-label | ion-form-stacked-label | |
| 134 | +| form-floating-label | ion-form-floating-label | |
| 135 | +| inset-form | ion-form-inset | |
| 136 | +| form-input-icon | ion-form-input-icon | |
| 137 | +| form-inline-label | ion-form-inline-label | |
| 138 | +| form-header-input | ion-form-header-input | |
| 139 | + |
| 140 | + |
| 141 | +### Toggle |
| 142 | + |
| 143 | +| Component | Snippet code | |
| 144 | +|------------------------------- | :-----------------------------:| |
| 145 | +| toggle | ion-toggle | |
| 146 | +| toggle-item | ion-item-toggle | |
| 147 | + |
| 148 | +### Checkbox |
| 149 | + |
| 150 | +| Component | Snippet code | |
| 151 | +|------------------------------- | :-----------------------------:| |
| 152 | +| Checkbox | ion-item-checkbox | |
| 153 | + |
| 154 | + |
| 155 | +### RadioButtons |
| 156 | + |
| 157 | +| Component | Snippet code | |
| 158 | +|------------------------------- | :-----------------------------:| |
| 159 | +| RadioButton | ion-item-radio | |
| 160 | + |
| 161 | + |
| 162 | +### Range |
| 163 | + |
| 164 | +| Component | Snippet code | |
| 165 | +|------------------------------- | :-----------------------------:| |
| 166 | +| range | ion-range | |
| 167 | +| range-list | ion-range-list | |
| 168 | + |
| 169 | + |
| 170 | +### Select |
| 171 | + |
| 172 | +| Component | Snippet code | |
| 173 | +|------------------------------- | :-----------------------------:| |
| 174 | +| select | ion-item-select | |
| 175 | + |
| 176 | + |
| 177 | +### Tabs |
| 178 | + |
| 179 | +| Component | Snippet code | |
| 180 | +|------------------------------- | :-----------------------------:| |
| 181 | +| tabs | ion-tabs | |
| 182 | +| tabs-icon | ion-tabs-icon | |
| 183 | +| tabs-top-icon | ion-tabs-icon-top | |
| 184 | +| tabs-left-icon | ion-tabs-icon-left | |
| 185 | + |
| 186 | +### Grid |
| 187 | + |
| 188 | +| Component | Snippet code | |
| 189 | +|------------------------------- | :-----------------------------:| |
| 190 | +| CDN link (both CSS & JS) | bs3-cdn | |
| 191 | +| CDN link (CSS only) | bs3-cdn:css | |
| 192 | +| CDN link (JS only) | bs3-cdn:js | |
| 193 | + |
| 194 | +### Utility |
| 195 | + |
| 196 | +| Component | Snippet code | |
| 197 | +|------------------------------- | :-----------------------------:| |
| 198 | +| icons | ion-star | |
| 199 | +| CDN link (CSS only) | bs3-cdn:css | |
| 200 | +| CDN link (JS only) | bs3-cdn:js | |
| 201 | + |
| 202 | +### License |
| 203 | + |
| 204 | +Ionic Snippets - Sublime Plugin is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT). |
| 205 | +z |
0 commit comments