diff --git a/README.md b/README.md index a9bc9d0..23d4106 100644 --- a/README.md +++ b/README.md @@ -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 6adee40..558605b 100644 --- a/directives/md-contact-chips.sublime-snippet +++ b/directives/md-contact-chips.sublime-snippet @@ -1,6 +1,6 @@ +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 diff --git a/directives/md-content.sublime-snippet b/directives/md-content.sublime-snippet index b006102..03d7c8f 100644 --- a/directives/md-content.sublime-snippet +++ b/directives/md-content.sublime-snippet @@ -1,6 +1,6 @@ +md-content ${1:layout-padding} ${2:layout-wrap}> ${3:Lorem ipsum dolor sit amet, ne quod novum mei} ]]> diff --git a/directives/md-datepicker.sublime-snippet b/directives/md-datepicker.sublime-snippet index 2830189..0ecfcc3 100644 --- a/directives/md-datepicker.sublime-snippet +++ b/directives/md-datepicker.sublime-snippet @@ -1,6 +1,6 @@ +md-datepicker ng-model="${1:variable}" ${2:ng-change="${3:expr}" md-min-date="${4:Date}" md-max-date="${5:Date}" disabled="${6:boolean}" required="${7:boolean}"}> ]]> md-datepicker Angular Material - md-date-picker diff --git a/directives/md-divider.sublime-snippet b/directives/md-divider.sublime-snippet index 1a8017b..c6a3225 100644 --- a/directives/md-divider.sublime-snippet +++ b/directives/md-divider.sublime-snippet @@ -1,6 +1,6 @@ +md-divider ${1:md-inset}> ]]> md-divider Angular Material - md-divider diff --git a/directives/md-grid-list.sublime-snippet b/directives/md-grid-list.sublime-snippet index 58024f4..786290a 100644 --- a/directives/md-grid-list.sublime-snippet +++ b/directives/md-grid-list.sublime-snippet @@ -1,6 +1,6 @@ +md-grid-list md-cols="${1:number}" md-gutter="${2:string}" md-row-height="${3:string}" md-on-layout="${4:expr}"> ${5:$6} ]]> diff --git a/directives/md-grid-tile.sublime-snippet b/directives/md-grid-tile.sublime-snippet index 4a3d443..101d7c9 100644 --- a/directives/md-grid-tile.sublime-snippet +++ b/directives/md-grid-tile.sublime-snippet @@ -1,6 +1,6 @@ +md-grid-tile ${1:md-colspan="${2:number}"} ${3:md-rowspan="${4:number}"}> ${5: ${6:

$7

}
} diff --git a/directives/md-highlight-text.sublime-snippet b/directives/md-highlight-text.sublime-snippet index bbd0c2b..2c005c9 100644 --- a/directives/md-highlight-text.sublime-snippet +++ b/directives/md-highlight-text.sublime-snippet @@ -1,6 +1,6 @@ +input ${1:placeholder="${2:Enter a search term...}"} ${3:ng-model="${4:searchTerm}"} type="${5:text}">
  • $5
diff --git a/directives/md-icon-ligature.sublime-snippet b/directives/md-icon-ligature.sublime-snippet index e47b6d1..f5449a3 100644 --- a/directives/md-icon-ligature.sublime-snippet +++ b/directives/md-icon-ligature.sublime-snippet @@ -1,6 +1,6 @@ ${3:font-name} +md-icon class="${1:material-icons step}" aria-label="${2:description}">${3:font-name} ]]> md-icon-ligature Angular Material - md-icon using Ligatures diff --git a/directives/md-icon-svg.sublime-snippet b/directives/md-icon-svg.sublime-snippet index 68116db..315a95d 100644 --- a/directives/md-icon-svg.sublime-snippet +++ b/directives/md-icon-svg.sublime-snippet @@ -1,6 +1,6 @@ +md-icon md-svg-icon="${1:alarm}" style="${2:color: #0F0;}" aria-label="${3:Alarm Icon}"> ]]> md-icon-svg Angular Material - md-icon using SVG diff --git a/directives/md-icon-url.sublime-snippet b/directives/md-icon-url.sublime-snippet index f722160..b1e4537 100644 --- a/directives/md-icon-url.sublime-snippet +++ b/directives/md-icon-url.sublime-snippet @@ -1,6 +1,6 @@ +md-icon class="${1:step img}" md-font-icon="${2:font.name}" aria-label="${3:description}"> ]]> md-icon-class Angular Material - md-icon using Classnames diff --git a/directives/md-input-container.sublime-snippet b/directives/md-input-container.sublime-snippet index 5ddc9c4..3e73cf3 100644 --- a/directives/md-input-container.sublime-snippet +++ b/directives/md-input-container.sublime-snippet @@ -1,6 +1,6 @@ +md-input-container> ${1: } 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 +