/
index.html
149 lines (114 loc) · 7.36 KB
/
index.html
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="vAccordion - AngularJS multi-level accordion component.">
<meta name="author" content="Łukasz Wątroba">
<title>vAccordion</title>
<!-- Google fonts -->
<link href="http://fonts.googleapis.com/css?family=Lato:300,700,300italic" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="http://lukaszwatroba.github.io/valitycss/dist/vality.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="./bower/valitycss/dist/vality.css"> -->
<link href="./dist/v-accordion.css" rel="stylesheet">
<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js"></script>
<!-- <script src="./bower/angular/angular.js"></script> -->
<!-- <script src="./bower/angular-animate/angular-animate.js"></script> -->
<script src="./dist/v-accordion.js"></script>
<script src="./demo/app.js"></script>
</head>
<body ng-app="myApp">
<div ng-cloak class="u-wideWrapper u-paddingHm u-paddingTl" ng-controller="MainController">
<header class="u-marginBl u-textCenter">
<div>
<svg class="u-inlineBlock" width="58px" height="58px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><g><path fill="#4CAF50" d="M3.1,27.9c0,0,10.2-24.1,11.6-27.2c0.2-0.5,0.6-0.8,1.2-0.6c0.5,0.1,0.8,0.7,1.5,2.2c1.3,2.9,18,37.2,18.7,38.6c0.8,1.6,1,2.6,0.7,3.4c-0.3,0.6-1,1.1-1.8,1.4c-2.3,0.9-20.3,7.8-21.5,8.3c-0.7,0.3-0.8-0.4-1.4-1.7C11.6,51,3.7,32.1,3.1,30.7C2.5,29.3,3.1,27.9,3.1,27.9z"/><path fill="#2196F3" d="M50.9,17.3c-0.3-0.3-0.4-0.4-0.7-0.2c-0.3,0.1-11.5,8.6-16.8,12.5c2.7,5.5,4.7,9.7,5,10.2c0.4,0.8,0.8,1.7,1,2.6c0.1-0.2,0.2-0.3,0.3-0.5c0.9-1.8,11.3-23.4,11.5-23.8C51.3,17.7,51.2,17.7,50.9,17.3z"/></g></svg>
<h2 class="u-marginTs">vAccordion</h2>
</div>
<h5 class="u-marginBl">AngularJS multi-level accordion component.</h5>
<hr>
</header>
<div class="Grid Grid--gutters md-Grid--2col">
<div class="Grid-cell u-marginBl">
<h4 class="u-marginVm">Works with (or without) ng-repeat</h4>
<v-accordion id="accordionA" class="vAccordion--default" control="accordionA" onexpand="expandCallback(index, id)" oncollapse="collapseCallback(index, id)">
<v-pane id="{{ ::pane.id }}" ng-repeat="pane in panesA" expanded="pane.isExpanded">
<v-pane-header id="{{ ::pane.id }}-header" aria-controls="{{ ::pane.id }}-content">
<h5>{{ ::pane.header }}</h5>
</v-pane-header>
<v-pane-content id="{{ ::pane.id }}-content" aria-labelledby="{{ ::pane.id }}-header">
<p>{{ ::pane.content }}</p>
<v-accordion id="nestedAccordionA" ng-if="pane.subpanes">
<v-pane id="{{ ::subpane.id }}" ng-repeat="subpane in pane.subpanes" ng-disabled="subpane.isDisabled">
<v-pane-header id="{{ ::subpane.id }}-header" aria-controls="{{ ::subpane.id }}-header">
<h5>{{ ::subpane.header }}</h5>
</v-pane-header>
<v-pane-content id="{{ ::subpane.id }}-content" aria-labelledby="{{ ::subpane.id }}-content">
<p>{{ ::subpane.content }}</p>
</v-pane-content>
</v-pane>
</v-accordion>
</v-pane-content>
</v-pane>
</v-accordion>
<div class="ButtonGroup ButtonGroup--hz ButtonGroup--collapse u-marginVm">
<div class="ButtonGroup-item">
<button class="Button Button--default" ng-click="accordionA.toggle(panesA[0].id)">Toogle first</button>
</div>
<div class="ButtonGroup-item">
<button class="Button Button--default" ng-click="accordionA.toggle(panesA[2].id)">Toogle last</button>
</div>
</div>
</div>
<div class="Grid-cell u-marginBl">
<h4 class="u-marginVm">Allows multiple sections open at once</h4>
<v-accordion id="accordionB" class="vAccordion--default" multiple control="accordionB">
<v-pane id="{{ ::pane.id }}" ng-repeat="pane in panesB" expanded="pane.isExpanded">
<v-pane-header id="{{ ::pane.id }}-header" aria-controls="{{ ::pane.id }}-header">
<h5>{{ ::pane.header }}</h5>
</v-pane-header>
<v-pane-content id="{{ ::pane.id }}-content" aria-labelledby="{{ ::pane.id }}-content">
<p>{{ ::pane.content }}</p>
<v-accordion id="nestedAccordionB" multiple ng-if="pane.subpanes">
<v-pane id="{{ ::subpane.id }}" ng-repeat="subpane in pane.subpanes" ng-disabled="subpane.isDisabled">
<v-pane-header id="{{ ::subpane.id }}-header" aria-controls="{{ ::subpane.id }}-header">
<h5>{{ ::subpane.header }}</h5>
</v-pane-header>
<v-pane-content id="{{ ::subpane.id }}-content" aria-labelledby="{{ ::subpane.id }}-content">
<p>{{ ::subpane.content }}</p>
</v-pane-content>
</v-pane>
</v-accordion>
</v-pane-content>
</v-pane>
</v-accordion>
<div class="ButtonGroup ButtonGroup--hz ButtonGroup--collapse u-marginVm">
<div class="ButtonGroup-item">
<button class="Button Button--default" ng-click="accordionB.expandAll()">Expand all</button>
</div>
<div class="ButtonGroup-item">
<button class="Button Button--default" ng-click="accordionB.collapseAll()">Collapse all</button>
</div>
</div>
</div>
</div>
<hr>
<footer class="u-cf u-paddingBl">
<div class="u-textCenter">
<a href="https://github.com/LukaszWatroba" class="u-inlineBlock u-linkClean">
<svg width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><g><path fill="#2196F3" d="M3.1,27.9c0,0,10.2-24.1,11.6-27.2c0.2-0.5,0.6-0.8,1.2-0.6c0.5,0.1,0.8,0.7,1.5,2.2c1.3,2.9,18,37.2,18.7,38.6c0.8,1.6,1,2.6,0.7,3.4c-0.3,0.6-1,1.1-1.8,1.4c-2.3,0.9-20.3,7.8-21.5,8.3c-0.7,0.3-0.8-0.4-1.4-1.7C11.6,51,3.7,32.1,3.1,30.7C2.5,29.3,3.1,27.9,3.1,27.9z"/><path fill="#2196F3" d="M50.9,17.3c-0.3-0.3-0.4-0.4-0.7-0.2c-0.3,0.1-11.5,8.6-16.8,12.5c2.7,5.5,4.7,9.7,5,10.2c0.4,0.8,0.8,1.7,1,2.6c0.1-0.2,0.2-0.3,0.3-0.5c0.9-1.8,11.3-23.4,11.5-23.8C51.3,17.7,51.2,17.7,50.9,17.3z"/></g></svg>
<br>
<small>
By Łukasz Wątroba
</small>
</a>
</div>
</footer>
</div>
<!-- Fork me on GitHub ribbon -->
<a href="https://github.com/LukaszWatroba/v-accordion"><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>
</body>
</html>