diff --git a/CHANGELOG.md b/CHANGELOG.md index f97bf66..83a2cd1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,22 @@ -# 0.2.0 +# 0.2.2 +More updated directives including datepicker +- better contact chips +- simple md-content +- datepicker and divider +- md-grid list and tile +- md-highlight-text updated +- new md-icons snippets +- input container + +# 0.2.1 +- Three snippets for md-chips are consolidated into one super md-chips snippet +- added some commits +- more options for md-card +- updated autocomplete directive with options +- updated md-checkbox snippet +- certain pieces are required + consolidating chips directive +# 0.2.0 - all options for md-button covered - more md-button options - placeholder py file for versioning @@ -7,7 +24,6 @@ - enforce editor line spacing # 0.1.1 - **New Snippets:** Reference: https://material.angularjs.org/latest/ diff --git a/Default.py b/Default.py index a4f2b3d..4bc26f3 100644 --- a/Default.py +++ b/Default.py @@ -1,4 +1,4 @@ import os import sys -__version__ = '0.1.1' +__version__ = '0.2.2' diff --git a/README.md b/README.md index 7cc4461..23d4106 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,11 @@ A Sublime Text 2/3 snippet to generate Angular Material snippets for <md-button>, <md-input>, <md-icon>, etc -Work in progress here. Collaborators are welcome to add and improve snippets for directives. Check the TODO paragraph below. +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/#/ ## Install -### Option 1 Package Control +### Option 1: Package Control 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. @@ -16,54 +16,16 @@ Copy the files to your Packages directory. ## Usage -Start typing `Ctrl+Space to autocomplete. ##Snippets -Currently supports these directives. +See the [directives](https://github.com/devotis/sublime-angular-material-snippets/tree/master/directives) directory for supported snippets. - md-autocomplete - md-button - md-card -- md-checkbox -- md-chip -- md-chip-remove -- md-chips -- md-contact-chips -- md-content -- md-divider -- md-grid-list -- md-grid-tile -- md-highlight-text -- md-icon -- md-input -- md-input-container -- md-list -- md-list-item -- md-menu -- md-progress-circular -- md-progress-linear -- md-radio-button -- md-radio-group -- md-select -- md-sidenav -- md-sidenav-focus -- md-slider -- md-subheader -- md-swipe-left -- md-swipe-right -- md-switch -- md-tab -- md-tabs -- md-toolbar -- md-tooltip - -##TODO - -Collaborators are most welcome to help with the following - -- Fix double < character that is placed after hitting enter -- Improve directives. All snippest should be based on the directives described in this documentation: https://material.angularjs.org/latest/#/ +etc... ## License diff --git a/directives/md-autocomplete.sublime-snippet b/directives/md-autocomplete.sublime-snippet index 5247ba8..856b013 100644 --- a/directives/md-autocomplete.sublime-snippet +++ b/directives/md-autocomplete.sublime-snippet @@ -1,10 +1,15 @@ - {{item.display}} +md-autocomplete md-selected-item="${1:selectedItem}" md-search-text="${2:searchText}" md-items="${3:item in getMatches(searchText)}" md-item-text="${4:item.display}"> + ${5: + ${6:\{\{ ${8:item.display} \}\}} + } + ${9: + ${10:No Matches Found.} + } ]]> md-autocomplete - Angular Material - autocomplete is a special input component with a drop-down of all possible matches to a custom query. This component allows you to provide real-time suggestions as the user types in the input area. + Angular Material - Autocomplete directive with options text.html - \ No newline at end of file + diff --git a/directives/md-button.sublime-snippet b/directives/md-button.sublime-snippet index 4e0a45e..87706d8 100644 --- a/directives/md-button.sublime-snippet +++ b/directives/md-button.sublime-snippet @@ -1,6 +1,6 @@ - ${12:content}]]> + ${12:content}]]> md-button - Angular Material Button directive with options + Angular Material - Button directive with options text.html diff --git a/directives/md-card.sublime-snippet b/directives/md-card.sublime-snippet index 4cf45cd..31a4a2a 100644 --- a/directives/md-card.sublime-snippet +++ b/directives/md-card.sublime-snippet @@ -1,17 +1,20 @@ - image caption - -

Card headline

-

Card content

- - - Card footer - +md-card> + ${1:${3:image caption}} + +

${4:Card headline}

+

${5:Card content}

+ + ${6: + ${7:Card footer} + } + ${8:
+ ${12:${13:content}} +
} ]]> md-card - Angular Material - Card with optional footer + Angular Material - Card directive with options text.html - \ No newline at end of file + diff --git a/directives/md-checkbox.sublime-snippet b/directives/md-checkbox.sublime-snippet index e1143c4..4d6141a 100644 --- a/directives/md-checkbox.sublime-snippet +++ b/directives/md-checkbox.sublime-snippet @@ -1,6 +1,10 @@ - $3]]> + + ${13:content} + +]]> md-checkbox - Angular Material - button directive with optional ink ripples (default enabled). + Angular Material - Checkbox directive with options text.html - \ No newline at end of file + diff --git a/directives/md-chip-remove.sublime-snippet b/directives/md-chip-remove.sublime-snippet deleted file mode 100644 index d756056..0000000 --- a/directives/md-chip-remove.sublime-snippet +++ /dev/null @@ -1,6 +0,0 @@ - - ]]> - md-chip-remove - Angular Material - md-chip-remove Designates an element to be used as the delete button for a chip. This element is passed as a child of the md-chips element. - text.html - \ No newline at end of file diff --git a/directives/md-chip.sublime-snippet b/directives/md-chip.sublime-snippet deleted file mode 100644 index 9ad3b7a..0000000 --- a/directives/md-chip.sublime-snippet +++ /dev/null @@ -1,6 +0,0 @@ - - $1]]> - md-chip - Angular Material - md-chip is a component used within md-chips and is responsible for rendering individual chips. - text.html - \ No newline at end of file diff --git a/directives/md-chips.sublime-snippet b/directives/md-chips.sublime-snippet index e36ae3c..a542875 100644 --- a/directives/md-chips.sublime-snippet +++ b/directives/md-chips.sublime-snippet @@ -1,7 +1,16 @@ - -]]> + + ${19: + ${20:content} + } + ${21:} + ${24:${25:content}} + +]]> md-chips - Angular Material - md-chips is an input component for building lists of strings or objects. The list items are displayed as 'chips'. This component can make use of an input element or an md-autocomplete element. + Angular Material - md-chips with full options and templating text.html - \ No newline at end of file + diff --git a/directives/md-contact-chips.sublime-snippet b/directives/md-contact-chips.sublime-snippet index 9e248fd..558605b 100644 --- a/directives/md-contact-chips.sublime-snippet +++ b/directives/md-contact-chips.sublime-snippet @@ -1,9 +1,9 @@ +md-contact-chips ng-model="${1:variable}" md-contacts="${2:searchFunction}" md-contact-name="${3:string}" md-contact-image="${4:string}" md-contact-email="${5:string}" ${6:md-require-match="${7:boolean}" md-highlight-flags="${8:string}" filter-selected="${9:filterFunction}" placeholder="${10:string}"}> ]]> md-contact-chips - Angular Material - md-contact-chips is an input component based on md-chips and makes use of an md-autocomplete element. The component allows the caller to supply a query expression which returns a list of possible contacts. The user can select one of these and add it to the list of chips. + Angular Material - md-contact-chips with full options text.html - \ No newline at end of file + diff --git a/directives/md-content.sublime-snippet b/directives/md-content.sublime-snippet index 40a6160..03d7c8f 100644 --- a/directives/md-content.sublime-snippet +++ b/directives/md-content.sublime-snippet @@ -1,10 +1,10 @@ - Lorem ipsum dolor sit amet, ne quod novum mei.$1 +md-content ${1:layout-padding} ${2:layout-wrap}> + ${3:Lorem ipsum dolor sit amet, ne quod novum mei} ]]> md-content - Angular Material - The md-content directive is a container element useful for scrollable content. Add the [layout-padding] attribute to make the content padded. + Angular Material - md-content text.html - \ No newline at end of file + diff --git a/directives/md-datepicker.sublime-snippet b/directives/md-datepicker.sublime-snippet new file mode 100644 index 0000000..0ecfcc3 --- /dev/null +++ b/directives/md-datepicker.sublime-snippet @@ -0,0 +1,8 @@ + + +]]> + md-datepicker + Angular Material - md-date-picker + text.html + diff --git a/directives/md-divider.sublime-snippet b/directives/md-divider.sublime-snippet index 519d1a3..c6a3225 100644 --- a/directives/md-divider.sublime-snippet +++ b/directives/md-divider.sublime-snippet @@ -1,6 +1,8 @@ - ]]> + +]]> md-divider - Angular Material - Dividers group and separate content within lists and page layouts using strong visual and spatial distinctions. This divider is a thin rule, lightweight enough to not distract the user from content. + Angular Material - md-divider text.html diff --git a/directives/md-grid-list.sublime-snippet b/directives/md-grid-list.sublime-snippet index 2437cc5..786290a 100644 --- a/directives/md-grid-list.sublime-snippet +++ b/directives/md-grid-list.sublime-snippet @@ -1,10 +1,10 @@ - $1 +md-grid-list md-cols="${1:number}" md-gutter="${2:string}" md-row-height="${3:string}" md-on-layout="${4:expr}"> + ${5:$6} ]]> md-grid-list - Angular Material - Grid lists are an alternative to standard list views. Grid lists are distinct from grids used for layouts and other visual presentations. + Angular Material - md-grid-list text.html diff --git a/directives/md-grid-tile.sublime-snippet b/directives/md-grid-tile.sublime-snippet index 6ffbb7a..101d7c9 100644 --- a/directives/md-grid-tile.sublime-snippet +++ b/directives/md-grid-tile.sublime-snippet @@ -1,12 +1,15 @@ - -

This is a footer

- +md-grid-tile ${1:md-colspan="${2:number}"} ${3:md-rowspan="${4:number}"}> + ${5: + ${6:

$7

} + } + ${8: + ${9:

$10

} + } ]]> md-grid-tile - Angular Material - Tiles contain the content of an md-grid-list. They span one or more grid cells vertically or horizontally, and use md-grid-tile-{footer,header} to display secondary content within the tile. + Angular Material - md-grid-tile text.html - \ No newline at end of file + diff --git a/directives/md-highlight-text.sublime-snippet b/directives/md-highlight-text.sublime-snippet index 2c7200a..2c005c9 100644 --- a/directives/md-highlight-text.sublime-snippet +++ b/directives/md-highlight-text.sublime-snippet @@ -1,13 +1,11 @@ +input ${1:placeholder="${2:Enter a search term...}"} ${3:ng-model="${4:searchTerm}"} type="${5:text}">
    -
  • - {{result.text}} -
    • +
  • $5
]]> md-highlight-text - Angular Material - The md-highlight-text directive allows you to specify text that should be highlighted within an element. Highlighted text will be wrapped in <span class="highlight"></span> which can be styled through CSS. Please note that child elements may not be used with this directive. + Angular Material - md-highlight-text text.html - \ No newline at end of file + diff --git a/directives/md-icon-ligature.sublime-snippet b/directives/md-icon-ligature.sublime-snippet new file mode 100644 index 0000000..f5449a3 --- /dev/null +++ b/directives/md-icon-ligature.sublime-snippet @@ -0,0 +1,8 @@ + + ${3:font-name} +]]> + md-icon-ligature + Angular Material - md-icon using Ligatures + text.html + diff --git a/directives/md-icon-svg.sublime-snippet b/directives/md-icon-svg.sublime-snippet new file mode 100644 index 0000000..315a95d --- /dev/null +++ b/directives/md-icon-svg.sublime-snippet @@ -0,0 +1,8 @@ + + +]]> + md-icon-svg + Angular Material - md-icon using SVG + text.html + diff --git a/directives/md-icon-url.sublime-snippet b/directives/md-icon-url.sublime-snippet new file mode 100644 index 0000000..b1e4537 --- /dev/null +++ b/directives/md-icon-url.sublime-snippet @@ -0,0 +1,8 @@ + + +]]> + md-icon-class + Angular Material - md-icon using Classnames + text.html + diff --git a/directives/md-icon.sublime-snippet b/directives/md-icon.sublime-snippet deleted file mode 100644 index dcab4fa..0000000 --- a/directives/md-icon.sublime-snippet +++ /dev/null @@ -1,6 +0,0 @@ - - ]]> - md-icon - Angular Material - The md-icon directive is an markup element useful for showing an icon based on a font-face or a SVG. Both external SVGs (via URLs) or cached SVG from icon sets can be easily loaded and used. - text.html - \ No newline at end of file diff --git a/directives/md-input-container.sublime-snippet b/directives/md-input-container.sublime-snippet index 1b1d40a..3e73cf3 100644 --- a/directives/md-input-container.sublime-snippet +++ b/directives/md-input-container.sublime-snippet @@ -1,10 +1,11 @@ - $1 +md-input-container> + ${1: + } ]]> - md-highlight-text - Angular Material - Use md-input-container as parent of any input or textarea element. + md-input-container + Angular Material - md-input-container text.html - \ No newline at end of file + diff --git a/directives/md-input.sublime-snippet b/directives/md-input.sublime-snippet index c39aa13..20d1421 100644 --- a/directives/md-input.sublime-snippet +++ b/directives/md-input.sublime-snippet @@ -1,6 +1,6 @@ $1 +label>$1 ]]> md-chip-remove diff --git a/directives/md-list-item.sublime-snippet b/directives/md-list-item.sublime-snippet index 3d25bce..fa2ba3e 100644 --- a/directives/md-list-item.sublime-snippet +++ b/directives/md-list-item.sublime-snippet @@ -1,9 +1,9 @@ +md-list-item class="md-2-line" ng-repeat="$1"> $2 ]]> md-list-item Angular Material - The md-list-item directive is a container intended for row items in a md-list container. text.html - \ No newline at end of file + diff --git a/directives/md-list.sublime-snippet b/directives/md-list.sublime-snippet index 377327d..0e912bd 100644 --- a/directives/md-list.sublime-snippet +++ b/directives/md-list.sublime-snippet @@ -1,9 +1,9 @@ +md-list> $1 ]]> md-list Angular Material - The md-list directive is a list container for 1..n md-list-item tags. text.html - \ No newline at end of file + diff --git a/directives/md-menu.sublime-snippet b/directives/md-menu.sublime-snippet index e249267..ed60dfe 100644 --- a/directives/md-menu.sublime-snippet +++ b/directives/md-menu.sublime-snippet @@ -1,6 +1,6 @@ +md-menu md-offset="0 0"> @@ -12,4 +12,4 @@ md-menu Angular Material - Menus are elements that open when clicked. They are useful for displaying additional options within the context of an action. text.html - \ No newline at end of file + diff --git a/directives/md-progress-circular.sublime-snippet b/directives/md-progress-circular.sublime-snippet index 07f8b1f..f5fd663 100644 --- a/directives/md-progress-circular.sublime-snippet +++ b/directives/md-progress-circular.sublime-snippet @@ -1,6 +1,6 @@ +md-progress-circular md-mode="determinate" value="$1" ng-value="$2" md-diameter="48"> ]]> md-progress-circular 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. diff --git a/directives/md-progress-linear.sublime-snippet b/directives/md-progress-linear.sublime-snippet index 6a9fa8c..fd13dcc 100644 --- a/directives/md-progress-linear.sublime-snippet +++ b/directives/md-progress-linear.sublime-snippet @@ -1,6 +1,6 @@ +md-progress-linear md-mode="buffer" value="$1" md-buffer-value="$2"> ]]> md-progress-linear diff --git a/directives/md-radio-button.sublime-snippet b/directives/md-radio-button.sublime-snippet index 6dbf214..91f5360 100644 --- a/directives/md-radio-button.sublime-snippet +++ b/directives/md-radio-button.sublime-snippet @@ -1,5 +1,5 @@ - $4]]> + $4]]> md-radio-button Angular Material - The md-radio-button directive is the child directive required to be used within md-radio-group elements. text.html diff --git a/directives/md-radio-group.sublime-snippet b/directives/md-radio-group.sublime-snippet index 2ca7a67..43c6dff 100644 --- a/directives/md-radio-group.sublime-snippet +++ b/directives/md-radio-group.sublime-snippet @@ -1,10 +1,10 @@ +md-radio-group ng-model="$1"> $2 ]]> md-list 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. text.html - \ No newline at end of file + diff --git a/directives/md-select.sublime-snippet b/directives/md-select.sublime-snippet index 94ad097..6559c97 100644 --- a/directives/md-select.sublime-snippet +++ b/directives/md-select.sublime-snippet @@ -1,6 +1,6 @@ +md-select ng-model="$1"> Select a state {{ opt }} @@ -8,4 +8,4 @@ md-select Angular Material - Displays a select box, bound to an ng-model. text.html - \ No newline at end of file + diff --git a/directives/md-sidenav.sublime-snippet b/directives/md-sidenav.sublime-snippet index b45b911..9a0e8f5 100644 --- a/directives/md-sidenav.sublime-snippet +++ b/directives/md-sidenav.sublime-snippet @@ -1,6 +1,6 @@ +div layout="row" ng-controller="MyController"> Left Nav! @@ -23,4 +23,4 @@ md-sidenav Angular Material - A Sidenav component that can be opened and closed programatically. text.html - \ No newline at end of file + diff --git a/directives/md-slider.sublime-snippet b/directives/md-slider.sublime-snippet index 3d623dd..4ebe1ea 100644 --- a/directives/md-slider.sublime-snippet +++ b/directives/md-slider.sublime-snippet @@ -1,6 +1,6 @@ - ]]> + ]]> md-slider Angular Material - The md-slider component allows the user to choose from a range of values. text.html - \ No newline at end of file + diff --git a/directives/md-subheader.sublime-snippet b/directives/md-subheader.sublime-snippet index 7bb6188..6ef7db9 100644 --- a/directives/md-subheader.sublime-snippet +++ b/directives/md-subheader.sublime-snippet @@ -1,6 +1,6 @@ - $1]]> + $1]]> md-subheader Angular Material - The md-subheader directive is a subheader for a section. By default it is sticky. text.html - \ No newline at end of file + diff --git a/directives/md-swipe-left.sublime-snippet b/directives/md-swipe-left.sublime-snippet index 2bc23ef..9cd23f6 100644 --- a/directives/md-swipe-left.sublime-snippet +++ b/directives/md-swipe-left.sublime-snippet @@ -1,6 +1,6 @@ - $1]]> + $1]]> md-swipe-left Angular Material - The md-swipe-left directives allows you to specify custom behavior when an element is swiped left. text.html - \ No newline at end of file + diff --git a/directives/md-swipe-right.sublime-snippet b/directives/md-swipe-right.sublime-snippet index cbdf69d..01426cb 100644 --- a/directives/md-swipe-right.sublime-snippet +++ b/directives/md-swipe-right.sublime-snippet @@ -1,6 +1,6 @@ - $1]]> + $1]]> md-swipe-right Angular Material - The md-swipe-right directives allows you to specify custom behavior when an element is swiped right. text.html - \ No newline at end of file + diff --git a/directives/md-switch.sublime-snippet b/directives/md-switch.sublime-snippet index 421cbdf..f39dac0 100644 --- a/directives/md-switch.sublime-snippet +++ b/directives/md-switch.sublime-snippet @@ -1,10 +1,10 @@ +md-switch ng-model="$1" aria-label="$2"> $3 ]]> md-switch Angular Material - The md-switch can also use md-no-ink, ng-true-value="", ng-false-value="", ng-change="" attributes. text.html - \ No newline at end of file + diff --git a/directives/md-tab.sublime-snippet b/directives/md-tab.sublime-snippet index 06aa571..d475868 100644 --- a/directives/md-tab.sublime-snippet +++ b/directives/md-tab.sublime-snippet @@ -1,6 +1,6 @@ +md-tab label="" disabled md-on-select="" md-on-deselect="">

$1

 @@ -14,4 +14,4 @@ md-tab Angular Material - Use the md-tab a nested directive used within md-tabs to specify a tab with a label and optional view content. text.html - \ No newline at end of file + diff --git a/directives/md-tabs.sublime-snippet b/directives/md-tabs.sublime-snippet index 409b47d..3acb457 100644 --- a/directives/md-tabs.sublime-snippet +++ b/directives/md-tabs.sublime-snippet @@ -1,6 +1,6 @@ +md-tabs md-selected="selectedIndexInteger"> $1 @@ -21,4 +21,4 @@ md-autoselect - boolean - When present, any tabs added after the initial load wi md-tab Angular Material - The md-tabs directive serves as the container for 1..n md-tab child directives to produces a Tabs components. text.html - \ No newline at end of file + diff --git a/directives/md-toolbar.sublime-snippet b/directives/md-toolbar.sublime-snippet index a5507ac..e3f7ea0 100644 --- a/directives/md-toolbar.sublime-snippet +++ b/directives/md-toolbar.sublime-snippet @@ -1,6 +1,6 @@ +div layout="column" layout-fill> @@ -25,4 +25,4 @@ md-toolbar 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. text.html - \ No newline at end of file + diff --git a/directives/md-tooltip.sublime-snippet b/directives/md-tooltip.sublime-snippet index 52f26b6..beb4621 100644 --- a/directives/md-tooltip.sublime-snippet +++ b/directives/md-tooltip.sublime-snippet @@ -1,10 +1,10 @@ +md-tooltip md-visible="true" md-delay="400" md-direction="bottom" md-autohide="true"> $1 ]]> md-tooltip Angular Material - Place a md-tooltip as a child of the element it describes. text.html - \ No newline at end of file + diff --git a/directives/md-whiteframe.sublime-snippet b/directives/md-whiteframe.sublime-snippet index aa5209f..18a0193 100644 --- a/directives/md-whiteframe.sublime-snippet +++ b/directives/md-whiteframe.sublime-snippet @@ -1,9 +1,9 @@ +md-whiteframe class="md-whiteframe-z1" layout layout-align="center center"> $1 ]]> md-whiteframe Angular Material - whiteframe for content can use z1-z5 class. text.html - \ No newline at end of file +