-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
61 lines (61 loc) · 1.63 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="icon"
type="image/svg+xml"
href="https://m.hellobike.com/resource/helloyun/12395/0USLE_quark.png?x-oss-process=image/quality,q_80"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Quark</title>
<script type="module" src="./src/index.tsx"></script>
<style>
body {
margin: 0;
display: grid;
justify-content: center;
}
p {
text-align: center;
}
</style>
</head>
<body>
<!-- This is your component (custom element). -->
<quark-ui-rate
id="rate"
count="10"
size="1.5rem"
value="3.7"
space="0.5rem"
activeColor="linear-gradient(to right, #a8f, #8af)"
allowHalf
readonly="false"
disabled="false"
></quark-ui-rate>
<quark-ui-rate
size="1.5rem"
value="4.7"
space="0.5rem"
color="#ddd"
activeColor="linear-gradient(to right, #f8a, #fa8)"
></quark-ui-rate>
<p>Edit <code>src/app.tsx</code> and save to test HMR</p>
<script>
document.addEventListener("DOMContentLoaded", () => {
const rate = document.getElementById("rate");
rate.addEventListener("input", (value) => {
if (value.detail < 3) {
console.log("at least 3 stars required");
return;
}
rate.setAttribute("value", value.detail);
});
rate.addEventListener("change", (value) => {
console.log("value changed", value.detail);
});
});
</script>
</body>
</html>