Skip to content

Commit 1044181

Browse files
LuckyTNTLuckyTNT
committed
Added all directives from material.angularjs.org, more fun snippets could be add from demo part of documentations.
1 parent 63ef83b commit 1044181

10 files changed

+124
-10
lines changed

‎README.md‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,22 +49,20 @@ Currently support these directives
4949
- md-sidenav
5050
- md-sidenav-focus
5151
- md-slider
52+
- md-subheader
53+
- md-swipe-left
54+
- md-swipe-right
55+
- md-switch
56+
- md-tab
57+
- md-tabs
58+
- md-toolbar
59+
- md-tooltip
5260

5361
##TODO
5462

5563
Collaborators are most welcome to help with the following
5664

5765
- Fix double < character that is placed after hitting enter
58-
- Build support for these snippets. All snippest should be based on the directives described in this documentation: https://material.angularjs.org/latest/#/
59-
60-
- md-subheader
61-
- md-swipe-left
62-
- md-swipe-right
63-
- md-switch
64-
- md-tab
65-
- md-tabs
66-
- md-toolbar
67-
- md-tooltip
6866
- Improve directives
6967

7068
## License

‎directives/md-subheader.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-subheader>$1</md-subheader><!--You can use md-no-sticky class-->]]></content>
3+
<tabTrigger>md-subheader</tabTrigger>
4+
<description>Angular Material - The md-subheader directive is a subheader for a section. By default it is sticky.</description>
5+
<scope>text.html</scope>
6+
</snippet>

‎directives/md-swipe-left.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[<div md-swipe-left="onSwipeLeft()">$1</div>]]></content>
3+
<tabTrigger>md-swipe-left</tabTrigger>
4+
<description>Angular Material - The md-swipe-left directives allows you to specify custom behavior when an element is swiped left.</description>
5+
<scope>text.html</scope>
6+
</snippet>

‎directives/md-swipe-right.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[<div md-swipe-right="onSwipeRight()">$1</div>]]></content>
3+
<tabTrigger>md-swipe-right</tabTrigger>
4+
<description>Angular Material - The md-swipe-right directives allows you to specify custom behavior when an element is swiped right.</description>
5+
<scope>text.html</scope>
6+
</snippet>

‎directives/md-switch.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-switch ng-model="$1" aria-label="$2">
4+
$3
5+
</md-switch>
6+
]]></content>
7+
<tabTrigger>md-switch</tabTrigger>
8+
<description>Angular Material - The md-switch can also use md-no-ink, ng-true-value="", ng-false-value="", ng-change="" attributes.</description>
9+
<scope>text.html</scope>
10+
</snippet>

‎directives/md-tab.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-tab label="" disabled md-on-select="" md-on-deselect="">
4+
<md-tab-label>
5+
<h3>$1</h3>
6+
</md-tab-label>
7+
<md-tab-body>
8+
<p>
9+
$2
10+
</p>
11+
</md-tab-body>
12+
</md-tab>
13+
]]></content>
14+
<tabTrigger>md-tab</tabTrigger>
15+
<description>Angular Material - Use the md-tab a nested directive used within md-tabs to specify a tab with a label and optional view content.</description>
16+
<scope>text.html</scope>
17+
</snippet>

‎directives/md-tabs.sublime-snippet‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<md-tabs md-selected="selectedIndexInteger">
4+
$1
5+
</md-tabs>
6+
7+
<!-- md-tabs attributes you can use:
8+
md-selected - integer - Index of the active/selected tab
9+
md-no-ink - boolean - If present, disables ink ripple effects.
10+
md-no-bar - boolean -If present, disables the selection ink bar.
11+
md-align-tabs string - Attribute to indicate position of tab buttons: bottom or top; default is top
12+
md-stretch-tabs string - Attribute to indicate whether or not to stretch tabs: auto, always, or never; default is auto
13+
md-dynamic-height - boolean - When enabled, the tab wrapper will resize based on the contents of the selected tab
14+
md-center-tabs - boolean - When enabled, tabs will be centered provided there is no need for pagination
15+
md-no-pagination - boolean - When enabled, pagination will remain off
16+
md-swipe-content - boolean - When enabled, swipe gestures will be enabled for the content area to jump between tabs
17+
md-no-disconnect - boolean - If your tab content has background tasks (ie. event listeners), you will want to include this to prevent the scope from being disconnected
18+
md-autoselect - boolean - When present, any tabs added after the initial load will be automatically selected
19+
-->
20+
]]></content>
21+
<tabTrigger>md-tab</tabTrigger>
22+
<description>Angular Material - The md-tabs directive serves as the container for 1..n md-tab child directives to produces a Tabs components.</description>
23+
<scope>text.html</scope>
24+
</snippet>

‎directives/md-toolbar.sublime-snippet‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<div layout="column" layout-fill>
4+
<md-toolbar md-scroll-shrink md-shrink-speed-factor="0.5">
5+
<md-button class="md-icon-button" aria-label="Settings">
6+
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
7+
</md-button>
8+
<h2>
9+
<span>Toolbar with Icon Buttons</span>
10+
</h2>
11+
<span flex></span>
12+
<md-button class="md-icon-button" aria-label="Favorite">
13+
<md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>
14+
</md-button>
15+
<md-button class="md-icon-button" aria-label="More">
16+
<md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
17+
</md-button>
18+
</md-toolbar>
19+
<!--Note: for scrollShrink to work, the toolbar must be a sibling of a md-content element, placed before it.-->
20+
<md-content>
21+
Hello!
22+
</md-content>
23+
</div>
24+
]]></content>
25+
<tabTrigger>md-toolbar</tabTrigger>
26+
<description>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.</description>
27+
<scope>text.html</scope>
28+
</snippet>

‎directives/md-tooltip.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-tooltip md-visible="true" md-delay="400" md-direction="bottom" md-autohide="true">
4+
$1
5+
</md-tooltip>
6+
]]></content>
7+
<tabTrigger>md-tooltip</tabTrigger>
8+
<description>Angular Material - Place a md-tooltip as a child of the element it describes.</description>
9+
<scope>text.html</scope>
10+
</snippet>

‎directives/md-whiteframe.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-whiteframe class="md-whiteframe-z1" layout layout-align="center center">
4+
$1
5+
</md-whiteframe>]]></content>
6+
<tabTrigger>md-whiteframe</tabTrigger>
7+
<description>Angular Material - whiteframe for content can use z1-z5 class.</description>
8+
<scope>text.html</scope>
9+
</snippet>

0 commit comments

Comments
 (0)