Skip to content

Commit 0361a33

Browse files
mbaljeetsinghmbaljeetsingh
committed
Added form, lists, modal, popover, popup snippets
1 parent 6f56356 commit 0361a33

24 files changed

+451
-5
lines changed

‎css/form/ion-form.sublime-snippet

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<snippet>
2-
<content><![CDATA[
2+
<content><![CDATA[
33
<div class="list">
44
<label class="item item-input">
55
<input type="text" placeholder="${1:First Name}">
@@ -13,8 +13,8 @@
1313
1414
</div>
1515
]]></content>
16-
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
17-
<tabTrigger>ion-form</tabTrigger>
18-
<!-- Optional: Set a scope to limit where the snippet will trigger -->
19-
<!-- <scope>source.python</scope> -->
16+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
17+
<tabTrigger>ion-form</tabTrigger>
18+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
19+
<!-- <scope>source.python</scope> -->
2020
</snippet>

‎javascript/action sheet/ion-js-$ionicActionSheet-ng.sublime-snippet

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<snippet>
2+
<content><![CDATA[
3+
angular.module('${1:mySuperApp}', ['ionic'])
4+
.controller(function($scope, $ionicActionSheet, $timeout) {
5+
6+
${2:// Triggered on a button click, or some other target}
7+
$scope.show = function() {
8+
9+
${3:// Show the action sheet}
10+
var hideSheet = $ionicActionSheet.show({
11+
buttons: [
12+
{ text: '${4:<b>Share</b> This}' },
13+
{ text: '${5:Move}' }
14+
],
15+
destructiveText: '${6:Delete}',
16+
titleText: '${7:Modify your album}',
17+
cancelText: '${8:Cancel}',
18+
cancel: function() {
19+
${9:// add cancel code..}
20+
},
21+
buttonClicked: function(index) {
22+
return true;
23+
}
24+
});
25+
26+
${10:// For example's sake, hide the sheet after two seconds}
27+
$timeout(function() {
28+
hideSheet();
29+
}, 2000);
30+
31+
};
32+
});
33+
]]></content>
34+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
35+
<tabTrigger>ion-js-$ionicActionSheet-ng</tabTrigger>
36+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
37+
<!-- <scope>source.python</scope> -->
38+
</snippet>
39+

‎javascript/form inputs/ion-js-$ionicSlideBoxDelegate-html.sublime-snippet

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<body ng-controller="${1:My}Ctrl">
4+
<ion-slide-box>
5+
<ion-slide>
6+
<div class="box blue">
7+
<button ng-click="${2:nextSlide}()">${3:Next slide!}</button>
8+
</div>
9+
</ion-slide>
10+
<ion-slide>
11+
<div class="box red">
12+
${4:Slide 2!}
13+
</div>
14+
</ion-slide>
15+
</ion-slide-box>
16+
</body>
17+
]]></content>
18+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
19+
<tabTrigger>ion-js-$ionicSlideBoxDelegate-html</tabTrigger>
20+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
21+
<!-- <scope>source.python</scope> -->
22+
</snippet>
23+

‎javascript/form inputs/ion-js-$ionicSlideBoxDelegate-ng.sublime-snippet

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<snippet>
2+
<content><![CDATA[
3+
function ${1:My}Ctrl($scope, $ionicSlideBoxDelegate) {
4+
$scope.${2:nextSlide} = function() {
5+
$ionicSlideBoxDelegate.next();
6+
}
7+
}
8+
]]></content>
9+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10+
<tabTrigger>ion-js-$ionicSlideBoxDelegate-ng</tabTrigger>
11+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
12+
<!-- <scope>source.python</scope> -->
13+
</snippet>
14+

‎javascript/form inputs/ion-js-form-checkbox.sublime-snippet

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<ion-checkbox ng-model="${1:isChecked}">${2:Checkbox Label}</ion-checkbox>
4+
]]></content>
5+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6+
<tabTrigger>ion-js-form-checkbox</tabTrigger>
7+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
8+
<!-- <scope>source.python</scope> -->
9+
</snippet>
10+

‎javascript/form inputs/ion-js-form-radio.sublime-snippet

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<ion-radio ng-model="${1:choice}" ng-value="'${2:A}'">${3:Choose} ${2:A}</ion-radio>
4+
<ion-radio ng-model="${1:choice}" ng-value="'${4:B}'">${5:Choose} ${4:B}</ion-radio>
5+
<ion-radio ng-model="${1:choice}" ng-value="'${6:A}'">${7:Choose} ${6:A}</ion-radio>
6+
]]></content>
7+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
8+
<tabTrigger>ion-js-form-radio</tabTrigger>
9+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
10+
<!-- <scope>source.python</scope> -->
11+
</snippet>
12+

‎javascript/form inputs/ion-js-form-toggle.sublime-snippet

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<ion-toggle ng-model="${1:airplaneMode}" toggle-class="toggle-calm">${2:Airplane Mode}</ion-toggle>
4+
]]></content>
5+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6+
<tabTrigger>ion-js-form-toggle</tabTrigger>
7+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
8+
<!-- <scope>source.python</scope> -->
9+
</snippet>
10+

‎javascript/form inputs/ion-js-slide-box.sublime-snippet

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<ion-slide-box on-slide-changed="${1:slideHasChanged}(\$${2:index})">
4+
<ion-slide>
5+
<div class="box blue"><h1>${3:BLUE}</h1></div>
6+
</ion-slide>
7+
<ion-slide>
8+
<div class="box yellow"><h1>${4:YELLOW}</h1></div>
9+
</ion-slide>
10+
<ion-slide>
11+
<div class="box pink"><h1>${5:PINK}</h1></div>
12+
</ion-slide>
13+
</ion-slide-box>
14+
]]></content>
15+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
16+
<tabTrigger>ion-js-slide-box</tabTrigger>
17+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
18+
<!-- <scope>source.python</scope> -->
19+
</snippet>
20+

‎javascript/lists/ion-js-list-$ionicListDelegate-html.sublime-snippet

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<ion-content ng-controller="${1:My}Ctrl">
4+
<button class="button" ng-click="${2:showDeleteButtons}()"></button>
5+
<ion-list>
6+
<ion-item ng-repeat="${3:i} in ${4:items}">>
7+
${5:Hello,} {{${6:i}}}
8+
<ion-delete-button class="ion-minus-circled"></ion-delete-button>
9+
</ion-item>
10+
</ion-list>
11+
</ion-content>
12+
]]></content>
13+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14+
<tabTrigger>ion-js-list-$ionicListDelegate-html</tabTrigger>
15+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
16+
<!-- <scope>source.python</scope> -->
17+
</snippet>
18+

‎javascript/lists/ion-js-list-$ionicListDelegate-ng.sublime-snippet

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<snippet>
2+
<content><![CDATA[
3+
function ${1:My}Ctrl($scope, $ionicListDelegate) {
4+
$scope.${3:showDeleteButtons} = function() {
5+
$ionicListDelegate.showDelete(true);
6+
};
7+
}
8+
]]></content>
9+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10+
<tabTrigger>ion-js-list-$ionicListDelegate-ng</tabTrigger>
11+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
12+
<!-- <scope>source.python</scope> -->
13+
</snippet>
14+

‎javascript/lists/ion-js-list-collection-repeat-html.sublime-snippet

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<ion-content ng-controller="${1:Content}Ctrl">
4+
<div class="list">
5+
<div class="item my-item"
6+
collection-repeat="${2:item} in ${3:items}"
7+
collection-item-width="'${4:100%}'"
8+
collection-item-height="getItemHeight(${2:item}, $index)"
9+
ng-style="{height: getItemHeight(${2:item} , $index)}">
10+
{{${2:item} }}
11+
</div>
12+
</div>
13+
</div>
14+
]]></content>
15+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
16+
<tabTrigger>ion-js-list-collection-repeat-html</tabTrigger>
17+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
18+
<!-- <scope>source.python</scope> -->
19+
</snippet>
20+

‎javascript/lists/ion-js-list-collection-repeat-ng.sublime-snippet

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<snippet>
2+
<content><![CDATA[
3+
function ${1:Content}Ctrl($scope) {
4+
$scope.${2:items} = [];
5+
for (var i = 0; i < 1000; i++) {
6+
$scope.${2:items}.push('Item ' + i);
7+
}
8+
9+
$scope.getItemHeight = function(${4:item}, ${5:index}) {
10+
${6://Make evenly indexed items be 10px taller, for the sake of example}
11+
return (${5:index} % 2) === 0 ? 50 : 60;
12+
};
13+
}
14+
]]></content>
15+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
16+
<tabTrigger>ion-js-list-collection-repeat-ng</tabTrigger>
17+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
18+
<!-- <scope>source.python</scope> -->
19+
</snippet>
20+

‎javascript/lists/ion-js-list-delete-button.sublime-snippet

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<ion-list show-delete="${1:shouldShowDelete}">
4+
<ion-item>
5+
<ion-delete-button class="ion-minus-circled"></ion-delete-button>
6+
${2:Hello, list item!}
7+
</ion-item>
8+
</ion-list>
9+
<ion-toggle ng-model="${1:shouldShowDelete}">
10+
${3:Show Delete?}
11+
</ion-toggle>
12+
]]></content>
13+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
14+
<tabTrigger>ion-js-list-delete-button</tabTrigger>
15+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
16+
<!-- <scope>source.python</scope> -->
17+
</snippet>
18+

‎javascript/lists/ion-js-list-item.sublime-snippet

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<ion-item>${1:Hello!}</ion-item>
4+
]]></content>
5+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
6+
<tabTrigger>ion-js-list-item</tabTrigger>
7+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
8+
<!-- <scope>source.python</scope> -->
9+
</snippet>
10+

‎javascript/lists/ion-js-list-option-button.sublime-snippet

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<ion-list>
4+
<ion-item>
5+
${1:I love kittens!}
6+
<ion-option-button class="button-positive">${2:Share}</ion-option-button>
7+
<ion-option-button class="button-assertive">${3:Edit}</ion-option-button>
8+
</ion-item>
9+
</ion-list>
10+
]]></content>
11+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
12+
<tabTrigger>ion-js-list-option-button</tabTrigger>
13+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
14+
<!-- <scope>source.python</scope> -->
15+
</snippet>
16+

‎javascript/lists/ion-js-list-reorder-button-html.sublime-snippet

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<ion-list ng-controller="${1:My}Ctrl">
4+
<ion-item ng-repeat="${2:item} in ${3:items}">
5+
${4:Item}
6+
<ion-reorder-button class="ion-navicon"
7+
on-reorder="moveItem(item, $fromIndex, $toIndex)">
8+
</ion-reorder>
9+
</ion-item>
10+
</ion-list>
11+
]]></content>
12+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
13+
<tabTrigger>ion-js-list-reorder-button-html</tabTrigger>
14+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
15+
<!-- <scope>source.python</scope> -->
16+
</snippet>
17+

‎javascript/lists/ion-js-list-reorder-button-ng.sublime-snippet

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<snippet>
2+
<content><![CDATA[
3+
function ${1:My}Ctrl($scope) {
4+
$scope.${2:items} = [${3:1, 2, 3, 4}];
5+
$scope.${4:moveItem} = function(item, fromIndex, toIndex) {
6+
${5://Move the item in the array}
7+
$scope.${2:items}.splice(fromIndex, 1);
8+
$scope.${2:items}.splice(toIndex, 0, item);
9+
};
10+
}
11+
]]></content>
12+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
13+
<tabTrigger>ion-js-list-reorder-button-ng</tabTrigger>
14+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
15+
<!-- <scope>source.python</scope> -->
16+
</snippet>
17+

‎javascript/lists/ion-js-list.sublime-snippet

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<ion-list>
4+
<ion-item ng-repeat="${1:item} in ${2:items}">
5+
${3:Hello,} {{${4:item}}}
6+
</ion-item>
7+
</ion-list>
8+
]]></content>
9+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
10+
<tabTrigger>ion-js-list</tabTrigger>
11+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
12+
<!-- <scope>source.python</scope> -->
13+
</snippet>
14+

‎javascript/modal/ion-js-$ionicModal-html.sublime-snippet

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<snippet>
2+
<content><![CDATA[
3+
<script id="my-modal.html" type="text/ng-template">
4+
<ion-modal-view>
5+
<ion-header-bar>
6+
<h1 class="title">My Modal title</h1>
7+
</ion-header-bar>
8+
<ion-content>
9+
Hello!
10+
</ion-content>
11+
</ion-modal-view>
12+
</script>
13+
]]></content>
14+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
15+
<tabTrigger>ion-js-$ionicModal-html</tabTrigger>
16+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
17+
<!-- <scope>source.python</scope> -->
18+
</snippet>
19+

‎javascript/modal/ion-js-$ionicModal-ng.sublime-snippet

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<snippet>
2+
<content><![CDATA[
3+
angular.module('${1:testApp}', ['ionic'])
4+
.controller('${2:My}Ctrl', function($scope, $ionicModal) {
5+
scope: $scope,
6+
animation: 'slide-in-up'
7+
}).then(function(${4:modal}) {
8+
$scope.${4:modal} = ${4:modal};
9+
});
10+
$scope.${5:open}Modal = function() {
11+
$scope.${4:modal}.show();
12+
};
13+
$scope.${6:close}Modal = function() {
14+
$scope.${4:modal}.hide();
15+
};
16+
${7://Cleanup the modal when we're done with it!}
17+
$scope.$on('$destroy', function() {
18+
$scope.${4:modal}.remove();
19+
});
20+
${8:// Execute action on hide modal}
21+
$scope.$on('${4:modal}.hidden', function() {
22+
${9:// Execute action}
23+
});
24+
${10:// Execute action on remove modal}
25+
$scope.$on('${4:modal}.removed', function() {
26+
${11:// Execute action}
27+
});
28+
});
29+
]]></content>
30+
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
31+
<tabTrigger>ion-js-$ionicModal-ng</tabTrigger>
32+
<!-- Optional: Set a scope to limit where the snippet will trigger -->
33+
<!-- <scope>source.python</scope> -->
34+
</snippet>
35+

0 commit comments

Comments
 (0)