-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathblock.html
170 lines (150 loc) · 7.64 KB
/
block.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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!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>block</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-block {
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>block and block-section</code></h1>
<h2>Test 1. Block Section</h2>
<calcite-block open heading="Natural Resources" summary="Materials or substances such as minerals, forests, water, and fertile land that occur in nature and can be used for economic gain.">
<calcite-block-section open text="River" intl-collapse="Collapse" intl-expand="Expand">
<calcite-notice active>
<div slot="message">A large natural stream of water flowing in a channel to the sea, a lake, or another such stream.</div>
</calcite-notice>
</calcite-block-section>
</calcite-block>
<h2>Test 2. Block with Status</h2>
<h3>Block Valid:</h3>
<calcite-block status="valid" open heading="Natural Resources" summary="Materials or substances such as minerals, forests, water, and fertile land that occur in nature and can be used for economic gain.">
<calcite-block-section open text="River" intl-collapse="Collapse" intl-expand="Expand">
<calcite-notice active>
<div slot="message">A large natural stream of water flowing in a channel to the sea, a lake, or another such stream.</div>
</calcite-notice>
</calcite-block-section>
</calcite-block>
<h3>Block Section Valid:</h3>
<calcite-block open heading="Natural Resources" summary="Materials or substances such as minerals, forests, water, and fertile land that occur in nature and can be used for economic gain.">
<calcite-block-section open text="River" intl-collapse="Collapse" intl-expand="Expand" status="valid">
<calcite-notice active>
<div slot="message">A large natural stream of water flowing in a channel to the sea, a lake, or another such stream.</div>
</calcite-notice>
</calcite-block-section>
</calcite-block>
<h3>Block Invalid:</h3>
<calcite-block status="invalid" open heading="Natural Resources" summary="A category of companies that provide basic amenities, such as water, sewage services, electricity, dams, and natural gas.">
<calcite-block-section open text="River" intl-collapse="Collapse" intl-expand="Expand">
<calcite-notice active>
<div slot="message">A large natural stream of water flowing in a channel to the sea, a lake, or another such stream.</div>
</calcite-notice>
</calcite-block-section>
</calcite-block>
<h3>Block Section Invalid:</h3>
<calcite-block open heading="Natural Resources" summary="Materials or substances such as minerals, forests, water, and fertile land that occur in nature and can be used for economic gain.">
<calcite-block-section open text="River" intl-collapse="Collapse" intl-expand="Expand" status="invalid">
<calcite-notice active>
<div slot="message">A large body of water surrounded by land.</div>
</calcite-notice>
</calcite-block-section>
</calcite-block>
<h2>Test 3. Block Section with toggle switch</h2>
<calcite-block open heading="Natural Resources" summary="Materials or substances such as minerals, forests, water, and fertile land that occur in nature and can be used for economic gain.">
<calcite-block-section open text="River" intl-collapse="Collapse" intl-expand="Expand" toggle-display="switch">
<calcite-notice active>
<div slot="message">A large body of water surrounded by land.</div>
</calcite-notice>
</calcite-block-section>
</calcite-block>
<h2>Test 4. Collapsed Block</h2>
<calcite-block collapsible heading="Natural Resources" summary="Materials or substances such as minerals, forests, water, and fertile land that occur in nature and can be used for economic gain.">
<calcite-block-section open text="River" intl-collapse="Collapse" intl-expand="Expand">
<calcite-notice active>
<div slot="message">A large body of water surrounded by land.</div>
</calcite-notice>
</calcite-block-section>
</calcite-block>
<h2>Test 5. Disabled Block</h2>
<calcite-block disabled heading="Natural Resources" summary="Materials or substances such as minerals, forests, water, and fertile land that occur in nature and can be used for economic gain.">
<calcite-block-section open text="River" intl-collapse="Collapse" intl-expand="Expand">
<calcite-notice active>
<div slot="message">A large body of water surrounded by land.</div>
</calcite-notice>
</calcite-block-section>
</calcite-block>
<h2>Test 6. Block with Drag Handle</h2>
<calcite-block drag-handle heading="Natural Resources" summary="Materials or substances such as minerals, forests, water, and fertile land that occur in nature and can be used for economic gain.">
<calcite-notice active>
<div slot="message">An excellent assortment of content.</div>
</calcite-notice>
</calcite-block>
<h2>Test 7. Block with Heading Level</h2>
<calcite-block heading="Natural Resources" heading-level="3" summary="Materials or substances such as minerals, forests, water, and fertile land that occur in nature and can be used for economic gain.">
<calcite-notice active>
<div slot="message">An excellent assortment of content.</div>
</calcite-notice>
</calcite-block>
<h2>Test 8. Loading Block</h2>
<calcite-block loading heading="Natural Resources" summary="Materials or substances such as minerals, forests, water, and fertile land that occur in nature and can be used for economic gain.">
<calcite-notice active>
<div slot="message">An excellent assortment of content.</div>
</calcite-notice>
</calcite-block>
</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>