angular-flip/index.html at master · lemming/angular-flip · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>angular-flip example</title>
  <link rel="stylesheet" href="src/flip.css" />
  <style type="text/css">
      body {
          background-color: #efefef;
      }

      .flip {
          width: 400px;
          height: 256px;
          margin: 50px auto;
          font-size: 3em;
          text-align: center;
      }

      .face.front {
          background-color: white;
      }

      .face.back {
          background-color: black;
          color: white;
      }

  </style>
</head>
<body>

<div ng-app="demo">
  <label><input type="checkbox" ng-model="flipped" /> flipped</label>

  <flip flipped="flipped">
    <flip-front>
        <button flip-toggle>flip vertically</button>
    </flip-front>
    <flip-back flip-toggle>
      <img src="tux.png">
      <h4>Here it is!</h4>
    </flip-back>
  </flip>

  <flip horizontal flip-toggle>
    <flip-front>Click to flip horizontally</flip-front>
    <flip-back>
      <img src="tux.png">
      <h4>Here it is!</h4>
    </flip-back>
  </flip>
</div>

<script src="bower_components/angular/angular.min.js"></script>
<script src="src/angular-flip.js"></script>
<script>
angular.module('demo', ['angular-flip']);
</script>
</body>
</html>