-
Notifications
You must be signed in to change notification settings - Fork 1
/
list.html
146 lines (135 loc) · 6.9 KB
/
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
<!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>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-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>list, list-item-group and list-item</code></h1>
<h2>Test 1. List</h2>
<calcite-list>
<calcite-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-action text="Enable River layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
<calcite-list-item label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountain" selected>
<calcite-action text="Enable Mountain layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
<calcite-list-item label="Lake" description="A large body of water surrounded by land." value="lake">
<calcite-action text="Enable Lake layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
<calcite-list-item disabled label="Disabled item" description="An example of a disabled list item." value="disabled">
<calcite-action text="Disabled layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
</calcite-list>
<h2>Test 2. Disabled List</h2>
<calcite-list disabled>
<calcite-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-action text="Enable River layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
<calcite-list-item label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountain" selected>
<calcite-action text="Enable Mountain layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
<calcite-list-item label="Lake" description="A large body of water surrounded by land." value="lake">
<calcite-action text="Enable Lake layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
</calcite-list>
<h2>Test 3. List with non-interactive list items</h2>
<calcite-list>
<calcite-list-item non-interactive 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-action text="Enable River layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
<calcite-list-item non-interactive label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountain" selected>
<calcite-action text="Enable Mountain layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
<calcite-list-item non-interactive label="Lake" description="A large body of water surrounded by land." value="lake">
<calcite-action text="Enable Lake layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
</calcite-list>
<h2>Test 4. Heading Level List</h2>
<h3>Heading level in list:</h3>
<calcite-list heading-level="4">
<calcite-list-item-group heading="Natural Resources">
<calcite-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-action text="Enable River layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
<calcite-list-item label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountain" selected>
<calcite-action text="Enable Mountain layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
<calcite-list-item label="Lake" description="A large body of water surrounded by land." value="lake">
<calcite-action text="Enable Lake layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
</calcite-list-item-group>
</calcite-list>
<h3>Heading Level in list group:</h3>
<calcite-list>
<calcite-list-item-group heading-level="4" heading="Natural Resources">
<calcite-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-action text="Enable River layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
<calcite-list-item label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountain" selected>
<calcite-action text="Enable Mountain layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
<calcite-list-item label="Lake" description="A large body of water surrounded by land." value="lake">
<calcite-action text="Enable Lake layer" slot="actions-end" icon="layer"></calcite-action>
</calcite-list-item>
</calcite-list-item-group>
</calcite-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>