forked from Esri/calcite-design-system
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtip-manager.html
175 lines (157 loc) · 7.17 KB
/
tip-manager.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
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Tip-manager</title>
<style>
.parent {
display: flex;
align-items: center;
margin: 25px 0;
}
.child {
flex: 0 1 50%;
margin: 0 25px;
color: var(--calcite-ui-text-3);
font-family: var(--calcite-sans-family);
font-size: var(--calcite-font-size-0);
font-weight: var(--calcite-font-weight-medium);
}
.right-aligned-text {
text-align: right;
flex: 0 0 15%;
}
.add-tip {
padding-right: 25px;
}
hr {
margin: 60px 0;
border-top: 1px solid var(--calcite-ui-border-2);
}
</style>
<script src="./_assets/head.js"></script>
</head>
<body>
<demo-dom-swapper>
<!-- tip with thumbnail -->
<div class="parent">
<div class="child right-aligned-text">tip with thumbnail</div>
<div class="child">
<calcite-tip heading="Celestial Bodies!">
<img slot="thumbnail" src="https://placeimg.com/1000/600" alt="This is an image of nature." />
<p>
This tip is how a tip should really look. It has a landscape or square image and a small amount of text
content. This paragraph is in an "info" slot.
</p>
<p>This is another paragraph in a subsequent "info" slot.</p>
<a href="http://www.esri.com">This is a link.</a>
</calcite-tip>
</div>
</div>
<!-- tip with no thumbnail -->
<div class="parent">
<div class="child right-aligned-text">tip with no thumbnail</div>
<div class="child">
<calcite-tip heading="Celestial Bodies">
<p>This tip has no image. As such, the content area will take up the entire width of the tip.</p>
<p>
This is the next paragraph and should show how wide the content area is now. Of course, the width of the
overall tip will affect things. In astronomy, the terms object and body are often used interchangeably.
</p>
<a href="http://www.esri.com">View Esri</a>
</calcite-tip>
</div>
</div>
<!-- tip without header -->
<div class="parent">
<div class="child right-aligned-text">tip without header</div>
<div class="child">
<calcite-tip>
<img slot="thumbnail" src="https://placeimg.com/1000/600" alt="This is an image of nature." />
<p>This tip is how a tip should appear without a dismissible button as well as without a heading.</p>
<p>This is another paragraph in a subsequent "info" slot.</p>
<a href="http://www.esri.com">This is a link.</a>
</calcite-tip>
</div>
</div>
<hr />
<!-- add and remove button -->
<div class="parent">
<div class="child right-aligned-text"></div>
<div class="child">
<p>
<calcite-button id="add" class="add-tip" appearance="solid" icon-end="plus"> add a new tip </calcite-button>
<calcite-button id="remove" appearance="solid" icon-end="x"> remove last tip </calcite-button>
</p>
</div>
</div>
<!-- tip manager -->
<div class="parent">
<div class="child right-aligned-text">tip-manager</div>
<div class="child">
<calcite-tip-manager>
<calcite-tip-group group-title="Astronomy">
<calcite-tip heading="The Red Rocks and Blue Water">
<img slot="thumbnail" src="https://placeimg.com/1000/600/city" alt="This is an image." />
<p>
This tip is how a tip should really look. It has a landscape or square image and a small amount of
text content. This paragraph is in an "info" slot.
</p>
<p>
This is another paragraph in a subsequent "info" slot. In publishing and graphic design, Lorem ipsum
is a placeholder text commonly used to demonstrate the visual form of a document without relying on
meaningful content (also called greeking). Replacing the actual content with placeholder text allows
designers to design the form of the content before the content itself has been produced.
</p>
<a href="http://www.esri.com">This is the "link" slot.</a>
</calcite-tip>
<calcite-tip heading="The Long Trees">
<img slot="thumbnail" src="https://placeimg.com/1000/600/nature" alt="This is an image." />
<p>
This tip has an image that is a pretty tall. And the text will run out before the end of the image.
</p>
<p>In astronomy, the terms object and body are often used interchangeably.</p>
<a href="http://www.esri.com">View Esri</a>
</calcite-tip>
</calcite-tip-group>
<calcite-tip heading="Square Nature">
<img slot="thumbnail" src="https://placeimg.com/1000/1000/nature" alt="This is an image." />
<p>This tip has an image that is square. And the text will run out before the end of the image.</p>
<p>In astronomy, the terms object and body are often used interchangeably.</p>
<p>
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document without relying on meaningful content (also called greeking). Replacing the
actual content with placeholder text allows designers to design the form of the content before the
content itself has been produced.
</p>
<a href="http://www.esri.com">View Esri</a>
</calcite-tip>
<calcite-tip heading="The lack of imagery">
<p>This tip has no image. As such, the content area will take up the entire width of the tip.</p>
<p>
This is the next paragraph and should show how wide the content area is now. Of course, the width of the
overall tip will affect things. In astronomy, the terms object and body are often used interchangeably.
</p>
<a href="http://www.esri.com">View Esri</a>
</calcite-tip>
</calcite-tip-manager>
</div>
</div>
<script>
let count = 0;
document.getElementById("add").addEventListener("click", () => {
const mgr = document.querySelector("calcite-tip-manager");
const tips = mgr.querySelectorAll("calcite-tip");
const newTip = tips[tips.length - 1].cloneNode(true);
mgr.appendChild(newTip);
});
document.getElementById("remove").addEventListener("click", () => {
const mgr = document.querySelector("calcite-tip-manager");
const tips = mgr.querySelectorAll("calcite-tip");
tips[tips.length - 1].remove();
});
</script>
</demo-dom-swapper>
</body>
</html>