Skip to content

Commit 8a01563

Browse files
christiaanwesterbeekchristiaanwesterbeek
committed
More directives added
1 parent 61cc3de commit 8a01563

16 files changed

+130
-10
lines changed

‎README.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22

33
A Sublime Text 2/3 snippet to generate Angular Material snippets for <md-button>, <md-input>, <md-icon>, etc
44

5-
Work in progress here. Collaborators are welcome to add snippets for directives!
6-
5+
Work in progress here. Collaborators are welcome to add and improve snippets for directives!
76

87
## Install
98

@@ -21,14 +20,10 @@ Start typing `<md` in html files and the autocomplete window opens.
2120

2221
##Snippets
2322

24-
TODO: build support for these snipperts
25-
26-
All snippest are and should be based on the directives described in this documentation
27-
28-
https://material.angularjs.org/latest/#/
23+
Currently support these directives
2924

3025
- md-autocomplete
31-
- md-button (DONE)
26+
- md-button
3227
- md-card
3328
- md-checkbox
3429
- md-chip
@@ -41,6 +36,12 @@ https://material.angularjs.org/latest/#/
4136
- md-grid-tile
4237
- md-highlight-text
4338
- md-icon
39+
40+
TODO: build support for these snippets
41+
42+
All snippest are and should be based on the directives described in this documentation
43+
https://material.angularjs.org/latest/#/
44+
4445
- md-input
4546
- md-input-container
4647
- md-list

‎directives/md-autocomplete.sublime-snippet‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="item.display">
4+
<span md-highlight-text="searchText">{{item.display}}</span>
5+
</md-autocomplete>
6+
]]></content>
7+
<tabTrigger>md-autocomplete</tabTrigger>
8+
<description>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.</description>
9+
<scope>text.html</scope>
10+
</snippet>

‎directives/md-button.sublime-snippet‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<snippet>
2-
<content><![CDATA[<md-button href="http://google.com">$1</md-button>]]></content>
2+
<content><![CDATA[<md-button href="$1">$2</md-button>]]></content>
33
<tabTrigger>md-button</tabTrigger>
44
<description>Angular Material - button directive with optional ink ripples (default enabled).</description>
55
<scope>text.html</scope>

‎directives/md-card.sublime-snippet‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<md-card>
4+
<img src="card-image.png" class="md-card-image" alt="image caption">
5+
<md-card-content>
6+
<h2>Card headline</h2>
7+
<p>Card content</p>
8+
</md-card-content>
9+
<md-card-footer>
10+
Card footer
11+
</md-card-footer>
12+
</md-card>
13+
]]></content>
14+
<tabTrigger>md-card</tabTrigger>
15+
<description>Angular Material - Card with optional footer</description>
16+
<scope>text.html</scope>
17+
</snippet>

‎directives/md-checkbox.sublime-snippet‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<snippet>
2+
<content><![CDATA[<md-checkbox ng-model="$1" aria-label="$2">$3</md-checkbox>]]></content>
3+
<tabTrigger>md-checkbox</tabTrigger>
4+
<description>Angular Material - button directive with optional ink ripples (default enabled).</description>
5+
<scope>text.html</scope>
6+
</snippet>

‎directives/md-chip-remove.sublime-snippet‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<snippet>
2+
<content><![CDATA[<md-chips><button md-chip-remove>$1</button></md-chips>]]></content>
3+
<tabTrigger>md-chip-remove</tabTrigger>
4+
<description>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.</description>
5+
<scope>text.html</scope>
6+
</snippet>

‎directives/md-chip.sublime-snippet‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<snippet>
2+
<content><![CDATA[<md-chip>$1</md-chip>]]></content>
3+
<tabTrigger>md-chip</tabTrigger>
4+
<description>Angular Material - md-chip is a component used within md-chips and is responsible for rendering individual chips.</description>
5+
<scope>text.html</scope>
6+
</snippet>

‎directives/md-chips.sublime-snippet‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<snippet>
2+
<content><![CDATA[<md-chips ng-model="myItems" placeholder="Add an item" readonly="isReadOnly">
3+
</md-chips>]]></content>
4+
<tabTrigger>md-chips</tabTrigger>
5+
<description>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.</description>
6+
<scope>text.html</scope>
7+
</snippet>

‎directives/md-contact-chips.sublime-snippet‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<md-contact-chips ng-model="ctrl.contacts" md-contacts="ctrl.querySearch($query)" md-contact-name="name" md-contact-image="image" md-contact-email="email" placeholder="To">
4+
</md-contact-chips>
5+
]]></content>
6+
<tabTrigger>md-contact-chips</tabTrigger>
7+
<description>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.</description>
8+
<scope>text.html</scope>
9+
</snippet>

‎directives/md-content.sublime-snippet‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<md-content layout-padding>
4+
Lorem ipsum dolor sit amet, ne quod novum mei.$1
5+
</md-content>
6+
]]></content>
7+
<tabTrigger>md-content</tabTrigger>
8+
<description>Angular Material - The md-content directive is a container element useful for scrollable content. Add the [layout-padding] attribute to make the content padded.</description>
9+
<scope>text.html</scope>
10+
</snippet>

0 commit comments

Comments
 (0)