-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (102 loc) · 3.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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⏱️</text></svg>"
/>
<title>@rbardini/time-duration</title>
<style>
html {
color-scheme: light dark;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
body {
margin-inline: auto;
max-width: 65ch;
padding: 1em;
}
h1 {
margin-block: 0;
}
h2 {
margin-block: 1.5em 0;
}
pre {
background-color: ButtonFace;
color: ButtonText;
overflow: scroll;
padding: 1em;
}
</style>
<script type="module" src="./polyfill+register.js" async></script>
</head>
<body>
<h1>@rbardini/time-duration</h1>
<p>
⏱️ A web component to format <code><time></code> elements with the elapsed time.
<a href="https://github.com/rbardini/time-duration">GitHub</a>
</p>
<hr />
<h2>With <code>datetime</code> attribute</h2>
<pre><code><time-duration>
<time datetime="2020-01-01"></time>
</time-duration>
</code></pre>
<time-duration>
<time datetime="2020-01-01"> </time>
</time-duration>
<h2>With <code><time></code> text content</h2>
<pre><code><time-duration>
<time>2020-01-01</time>
</time-duration></code></pre>
<time-duration>
<time>2020-01-01</time>
</time-duration>
<h2>With past date/time</h2>
<pre><code><time-duration>
<time datetime="2020-01-01">Jan 1, 2020 – Present</time>
</time-duration></code></pre>
<time-duration>
<time datetime="2020-01-01">Jan 1, 2020 – Present</time>
</time-duration>
<h2>With future date/time</h2>
<pre><code><time-duration>
<time datetime="2030-01-01">Present – Jan 1, 2030</time>
</time-duration></code></pre>
<time-duration>
<time datetime="2030-01-01">Present – Jan 1, 2030</time>
</time-duration>
<h2>With reference date/time</h2>
<pre><code><time-duration data-ref-datetime="2030-01-01">
<time datetime="2020-01-01">Jan 1, 2020 – Jan 1, 2030</time>
</time-duration></code></pre>
<time-duration data-ref-datetime="2030-01-01">
<time datetime="2020-01-01">Jan 1, 2020 – Jan 1, 2030</time>
</time-duration>
<h2>With <a href="https://en.wikipedia.org/wiki/ISO_8601#Durations">duration string</a></h2>
<pre><code><time-duration>
<time datetime="P3Y6M4DT12H30M5S">Over 3 years</time>
</time-duration></code></pre>
<time-duration>
<time datetime="P3Y6M4DT12H30M5S">Over 3 years</time>
</time-duration>
<h2>With language</h2>
<pre><code><time-duration lang="ja">
<time datetime="2020-01-01">2020年1月1日～現在</time>
</time-duration></code></pre>
<time-duration lang="ja">
<time datetime="2020-01-01">2020年1月1日～現在</time>
</time-duration>
<h2>With duration and formatting options</h2>
<pre><code><time-duration data-largest-unit="year" data-smallest-unit="month" data-style="long">
<time datetime="2020-01-01">Years since Jan 1, 2020</time>
</time-duration></code></pre>
<time-duration data-largest-unit="year" data-smallest-unit="month" data-style="long">
<time datetime="2020-01-01">Years since Jan 1, 2020</time>
</time-duration>
</body>
</html>