angular-material-inputs/index.html at master · aleross/angular-material-inputs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html ng-app="example">
    <head>

        <!-- Angular -->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
        <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>

        <!-- Bootstrap -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <!-- Material inputs -->
        <link href="dist/material-inputs.css" rel="stylesheet">
        <script src="dist/material-inputs.js"></script>

        <!-- Demo -->
        <link href="demo/index.css" rel="stylesheet">

        <!-- Application -->
        <script>
            angular.module('example', ['ngMessages','material-inputs']).run(function ($rootScope) {
                $rootScope.foo = {
                    bar: true
                };

                $rootScope.$watch('foo.bar', function (val) {
                    console.log('root:', val);
                });
            });
        </script>
    </head>
    <body>
        <header class="jumbotron">

            <!-- Fork me -->
            <a href="https://github.com/aleross/angular-material-inputs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>

            <div class="container">
                <h1>&lt;material-inputs&gt;</h1>
                <p>Lightweight material design form input directives for AngularJS applications.</p>
                <p>Created by <a href="https://github.com/aleross">@aleross</a>. Licensed under <a>MIT</a>.</p>
                <button class="btn btn-primary btn-lg">Code on Github</button>
                <button class="btn btn-primary btn-lg">Download</button>
            </div>
        </header>
        <section class="container">

            <!-- Text inputs -->
            <article class="row">
                <div class="col-sm-12">
                    <h2 class="page-header">Text</h2>
                    <p>Some text here.</p>
                    <strong>Example:</strong>
                    <material-text>
                        <label>Test</label>
                    </material-text>
                </div>
            </article>

            <!-- Checkbox -->
            <article class="row">
                <div class="col-sm-12">
                    <h2 class="page-header">Checkbox</h2>
                    <p>Some text here.</p>
                    <strong>Example:</strong>
                    <material-checkbox>
                        <input ng-model="foo.bar">
                        Checkbox
                    </material-checkbox>
                </div>
            </article>

            <!-- Switch -->
            <article class="row">
                <div class="col-sm-12">
                    <h2 class="page-header">Switch</h2>
                    <p>Some text here.</p>
                    <strong>Example:</strong>
                    <material-switch>
                        Test
                        <input ng-model="foo.bar">
                    </material-switch>
                </div>
            </article>

            <!-- Radio -->
            <article class="row">
                <div class="col-sm-12">
                    <h2 class="page-header">Radio</h2>
                    <p>Some text here.</p>
                    <strong>Example:</strong>
                    <material-radio>
                        True
                        <input name="options" ng-model="foo.bar" ng-value="true">
                    </material-radio>
                    <material-radio>
                        False
                        <input name="options" ng-model="foo.bar" ng-value="false">
                    </material-radio>
                </div>
            </article>
        </section>
        <footer>
            <div class="container">
                <p>Freely distributable under the terms of the MIT license.</p>
                <p>
                    <iframe src="https://ghbtns.com/github-btn.html?user=aleross&repo=angular-material-inputs&type=star&count=true" frameborder="0" scrolling="0" width="80px" height="20px"></iframe>
                    <iframe src="https://ghbtns.com/github-btn.html?user=aleross&repo=angular-material-inputs&type=fork&count=true" frameborder="0" scrolling="0" width="80px" height="20px"></iframe>
                </p>
            </div>
        </footer>
    </body>
</html>