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 e1bec0d..4bc26f3 100644 --- a/Default.py +++ b/Default.py @@ -1,4 +1,4 @@ import os import sys -__version__ = '0.2.1' +__version__ = '0.2.2' diff --git a/README.md b/README.md index 83506cb..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. All snippest should be based on the directives described in this documentation: https://material.angularjs.org/latest/#/ +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,47 +16,16 @@ Copy the files to your Packages directory. ## Usage -Start typing `md-` in html files and the autocomplete window opens or use Ctrl+Space to autocomplete. +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 +etc... ## License diff --git a/directives/md-autocomplete.sublime-snippet b/directives/md-autocomplete.sublime-snippet index c5b5fc0..856b013 100644 --- a/directives/md-autocomplete.sublime-snippet +++ b/directives/md-autocomplete.sublime-snippet @@ -1,6 +1,6 @@ +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} \}\}} } diff --git a/directives/md-button.sublime-snippet b/directives/md-button.sublime-snippet index b295242..87706d8 100644 --- a/directives/md-button.sublime-snippet +++ b/directives/md-button.sublime-snippet @@ -1,5 +1,5 @@ - ${12:content}]]> + ${12:content}]]> md-button Angular Material - Button directive with options text.html diff --git a/directives/md-card.sublime-snippet b/directives/md-card.sublime-snippet index c751007..31a4a2a 100644 --- a/directives/md-card.sublime-snippet +++ b/directives/md-card.sublime-snippet @@ -1,6 +1,6 @@ +md-card> ${1:${3:image caption}}

${4:Card headline}

diff --git a/directives/md-checkbox.sublime-snippet b/directives/md-checkbox.sublime-snippet index 684a3dc..4d6141a 100644 --- a/directives/md-checkbox.sublime-snippet +++ b/directives/md-checkbox.sublime-snippet @@ -1,6 +1,6 @@ +md-checkbox ${1:md-no-ink} ${2:ng-true-value="${3:expr}" ng-false-value="${4:expr}"} ng-model="${5:variable}" ${6:name="${7:string}"} ${8:ng-change="${9:expr}"} ${10:ng-disabled="${11:boolean}"} aria-label="${12:string}"> ${13:content} ]]> diff --git a/directives/md-chips.sublime-snippet b/directives/md-chips.sublime-snippet index c84a9a3..a542875 100644 --- a/directives/md-chips.sublime-snippet +++ b/directives/md-chips.sublime-snippet @@ -1,6 +1,6 @@ +md-chips ${1:ng-model="${2:string|object}"} ${3:md-on-append="${4:expr}"} ${5:placeholder="${6:string}"} ${7:secondary-placeholder="${8:string}"} ${9:readonly="${10:boolean}"} ${11:md-on-remove="${12:expr}" ${13:md-on-select="${14:expr}"}} ${15:delete-hint="${16:string}" ${17:delete-button-label="${18:string}"}}> ${19: ${20:content} } 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 +