-
Notifications
You must be signed in to change notification settings - Fork 1
/
value-list.html
155 lines (142 loc) · 8.01 KB
/
value-list.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
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>value-list</title>
<script type="module" src="https://js.arcgis.com/calcite-components/1.0.0-beta.91/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.91/calcite.css" />
<style>
h1,
calcite-value-list {
margin-bottom: 5rem;
}
h2 {
margin-bottom: 3rem;
}
body {
font-family: var(--calcite-sans-family);
font-size: var(--calcite-font-size-0);
color: var(--calcite-ui-text-1);
max-width: 1024px;
min-width: 280px;
width: 70vw;
padding: 0 var(--calcite-spacing-double);
margin: 0 auto;
background-color: var(--calcite-ui-background);
}
/* Theme Switcher */
#theme-label {
position: fixed;
top: 20px;
right: 20px;
z-index: 2;
background-color: var(--calcite-ui-background);
border: 1px solid;
border-color: var(--calcite-ui-border-1);
border-radius: var(--calcite-border-radius);
margin: 0;
padding: 10px;
}
#theme-label label {
margin: 0;
}
</style>
</head>
<body>
<main>
<!-- calcite-switch -->
<div id="theme-label">
<calcite-label layout="inline">
Toggle theme
<calcite-switch id="theme-switch"></calcite-switch>
</calcite-label>
</div>
<h1><code>value-list</code></h1>
<h2>Test 1. Value List</h2>
<calcite-value-list>
<calcite-value-list-item label="River" description="A large natural stream of water flowing in a channel to the sea, a lake, or another such stream." value="rivers">
<calcite-action slot="actions-end" icon="plus" text="Add River"></calcite-action>
</calcite-value-list-item>
<calcite-value-list-item label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountains">
<calcite-action slot="actions-end" icon="plus" text="Add Mountain"></calcite-action>
</calcite-value-list-item>
<calcite-value-list-item label="Lake" description="A large body of water surrounded by land." value="lakes">
<calcite-action slot="actions-end" icon="plus" text="Add Lake"></calcite-action>
</calcite-value-list-item>
</calcite-value-list>
<h2>Test 2. Value List with Filter</h2>
<calcite-value-list filter-enabled filter-placeholder="Filter list items" selection-follows-focus>
<calcite-value-list-item label="River" description="A large natural stream of water flowing in a channel to the sea, a lake, or another such stream." value="rivers">
<calcite-action slot="actions-end" icon="plus" text="Add River test 2"></calcite-action>
</calcite-value-list-item>
<calcite-value-list-item label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountains">
<calcite-action slot="actions-end" icon="plus" text="Add Mountain test 2"></calcite-action>
</calcite-value-list-item>
<calcite-value-list-item label="Lake" description="A large body of water surrounded by land." value="lakes">
<calcite-action slot="actions-end" icon="plus" text="Add Lake test 2"></calcite-action>
</calcite-value-list-item>
</calcite-value-list>
<h2>Test 3. Value List with Multiple Selections and Actions</h2>
<calcite-value-list multiple>
<calcite-value-list-item label="River" description="A large natural stream of water flowing in a channel to the sea, a lake, or another such stream." value="rivers">
<calcite-action slot="actions-end" icon="check" text="Verify river">
</calcite-action>
<calcite-action slot="actions-end" icon="x" text="River is not verified">
</calcite-action>
</calcite-value-list-item>
<calcite-value-list-item label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountains">
<calcite-action slot="actions-end" icon="check" text="Verify mountain">
</calcite-action>
<calcite-action slot="actions-end" icon="x" text="Mountain is not verified">
</calcite-action>
</calcite-value-list-item>
<calcite-value-list-item label="Lake" description="A large body of water surrounded by land." value="lakes">
<calcite-action slot="actions-end" icon="check" text="Verify Lake">
</calcite-action>
<calcite-action slot="actions-end" icon="x" text="Lake is not verified">
</calcite-action>
</calcite-value-list-item>
</calcite-value-list>
<h2>Test 4. Value List with Non-interactive and Removable List Items</h2>
<calcite-value-list>
<calcite-value-list-item non-interactive label="River" value="river" description="A large natural stream of water flowing in a channel to the sea, a lake, or another such stream." removable></calcite-value-list-item>
<calcite-value-list-item non-interactive label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountain" removable></calcite-value-list-item>
<calcite-value-list-item non-interactive label="Lake" description="A large body of water surrounded by land." value="lake" removable></calcite-value-list-item>
</calcite-value-list>
<h2>Test 5. Value List with Drag Enabled</h2>
<calcite-value-list drag-enabled selection-follows-focus>
<calcite-value-list-item label="River" description="A large natural stream of water flowing in a channel to the sea, a lake, or another such stream." value="rivers">
<calcite-action slot="actions-end" icon="plus" text="Add River test 5"></calcite-action>
</calcite-value-list-item>
<calcite-value-list-item label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountains">
<calcite-action slot="actions-end" icon="plus" text="Add Mountain test 5"></calcite-action>
</calcite-value-list-item>
<calcite-value-list-item label="Lake" description="A large body of water surrounded by land." value="lakes">
<calcite-action slot="actions-end" icon="plus" text="Add Lake test 5"></calcite-action>
</calcite-value-list-item>
</calcite-value-list>
<h2>Test 6. Grouped Value Lists with Drag Enabled</h2>
<p>Move value list items from one list to another.</p>
<span>List 1</span>
<calcite-value-list id="listone" drag-enabled group="dragEnabledGroup">
<calcite-value-list-item label="River" description="A large natural stream of water flowing in a channel to the sea, a lake, or another such stream." value="river"></calcite-value-list-item>
<calcite-value-list-item label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountain"></calcite-value-list-item>
</calcite-value-list>
<span>List 2</span>
<calcite-value-list id="listtwo" drag-enabled group="dragEnabledGroup">
<calcite-value-list-item label="Lake" description="A large body of water surrounded by land." value="lake"></calcite-value-list-item>
<calcite-value-list-item label="Meadow" description="A piece of grassland, especially one used for hay." value="meadow"></calcite-value-list-item>
</calcite-value-list>
</main>
</body>
<script>
window.onload = () => {
// Theme Switcher
const themeSwitch = document.getElementById("theme-switch");
themeSwitch.addEventListener("calciteSwitchChange", () => {
document.body.classList.toggle("calcite-theme-dark");
});
};
</script>
</html>