html_backup/angular.html at master · furtheraway/html_backup · 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
115
116
117
118
<html>
<head>
  <meta charset="UTF-8">
  <title>Angular Material Test</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.css">

  <style>
    div{border:1px solid red;}
    /*div{border:1px solid red; height:100px; margin:10px; padding: 5px;}*/
  </style>

</head>
<body>

<!-- Angular Material Dependencies -->
  <!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script> -->
  <!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script> -->
  <!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script> -->


<!-- Angular Material Javascript now available via Google CDN; version 0.7 used here -->
  <!-- <script src="http://ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.js"></script> -->

<!-- ------------------------------------------------------------------------ -->

<!-- layout-wrap layout-margin layout-padding layout-wrap layout-fill  -->
<!-- layout="row/column"  etc. layout-sm-->
<!-- layout-align = "start/center/end/space-around/space-between" -->

<!-- THE SIZE APPLY TO : layout, layout-align, flex, flex-order, hide, show
layout-align  Sets child alignment.
layout-align-sm   Sets child alignment on devices less than 600px wide.
layout-align-gt-sm  Sets child alignment on devices greater than 600px wide.
layout-align-md   Sets child alignment on devices between 600px and 960px wide.
layout-align-gt-md  Sets child alignment on devices greater than 960px wide.
layout-align-lg   Sets child alignment on devices between 960px and 1200px wide.
layout-align-gt-lg Sets child alignment on devices greater than 1200px wide.
-->

<!-- ------------------------------------------------------------------------ -->

<div layout="row" layout-align="space-between center" layout-margin layout-padding >
  <div   style="width:100px; height:100px; border:2px solid gray; border-radius:10px;"> see the padding and margin </div>
  <div flex="30" >The xchange club, by no means, claims the ownership of the following projects. But you can find their team members in this club.</div>
  </div>


<div layout="row"  layout-sm="column" layout-wrap layout-margin layout-padding  >
  <div flex="33" layout-fill >
    [flex="33"]
  </div>
  <div flex="55"  layout-fill>
    [flex="55"]
  </div>
</div>

<br><br><br>

<!-- flex-order flex-order-sm -->
<div layout="row" layout-wrap layout-padding >
  <div flex flex-order="3" flex-order-sm="1">
    [flex-order="3"; flex-order-sm="1"]
  </div>
  <div flex flex-order="2" flex-order-sm="3">
    [flex-order="2"; flex-order-sm="3" ]
  </div>
  <div flex flex-order="1" flex-order-sm="2">
    [flex-order="1"; flex-order-sm="2"]
   </div>
</div>

<br><br><br>


<div layout="row" layout-align="space-between center" layout-wrap layout-margin layout-padding>
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

<br><br><br>


<div layout="column" layout-align="space-around center" style="height:400px;" layout-wrap layout-margin layout-padding>
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

<br><br><br>


<!-- layout-wrap can wrap a long row of children divs, and display, but not work well with margin or layout-margin -->
<div layout="row" layout-wrap layout-margin style="height:600px;">
  <div flex="20">[flex=33]</div>
  <div flex="40">[flex=66]</div>
  <div flex="66">[flex=66]</div>
  <div flex="33">[flex=33]</div>
</div>


<br><br><br>


<div layout="row">
  <div flex="66" flex-sm="33" layout-margin>
    I flex to one-third of the space on mobile, and two-thirds on other devices.
  </div>
  <div flex="33" flex-sm="66" layout-margin>
    I flex to two-thirds of the space on mobile, and one-third on other devices.
  </div>
</div>


</body>
</html>