-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (146 loc) · 4.75 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
<!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.0" />
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/select-actions@latest/dist/select-actions.min.css"
/>
<title>SelectActions Demo</title>
<!-- For demo purposes -->
<link rel="stylesheet" type="text/css" href="example/demo-purposes.css" />
<script src="example/demo-purposes-toggle-theme.js"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<h1>SelectActions Demo</h1>
</div>
<div class="container-theme">
<button
onclick="toggleTheme()"
class="toggle-theme"
title="Toggle theme"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
/>
</svg>
</button>
</div>
<div class="container">
<div>
<h2>Example A</h2>
<select multiple id="select-0" class="sa-select">
<option value="Singapore">Singapore</option>
<option value="Portland">Portland</option>
<option value="Halifax">Halifax</option>
<option value="London">London</option>
<option value="Seattle">Seattle</option>
<option value="Toronto">Toronto</option>
<option value="João Pessoa">João Pessoa</option>
<option value="New York">New York</option>
<option value="Buenos Aires">Buenos Aires</option>
</select>
</div>
<div>
<h2>Result A</h2>
<p class="results"></p>
</div>
</div>
<hr />
<div class="container">
<div>
<h2>Example B</h2>
<p>Customized</p>
<select multiple id="select-1" select-all class="sa-select">
<option value="Singapore">Singapore</option>
<option value="Portland">Portland</option>
<option value="Halifax">Halifax</option>
<option value="London">London</option>
<option value="Seattle">Seattle</option>
<option value="Toronto">Toronto</option>
<option value="João Pessoa">João Pessoa</option>
<option value="New York">New York</option>
<option value="Buenos Aires">Buenos Aires</option>
</select>
</div>
<div>
<h2>Result B</h2>
<br />
<p class="results"></p>
</div>
</div>
<hr />
<div class="container">
<div>
<h2>Example C</h2>
<p>Simple select and search</p>
<select id="select-2" class="sa-select">
<option disabled selected value>Select a city</option>
<option value="Singapore">Singapore</option>
<option value="Portland">Portland</option>
<option value="Halifax">Halifax</option>
<option value="London">London</option>
<option value="Seattle">Seattle</option>
<option value="Toronto">Toronto</option>
<option value="João Pessoa">João Pessoa</option>
<option value="New York">New York</option>
<option value="Buenos Aires">Buenos Aires</option>
</select>
</div>
<div>
<h2>Result C</h2>
<br />
<p class="results"></p>
</div>
</div>
<hr />
<div class="container">
<div>
<h2>Example D</h2>
<p>
Sending array with data, callback on first selection, updating
secondary selection options. This is simulating an API request with
timeout to load the data
</p>
<select id="select-4" class="sa-select"></select
><br />
<select id="select-5" class="sa-select"></select>
</div>
<div>
<h2>Result D</h2>
<br /><br /><br />
<p class="results"></p>
<p class="results"></p>
</div>
<br />
</div>
<hr />
<div class="container">
<div>
<h2>Example E</h2>
<p>Sending array with data to populate select</p>
<select id="select-3" class="sa-select"></select>
</div>
<div>
<h2>Result E</h2>
<br />
<p class="results"></p>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/select-actions@latest/dist/select-actions.min.js"></script>
<script src="example/demo-purposes.js"></script>
</html>