Skip to content

Commit 63ef83b

Browse files
committed
Added 8 more snippets.
1 parent 88f2b99 commit 63ef83b

11 files changed

+107
-13
lines changed

README.md

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,22 +40,23 @@ Currently support these directives
4040
- md-input-container
4141
- md-list
4242
- md-list-item
43+
- md-menu
44+
- md-progress-circular
45+
- md-progress-linear
46+
- md-radio-button
47+
- md-radio-group
48+
- md-select
49+
- md-sidenav
50+
- md-sidenav-focus
51+
- md-slider
4352

4453
##TODO
4554

4655
Collaborators are most welcome to help with the following
4756

4857
- Fix double < character that is placed after hitting enter
4958
- Build support for these snippets. All snippest should be based on the directives described in this documentation: https://material.angularjs.org/latest/#/
50-
51-
- md-progress-circular
52-
- md-progress-linear
53-
- md-radio-button
54-
- md-radio-group
55-
- md-select
56-
- md-sidenav
57-
- md-sidenav-focus
58-
- md-slider
59+
5960
- md-subheader
6061
- md-swipe-left
6162
- md-swipe-right

directives/md-list-item.sublime-snippet

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<snippet>
2-
<content><![CDATA[<md-list-item class="md-2-line" ng-repeat="$1">
3-
$2
4-
</md-list-item>]]></content>
2+
<content><![CDATA[
3+
<md-list-item class="md-2-line" ng-repeat="$1">
4+
$2
5+
</md-list-item>]]></content>
56
<tabTrigger>md-list-item</tabTrigger>
67
<description>Angular Material - The md-list-item directive is a container intended for row items in a md-list container.</description>
78
<scope>text.html</scope>

directives/md-list.sublime-snippet

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<snippet>
2-
<content><![CDATA[<md-list>
2+
<content><![CDATA[
3+
<md-list>
34
$1
45
</md-list>]]></content>
56
<tabTrigger>md-list</tabTrigger>

directives/md-menu.sublime-snippet

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<md-menu md-offset="0 0">
4+
<!-- Trigger element is a md-button with an icon -->
5+
<md-button ng-click="$mdOpenMenu()" class="md-icon-button" aria-label="Open sample menu">
6+
<md-icon md-svg-icon="call:phone"></md-icon>
7+
</md-button>
8+
<md-menu-content>
9+
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
10+
</md-menu-content>
11+
</md-menu>]]></content>
12+
<tabTrigger>md-menu</tabTrigger>
13+
<description>Angular Material - Menus are elements that open when clicked. They are useful for displaying additional options within the context of an action.</description>
14+
<scope>text.html</scope>
15+
</snippet>
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<md-progress-circular md-mode="determinate" value="$1" ng-value="$2" md-diameter="48"></md-progress-circular>
4+
<!--For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an md-mode="indeterminate" indicator.-->]]></content>
5+
<tabTrigger>md-progress-circular</tabTrigger>
6+
<description>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.</description>
7+
<scope>text.html</scope>
8+
</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-progress-linear md-mode="buffer" value="$1" md-buffer-value="$2"></md-progress-linear>
4+
<!--md-mode can be select from one of four modes: determinate, indeterminate, buffer or query..-->
5+
]]></content>
6+
<tabTrigger>md-progress-linear</tabTrigger>
7+
<description>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.</description>
8+
<scope>text.html</scope>
9+
</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-radio-button ng-model="$1" ng-value="$2" aria-label="$3">$4</md-radio-button>]]></content>
3+
<tabTrigger>md-radio-button</tabTrigger>
4+
<description>Angular Material - The md-radio-button directive is the child directive required to be used within md-radio-group elements.</description>
5+
<scope>text.html</scope>
6+
</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-radio-group ng-model="$1">
4+
$2
5+
</md-radio-group>
6+
]]></content>
7+
<tabTrigger>md-list</tabTrigger>
8+
<description>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.</description>
9+
<scope>text.html</scope>
10+
</snippet>
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<md-select ng-model="$1"> <!--md-on-close: expression; multiple:boolean; placeholder: string;-->
4+
<md-select-label>Select a state</md-select-label>
5+
<md-option ng-value="opt" ng-repeat="opt in options">{{ opt }}</md-option>
6+
</md-select>
7+
]]></content>
8+
<tabTrigger>md-select</tabTrigger>
9+
<description>Angular Material - Displays a select box, bound to an ng-model.</description>
10+
<scope>text.html</scope>
11+
</snippet>
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<div layout="row" ng-controller="MyController">
4+
<md-sidenav md-component-id="left" class="md-sidenav-left">
5+
Left Nav!
6+
</md-sidenav>
7+
<md-content>
8+
Center Content
9+
<md-button ng-click="openLeftMenu()">
10+
Open Left Menu
11+
</md-button>
12+
</md-content>
13+
<md-sidenav md-component-id="right" md-is-locked-open="$mdMedia('min-width: 333px')" class="md-sidenav-right">
14+
<form>
15+
<md-input-container>
16+
<label for="testInput">Test input</label>
17+
<input id="testInput" type="text" ng-model="data" md-sidenav-focus>
18+
</md-input-container>
19+
</form>
20+
</md-sidenav>
21+
</div>
22+
]]></content>
23+
<tabTrigger>md-sidenav</tabTrigger>
24+
<description>Angular Material - A Sidenav component that can be opened and closed programatically.</description>
25+
<scope>text.html</scope>
26+
</snippet>

0 commit comments

Comments
 (0)