-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
79 lines (76 loc) · 3.06 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="kimera.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Select box</title>
<!-- styles -->
<style>
.is-flex {
display: flex;
}
</style>
</head>
<body>
<mega class="color-light is-flex is-center-v is-distributed">
<h2 class="is-text-center">The Listbox</h2>
<a href="https://github.com/JorgeAntrax/listbox" class="button is-dark is-rounded">
<icon><i class="fa fa-github"></i></icon>
<span>Ir al repositorío</span>
</a>
</mega>
<row>
<div class="tablet-4 margin-3">
<!-- Demo custom select -->
<listbox id="select">
<list>
<list-item text="Option numero 1" value="op1">Option no 1</list-item>
<list-item text="Option numero 2" value="op2">Option no 2</list-item>
<list-item text="Option numero 3" value="op3">Option no 3</list-item>
</list>
</listbox>
</div>
<div class="tablet-4 margin-3">
<!-- Demo custom select -->
<list-box id="select2">
<list>
<list-item text="Option numero 1" value="op1">
<icon><i class="fa fa-facebook"></i></icon>
<span>facebook</span>
</list-item>
<list-item text="Option numero 2" value="op2">
<icon><i class="fa fa-twitter"></i></icon>
<span>Twitter</span>
</list-item>
<list-item text="Option numero 3" value="op3">
<icon><i class="fa fa-instagram"></i></icon>
<span>Instagram</span>
</list-item>
</list>
</list-box>
</div>
</row>
<!-- Select script import -->
<script src="select.js"></script>
<script>
var demo = new Listbox({
el: '#select', // the id container component.
hasTwoIcons: true, // this property add padding-left to the input element.
iconToggleClass: 'fa fa-angle-down', // classes for icon toggle.
iconLabelClass: 'fa fa-calendar', //classes for icon left component.
rounded: false, // this property apply the class is-rounded for the input element
name: 'input1',
id: 'inputId'
});
var demo2 = new Listbox({
el: '#select2', // the id container component.
hasTwoIcons: false, // this property add padding-left to the input element.
iconToggleClass: 'fa fa-angle-down', // classes for icon toggle.
rounded: false, // this property apply the class is-rounded for the input element
});
</script>
</body>
</html>