-
-
Notifications
You must be signed in to change notification settings - Fork 122
/
options.njk
73 lines (58 loc) · 1.85 KB
/
options.njk
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
---
title: Options Array Examples
nav_title: Options Array
tags: demo
---
{% from "demo.njk" import demo %}
{% set label %}
<label class="h2 mb-3">
JavaScript Array
</label>
<p>The options are created from an array in JavaScript.</p>
{% endset %}
{% set html %}
<select id="select-tools" placeholder="Pick a tool..."></select>
{% endset %}
<script>
{% set script %}
new TomSelect('#select-tools',{
maxItems: null,
valueField: 'id',
labelField: 'title',
searchField: 'title',
options: [
{id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'},
{id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'},
{id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
],
create: false
});
{% endset %}
</script>
{{ demo( label, html, script) }}
{% set label %}
<label class="h2 mb-3">Data-* Attributes</label>
<p>Images can be added to option and item elements with custom render templates and data-* attributes</p>
{% endset %}
{% set html %}
<select id="data-attr">
<option value="chrome" data-src="https://cdn1.iconfinder.com/data/icons/logotypes/32/chrome-32.png">Google Chrome</option>
<option value="ffox" data-src="https://cdn0.iconfinder.com/data/icons/flat-round-system/512/firefox-32.png">Mozilla Firefox</option>
<option value="ie" data-src="https://cdn0.iconfinder.com/data/icons/flat-round-system/512/internet_explorer-32.png">Internet Explorer</option>
</select>
{% endset %}
<script>
{% set script %}
new TomSelect('#data-attr',{
render: {
option: function (data, escape) {
return `<div><img class="me-2" src="${data.src}">${data.text}</div>`;
},
item: function (item, escape) {
return `<div><img class="me-2" src="${item.src}">${item.text}</div>`;
}
}
});
{% endset %}
</script>
{{ demo( label, html, script) }}