-
Notifications
You must be signed in to change notification settings - Fork 1
/
tip.html
142 lines (131 loc) · 6.35 KB
/
tip.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
<!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>tip</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-tip {
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>tip, tip-manager and tip-group</code></h1>
<h2>Test 1. Tip</h2>
<calcite-tip heading="River" intl-close="Close">
<img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="Nature placeholder image">
<p>A large natural stream of water flowing in a channel to the sea, a lake, or another such stream.</p>
<a href="http://www.esri.com">Esri website example link</a>
</calcite-tip>
<h2>Test 2. Tip with Heading Level</h2>
<calcite-tip heading="River" intl-close="Close" heading-level="3">
<img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="Nature placeholder image">
<p>A large natural stream of water flowing in a channel to the sea, a lake, or another such stream.</p>
<a href="http://www.esri.com">Esri website example link</a>
</calcite-tip>
<h2>Test 3. Non-dismissible Tip</h2>
<calcite-tip heading="River" intl-close="Close" non-dismissible>
<img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="Nature placeholder image">
<p>A large natural stream of water flowing in a channel to the sea, a lake, or another such stream.</p>
<a href="http://www.esri.com">Esri website example link</a>
</calcite-tip>
<h2>Test 4. Selected Tip</h2>
<calcite-tip heading="River" intl-close="Close" selected>
<img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="Nature placeholder image">
<p>A large natural stream of water flowing in a channel to the sea, a lake, or another such stream.</p>
<a href="http://www.esri.com">Esri website example link</a>
</calcite-tip>
<h2>Test 5. Tip Manager</h2>
<calcite-tip-manager intl-close="Close" intl-next="Next" intl-previous="Previous" intl-default-title="Natural Resources">
<calcite-tip-group group-title="Natural Resources">
<calcite-tip heading="River" intl-close="Close">
<img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="Nature placeholder image">
<p>A large natural stream of water flowing in a channel to the sea, a lake, or another such stream.</p>
<a href="http://www.esri.com">Esri website example link</a>
</calcite-tip>
<calcite-tip heading="Mountain" intl-close="Close" selected>
<img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="Nature placeholder image">
<p>A large natural elevation of the earth's surface rising abruptly from the surrounding level.</p>
<a href="http://www.esri.com">Esri website example link</a>
</calcite-tip>
<calcite-tip heading="Lake" intl-close="Close">
<img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="Nature placeholder image">
<p>A large body of water surrounded by land.</p>
<a href="http://www.esri.com">Esri website example link</a>
</calcite-tip>
</calcite-tip-group>
</calcite-tip-manager>
<h2>Test 6. Tip Manager with heading level</h2>
<calcite-tip-manager heading-level="3" intl-close="Close" intl-next="Next" intl-previous="Previous" intl-default-title="Natural Resources">
<calcite-tip-group group-title="Natural Resources">
<calcite-tip heading="River" intl-close="Close">
<img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="Nature placeholder image">
<p>A large natural stream of water flowing in a channel to the sea, a lake, or another such stream.</p>
<a href="http://www.esri.com">Esri website example link</a>
</calcite-tip>
<calcite-tip heading="Mountain" intl-close="Close" selected>
<img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="Nature placeholder image">
<p>A large natural elevation of the earth's surface rising abruptly from the surrounding level.</p>
<a href="http://www.esri.com">Esri website example link</a>
</calcite-tip>
<calcite-tip heading="Lake" intl-close="Close">
<img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="Nature placeholder image">
<p>A large body of water surrounded by land.</p>
<a href="http://www.esri.com">Esri website example link</a>
</calcite-tip>
</calcite-tip-group>
</calcite-tip-manager>
</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>