├── .editorconfig ├── .gitignore ├── CHANGELOG.md ├── CONTRIBUTING.md ├── Default.py ├── README.md ├── directives ├── md-autocomplete.sublime-snippet ├── md-button.sublime-snippet ├── md-card.sublime-snippet ├── md-checkbox.sublime-snippet ├── md-chips.sublime-snippet ├── md-contact-chips.sublime-snippet ├── md-content.sublime-snippet ├── md-datepicker.sublime-snippet ├── md-divider.sublime-snippet ├── md-grid-list.sublime-snippet ├── md-grid-tile.sublime-snippet ├── md-highlight-text.sublime-snippet ├── md-icon-ligature.sublime-snippet ├── md-icon-svg.sublime-snippet ├── md-icon-url.sublime-snippet ├── md-input-container.sublime-snippet ├── md-input.sublime-snippet ├── md-list-item.sublime-snippet ├── md-list.sublime-snippet ├── md-menu.sublime-snippet ├── md-progress-circular.sublime-snippet ├── md-progress-linear.sublime-snippet ├── md-radio-button.sublime-snippet ├── md-radio-group.sublime-snippet ├── md-select.sublime-snippet ├── md-sidenav.sublime-snippet ├── md-slider.sublime-snippet ├── md-subheader.sublime-snippet ├── md-swipe-left.sublime-snippet ├── md-swipe-right.sublime-snippet ├── md-switch.sublime-snippet ├── md-tab.sublime-snippet ├── md-tabs.sublime-snippet ├── md-toolbar.sublime-snippet ├── md-tooltip.sublime-snippet └── md-whiteframe.sublime-snippet ├── messages.json ├── messages └── install.txt └── services └── $mdSidenav.sublime-snippet /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = crlf 5 | insert_final_newline = true 6 | trim_trailing_whitespace = true 7 | charset = utf-8 8 | 9 | [*.{py, json}] 10 | indent_style = space 11 | indent_size = 4 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 0.2.2 2 | More updated directives including datepicker 3 | - better contact chips 4 | - simple md-content 5 | - datepicker and divider 6 | - md-grid list and tile 7 | - md-highlight-text updated 8 | - new md-icons snippets 9 | - input container 10 | 11 | # 0.2.1 12 | - Three snippets for md-chips are consolidated into one super md-chips snippet 13 | - added some commits 14 | - more options for md-card 15 | - updated autocomplete directive with options 16 | - updated md-checkbox snippet 17 | - certain pieces are required + consolidating chips directive 18 | 19 | # 0.2.0 20 | - all options for md-button covered 21 | - more md-button options 22 | - placeholder py file for versioning 23 | - added a CHANGELOG and a CONTRIBUTING file 24 | - enforce editor line spacing 25 | 26 | # 0.1.1 27 | **New Snippets:** 28 | 29 | Reference: https://material.angularjs.org/latest/ 30 | 31 | - md-autocomplete 32 | - md-button 33 | - md-card 34 | - md-checkbox 35 | - md-chip 36 | - md-chip-remove 37 | - md-chips 38 | - md-contact-chips 39 | - md-content 40 | - md-divider 41 | - md-grid-list 42 | - md-grid-tile 43 | - md-highlight-text 44 | - md-icon 45 | - md-input 46 | - md-input-container 47 | - md-list 48 | - md-list-item 49 | - md-menu 50 | - md-progress-circular 51 | - md-progress-linear 52 | - md-radio-button 53 | - md-radio-group 54 | - md-select 55 | - md-sidenav 56 | - md-sidenav-focus 57 | - md-slider 58 | - md-subheader 59 | - md-swipe-left 60 | - md-swipe-right 61 | - md-switch 62 | - md-tab 63 | - md-tabs 64 | - md-toolbar 65 | - md-tooltip 66 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Contributing to Angular-Material-Snippets 2 | --- 3 | 4 | Thank you for considering to help contribute to our source code and to make Angular-Material-Snippets even better than it is today! Here are some of the guidelines we would like you to follow: 5 | 6 | - [Issues and Bugs](#issues) 7 | - [Feature Request](#feature-request) 8 | - [Submission Guidelines](#submission) 9 | - [Submitting a Pull Request](#pull-request) 10 | 11 | ## Found an Issue? 12 | 13 | If you find a bug in the source code or a mistake in the documentation/wikis, you can help remedy it by submitting an issue to [Github Repository](https://github.com/devotis/sublime-angular-material-snippets) 14 | 15 | ***Please see the Submission Guidelines below*** 16 | 17 | ## Want a feature? 18 | 19 | You can request a new feature by submitting an issue to our [Github Repository](https://github.com/devotis/sublime-angular-material-snippets). If you would like to implement a new feature yourself then consider what kind of change it is: 20 | 21 | - ***Major Changes***: that can dramatically change the core functionality of the plugin 22 | - ***Small Changes***: can be crafted and submitted to the [Github Repository](https://github.com/devotis/sublime-angular-material-snippets) as a Pull Request 23 | 24 | ## Submission Guidelines: 25 | 26 | _Before you submit an issue, search the archive. Your question may have already been answered._ 27 | 28 | If your issue appears to be a bug, and hasn't been reported, open a new issue. Help us to maximize the effort we can spend fixing issues and adding new features by not reporting duplicate issues. Providing the following information will increase the chances of your issue being dealt with quickly: 29 | 30 | - **Overview of the Issue** - if an error is being thrown, a _non minified_ stack trace helps 31 | - **Motivation for or Use Case** - explain why this is a bug for you 32 | - **Versioning** - is this issue being caused because of an outdated plugin? 33 | - **Operating Systems** - is this a problem that is unique to your Operating System? 34 | - **Reproduce the Error** - provide steps on how to re-create the error 35 | - **Related Issues** - has a similar issue been reported before? 36 | - **Suggest a fix** - if you can't fix the bug yourself, perhaps you can point to what might be causing the problem (i.e. line of code or commit) 37 | 38 | ## Submitting a Pull Request 39 | 40 | Before you submit a pull request consider the following guidelines: 41 | 42 | - Search [Github](https://github.com/devotis/sublime-angular-material-snippets/pulls) for an open or closed PR that relates to your submission. You do not want to duplicate effort. 43 | - Make your changes in a new git branch: 44 | ```bash 45 | git checkout -b my-fix-branch master 46 | ``` 47 | - Commit your changes using a descriptive commit message that easily describes the resolution. Please note that providing a further description can be made in the PR submission form 48 | ```bash 49 | git commit -a 50 | ``` 51 | - Push your branch to Github 52 | ```bash 53 | git push origin my-fix-branch 54 | ``` 55 | - In Github, submit a PR to ```Angular-Material-Snippets-for-Sublime``` 56 | - If we suggest changes then: 57 | - Make the required updates 58 | - Rebase your branch and force push to your Github Repo _(this will update your PR)_: 59 | ```bash 60 | git rebase master -i 61 | git push origin my-fix-branch -f 62 | ``` 63 | 64 | **That's it! Thank you for your contribution** 65 | -------------------------------------------------------------------------------- /Default.py: -------------------------------------------------------------------------------- 1 | import os 2 | import sys 3 | 4 | __version__ = '0.2.2' 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sublime Angular Material snippets 2 | 3 | A Sublime Text 2/3 snippet to generate Angular Material snippets for <md-button>, <md-input>, <md-icon>, etc 4 | 5 | Collaborators are welcome to add and improve snippets for directives. All snippets should be based on the directives described in this documentation: https://material.angularjs.org/latest/#/ 6 | 7 | ## Install 8 | 9 | ### Option 1: Package Control 10 | 11 | On Mac press Cmd+Shift+P or on PC press Ctrl+Shift+P. Then type 'Install' then press enter to see a list of packages. Search for 'Angular Material Snippets' then press enter to install. 12 | 13 | ### Option 2: Manual 14 | 15 | Copy the files to your Packages directory. 16 | 17 | ## Usage 18 | 19 | Start typing `Ctrl+Space to autocomplete. 20 | 21 | ##Snippets 22 | 23 | See the [directives](https://github.com/devotis/sublime-angular-material-snippets/tree/master/directives) directory for supported snippets. 24 | 25 | - md-autocomplete 26 | - md-button 27 | - md-card 28 | etc... 29 | 30 | ## License 31 | 32 | [MIT Licensed](http://sloria.mit-license.org/). 33 | -------------------------------------------------------------------------------- /directives/md-autocomplete.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ${5: 5 | ${6:\{\{ ${8:item.display} \}\}} 6 | } 7 | ${9: 8 | ${10:No Matches Found.} 9 | } 10 | 11 | ]]> 12 | md-autocomplete 13 | Angular Material - Autocomplete directive with options 14 | text.html 15 | 16 | -------------------------------------------------------------------------------- /directives/md-button.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ${12:content}]]> 3 | md-button 4 | Angular Material - Button directive with options 5 | text.html 6 | 7 | -------------------------------------------------------------------------------- /directives/md-card.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ${1:${3:image caption}} 5 | 6 |

${4:Card headline}

7 |

${5:Card content}

8 | 9 | ${6: 10 | ${7:Card footer} 11 | } 12 | ${8:
13 | ${12:${13:content}} 14 |
} 15 | 16 | ]]> 17 | md-card 18 | Angular Material - Card directive with options 19 | text.html 20 | 21 | -------------------------------------------------------------------------------- /directives/md-checkbox.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ${13:content} 5 | 6 | ]]> 7 | md-checkbox 8 | Angular Material - Checkbox directive with options 9 | text.html 10 | 11 | -------------------------------------------------------------------------------- /directives/md-chips.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ${19: 5 | ${20:content} 6 | } 7 | ${21:} 10 | ${24:${25:content}} 11 | 12 | ]]> 13 | md-chips 14 | Angular Material - md-chips with full options and templating 15 | text.html 16 | 17 | -------------------------------------------------------------------------------- /directives/md-contact-chips.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | ]]> 6 | md-contact-chips 7 | Angular Material - md-contact-chips with full options 8 | text.html 9 | 10 | -------------------------------------------------------------------------------- /directives/md-content.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ${3:Lorem ipsum dolor sit amet, ne quod novum mei} 5 | 6 | ]]> 7 | md-content 8 | Angular Material - md-content 9 | text.html 10 | 11 | -------------------------------------------------------------------------------- /directives/md-datepicker.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ]]> 5 | md-datepicker 6 | Angular Material - md-date-picker 7 | text.html 8 | 9 | -------------------------------------------------------------------------------- /directives/md-divider.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ]]> 5 | md-divider 6 | Angular Material - md-divider 7 | text.html 8 | 9 | -------------------------------------------------------------------------------- /directives/md-grid-list.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ${5:$6} 5 | 6 | ]]> 7 | md-grid-list 8 | Angular Material - md-grid-list 9 | text.html 10 | 11 | -------------------------------------------------------------------------------- /directives/md-grid-tile.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ${5: 5 | ${6:

$7

} 6 | } 7 | ${8: 8 | ${9:

$10

} 9 | } 10 | 11 | ]]> 12 | md-grid-tile 13 | Angular Material - md-grid-tile 14 | text.html 15 | 16 | -------------------------------------------------------------------------------- /directives/md-highlight-text.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 |
    5 |
  • $5
    • 6 |
7 | ]]> 8 | md-highlight-text 9 | Angular Material - md-highlight-text 10 | text.html 11 | 12 | -------------------------------------------------------------------------------- /directives/md-icon-ligature.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ${3:font-name} 4 | ]]> 5 | md-icon-ligature 6 | Angular Material - md-icon using Ligatures 7 | text.html 8 | 9 | -------------------------------------------------------------------------------- /directives/md-icon-svg.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ]]> 5 | md-icon-svg 6 | Angular Material - md-icon using SVG 7 | text.html 8 | 9 | -------------------------------------------------------------------------------- /directives/md-icon-url.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ]]> 5 | md-icon-class 6 | Angular Material - md-icon using Classnames 7 | text.html 8 | 9 | -------------------------------------------------------------------------------- /directives/md-input-container.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ${1: 5 | } 6 | 7 | ]]> 8 | md-input-container 9 | Angular Material - md-input-container 10 | text.html 11 | 12 | -------------------------------------------------------------------------------- /directives/md-input.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | $1 4 | 5 | ]]> 6 | md-chip-remove 7 | Angular Material - input Use as a child of an md-input-container. 8 | text.html 9 | 10 | -------------------------------------------------------------------------------- /directives/md-list-item.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | $2 5 | ]]> 6 | md-list-item 7 | Angular Material - The md-list-item directive is a container intended for row items in a md-list container. 8 | text.html 9 | 10 | -------------------------------------------------------------------------------- /directives/md-list.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | $1 5 | ]]> 6 | md-list 7 | Angular Material - The md-list directive is a list container for 1..n md-list-item tags. 8 | text.html 9 | 10 | -------------------------------------------------------------------------------- /directives/md-menu.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | Do Something 10 | 11 | ]]> 12 | md-menu 13 | Angular Material - Menus are elements that open when clicked. They are useful for displaying additional options within the context of an action. 14 | text.html 15 | 16 | -------------------------------------------------------------------------------- /directives/md-progress-circular.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ]]> 5 | md-progress-circular 6 | Angular Material - The circular progress directive is used to make loading content in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content. 7 | text.html 8 | 9 | -------------------------------------------------------------------------------- /directives/md-progress-linear.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | ]]> 6 | md-progress-linear 7 | Angular Material - The linear progress directive is used to make loading content in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content. 8 | text.html 9 | 10 | -------------------------------------------------------------------------------- /directives/md-radio-button.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | $4]]> 3 | md-radio-button 4 | Angular Material - The md-radio-button directive is the child directive required to be used within md-radio-group elements. 5 | text.html 6 | 7 | -------------------------------------------------------------------------------- /directives/md-radio-group.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | $2 5 | 6 | ]]> 7 | md-list 8 | Angular Material - The md-radio-group directive identifies a grouping container for the 1..n grouped radio buttons; specified using nested md-radio-button tags. 9 | text.html 10 | 11 | -------------------------------------------------------------------------------- /directives/md-select.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | Select a state 5 | {{ opt }} 6 | 7 | ]]> 8 | md-select 9 | Angular Material - Displays a select box, bound to an ng-model. 10 | text.html 11 | 12 | -------------------------------------------------------------------------------- /directives/md-sidenav.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | Left Nav! 6 | 7 | 8 | Center Content 9 | 10 | Open Left Menu 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | ]]> 23 | md-sidenav 24 | Angular Material - A Sidenav component that can be opened and closed programatically. 25 | text.html 26 | 27 | -------------------------------------------------------------------------------- /directives/md-slider.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ]]> 3 | md-slider 4 | Angular Material - The md-slider component allows the user to choose from a range of values. 5 | text.html 6 | 7 | -------------------------------------------------------------------------------- /directives/md-subheader.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | $1]]> 3 | md-subheader 4 | Angular Material - The md-subheader directive is a subheader for a section. By default it is sticky. 5 | text.html 6 | 7 | -------------------------------------------------------------------------------- /directives/md-swipe-left.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | $1]]> 3 | md-swipe-left 4 | Angular Material - The md-swipe-left directives allows you to specify custom behavior when an element is swiped left. 5 | text.html 6 | 7 | -------------------------------------------------------------------------------- /directives/md-swipe-right.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | $1]]> 3 | md-swipe-right 4 | Angular Material - The md-swipe-right directives allows you to specify custom behavior when an element is swiped right. 5 | text.html 6 | 7 | -------------------------------------------------------------------------------- /directives/md-switch.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | $3 5 | 6 | ]]> 7 | md-switch 8 | Angular Material - The md-switch can also use md-no-ink, ng-true-value="", ng-false-value="", ng-change="" attributes. 9 | text.html 10 | 11 | -------------------------------------------------------------------------------- /directives/md-tab.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 |

$1

6 | 7 | 8 |

9 | $2 10 |

11 | 12 | 13 | ]]> 14 | md-tab 15 | Angular Material - Use the md-tab a nested directive used within md-tabs to specify a tab with a label and optional view content. 16 | text.html 17 | 18 | -------------------------------------------------------------------------------- /directives/md-tabs.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | $1 5 | 6 | 7 | 20 | ]]> 21 | md-tab 22 | Angular Material - The md-tabs directive serves as the container for 1..n md-tab child directives to produces a Tabs components. 23 | text.html 24 | 25 | -------------------------------------------------------------------------------- /directives/md-toolbar.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 |

9 | Toolbar with Icon Buttons 10 |

11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Hello! 22 | 23 | 24 | ]]> 25 | md-toolbar 26 | Angular Material - Toolbars are usually used above a content area to display the title of the current page, and show relevant action buttons for that page. 27 | text.html 28 | 29 | -------------------------------------------------------------------------------- /directives/md-tooltip.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | $1 5 | 6 | ]]> 7 | md-tooltip 8 | Angular Material - Place a md-tooltip as a child of the element it describes. 9 | text.html 10 | 11 | -------------------------------------------------------------------------------- /directives/md-whiteframe.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | $1 5 | ]]> 6 | md-whiteframe 7 | Angular Material - whiteframe for content can use z1-z5 class. 8 | text.html 9 | 10 | -------------------------------------------------------------------------------- /messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "install": "messages/install.txt" 3 | } -------------------------------------------------------------------------------- /messages/install.txt: -------------------------------------------------------------------------------- 1 | ============================================================ 2 | Thank you for installing Angular Material Snippets 3 | ============================================================ 4 | 5 | Angular Material snippets is a work in progress. 6 | Just a few directives are supported. 7 | 8 | All snippest are and should be based on 9 | the directives described in this documentation 10 | 11 | https://material.angularjs.org/latest/#/ 12 | 13 | Collaborators are encouraged to ccontribute. To do so: 14 | 1. Fork this repo 15 | https://github.com/devotis/sublime-angular-material-snippets 16 | 2. Add your contribution and 17 | 3. Make a pull request. 18 | 4. I'll verify and make sure it'll become available to ST within 24 hours 19 | 20 | This package is compatible with both Sublime 21 | Text versions 2 & 3. 22 | 23 | Documentation, examples & issue filing can be found here: 24 | https://github.com/devotis/sublime-angular-material-snippets -------------------------------------------------------------------------------- /services/$mdSidenav.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 11 | $mdSidenav 12 | Angular Material - $mdSidenav makes it easy to interact with multiple sidenavs in an app. 13 | source.js 14 | 15 | --------------------------------------------------------------------------------