├── .gitignore
├── LICENSE
├── README.md
├── demo
├── controllers
│ └── demo.js
├── index.html
└── resources
│ └── styles
│ └── demo.css
├── package.json
└── source
├── Makefile
├── angular-material-badge.css
└── angular-material-badge.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | yarn.lock
3 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Juan Manuel Mouriz
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # angular-material-badge
2 |
3 | Material Badge for AngularJS
4 |
5 | ## Demo
6 |
7 | View [online demo](https://jmouriz.github.io/angular-material-badge/demo/demo.html)
8 |
9 | ## Install
10 |
11 | Download the package:
12 |
13 | ```
14 | yarn add angular-material-badge
15 | ```
16 |
17 | ## Usage
18 |
19 | In your document head, include:
20 |
21 | ```html
22 |
23 | ```
24 |
25 | Use the md-badge where you wish:
26 |
27 | ```html
28 | 12
29 |
30 |
31 | ```
32 |
33 | Then, just before close body tag, include:
34 |
35 | ```html
36 |
37 | ```
38 |
39 | Include the module in your application:
40 |
41 | ```javascript
42 | var application = angular.module('Application', ['ngMdBadge']);
43 | ```
44 |
--------------------------------------------------------------------------------
/demo/controllers/demo.js:
--------------------------------------------------------------------------------
1 | var demo = angular.module('Demo', ['ngMaterial', 'ngMdIcons', 'ngMdBadge', 'hc.marked']);
2 |
3 | demo.config(['markedProvider', function(markedProvider) {
4 | markedProvider.setOptions({
5 | gfm: true,
6 | tables: true,
7 | highlight: function(code, language) {
8 | if (!language) {
9 | language = 'bash';
10 | } else if (language == 'html') {
11 | language = 'markup';
12 | }
13 | return Prism.highlight(code, Prism.languages[language]);
14 | }
15 | });
16 | }]);
17 |
18 | var themes = [{
19 | name: 'red',
20 | description: 'Red'
21 | }, {
22 | name: 'green',
23 | description: 'Green'
24 | }, {
25 | name: 'blue',
26 | description: 'Blue'
27 | }, {
28 | name: 'orange',
29 | description: 'Orange'
30 | }, {
31 | name: 'indigo',
32 | description: 'Indigo'
33 | }, {
34 | name: 'pink',
35 | description: 'Pink'
36 | }, {
37 | name: 'teal',
38 | description: 'Teal'
39 | }, {
40 | name: 'purple',
41 | description: 'Purple'
42 | }, {
43 | name: 'yellow',
44 | description: 'Yellow'
45 | }, {
46 | name: 'brown',
47 | description: 'Brown'
48 | }, {
49 | name: 'grey',
50 | description: 'Grey'
51 | }, {
52 | name: 'cyan',
53 | description: 'Cyan'
54 | }, {
55 | name: 'lime',
56 | description: 'Lime'
57 | }, {
58 | name: 'amber',
59 | description: 'Amber'
60 | }];
61 |
62 | demo.config(['$mdThemingProvider', function($mdThemingProvider) {
63 | $mdThemingProvider.theme('default').primaryPalette('purple').accentPalette('blue-grey').warnPalette('red');
64 | $mdThemingProvider.theme('blue').primaryPalette('blue').accentPalette('blue-grey').warnPalette('red');
65 | $mdThemingProvider.theme('red').primaryPalette('red').accentPalette('blue-grey').warnPalette('red');
66 | $mdThemingProvider.theme('green').primaryPalette('green').accentPalette('blue-grey').warnPalette('red');
67 | $mdThemingProvider.theme('pink').primaryPalette('pink').accentPalette('blue-grey').warnPalette('red');
68 | $mdThemingProvider.theme('orange').primaryPalette('orange').accentPalette('blue-grey').warnPalette('red');
69 | $mdThemingProvider.theme('indigo').primaryPalette('indigo').accentPalette('blue-grey').warnPalette('red');
70 | $mdThemingProvider.theme('teal').primaryPalette('teal').accentPalette('blue-grey').warnPalette('red');
71 | $mdThemingProvider.theme('purple').primaryPalette('purple').accentPalette('blue-grey').warnPalette('red');
72 | $mdThemingProvider.theme('yellow').primaryPalette('yellow').accentPalette('blue-grey').warnPalette('red');
73 | $mdThemingProvider.theme('grey').primaryPalette('grey').accentPalette('blue-grey').warnPalette('red');
74 | $mdThemingProvider.theme('cyan').primaryPalette('cyan').accentPalette('blue-grey').warnPalette('red');
75 | $mdThemingProvider.theme('brown').primaryPalette('brown').accentPalette('blue-grey').warnPalette('red');
76 | $mdThemingProvider.theme('lime').primaryPalette('lime').accentPalette('blue-grey').warnPalette('red');
77 | $mdThemingProvider.theme('amber').primaryPalette('amber').accentPalette('blue-grey').warnPalette('red');
78 | $mdThemingProvider.alwaysWatchTheme(true);
79 | }]);
80 |
81 | demo.controller('Demo', ['$scope', function($scope) {
82 | $scope.theme = 'red';
83 | $scope.themes = themes;
84 | $scope.show = true;
85 | }]);
86 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | test
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | AngularJS Material Badge online Demo
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | {{theme.description}}
26 |
27 |
28 |
29 | Show
30 |
31 |
32 |
33 |
34 |
35 | Badge demo
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | {{value}}
47 |
48 |