-
Notifications
You must be signed in to change notification settings - Fork 24
/
index.html
251 lines (250 loc) · 10.1 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
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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!doctype html>
<html lang="en">
<head>
<link rel="icon" href="data:;" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ranui</title>
<script src="./index.ts" type="module"></script>
<script src="./shadowless.ts" type="module"></script>
<!-- <script src="./demo//react.tsx" type="module"></script> -->
</head>
<body>
<div id="react"></div>
<div id="vue"></div>
<div id="preact"></div>
<div id="solidjs"></div>
<h1>Hello RanUI</h1>
<h2>math</h2>
<r-math latex="x = {-b \pm \sqrt{b^2-4ac} \over 2a}."></r-math>
<r-math latex="\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1 \quad (a > b > 0)"></r-math>
<h2>loading</h2>
<r-loading name="stretch"></r-loading>
<r-loading name="rotate"></r-loading>
<r-loading name="double-bounce"></r-loading>
<r-loading name="cube"></r-loading>
<r-loading name="dot"></r-loading>
<r-loading name="triple-bounce"></r-loading>
<r-loading name="scale-out"></r-loading>
<r-loading name="circle"></r-loading>
<r-loading name="circle-line"></r-loading>
<r-loading name="square"></r-loading>
<r-loading name="pulse"></r-loading>
<r-loading name="solar"></r-loading>
<r-loading name="cube-fold"></r-loading>
<r-loading name="circle-fold"></r-loading>
<r-loading name="cube-grid"></r-loading>
<r-loading name="circle-turn"></r-loading>
<r-loading name="circle-rotate"></r-loading>
<r-loading name="circle-spin"></r-loading>
<r-loading name="dot-bar"></r-loading>
<r-loading name="dot-circle"></r-loading>
<r-loading name="line"></r-loading>
<r-loading name="dot-pulse"></r-loading>
<r-loading name="line-scale"></r-loading>
<r-loading name="text"></r-loading>
<r-loading name="cube-dim"></r-loading>
<r-loading name="dot-line"></r-loading>
<r-loading name="arc"></r-loading>
<r-loading name="drop"></r-loading>
<r-loading name="pacman"></r-loading>
<h2>checkbox</h2>
<r-checkbox onchange="console.log(this)"></r-checkbox>
<r-checkbox disabled checked="false"></r-checkbox>
<r-checkbox disabled checked="true"></r-checkbox>
<h2>popover</h2>
<r-popover trigger="click,hover" placement="bottom">
<r-button style="margin: 20px">popover</r-button>
<r-content>
<div style="width: 100vw; max-width: 600px; height: 300px">
<r-progress type="drag"></r-progress>
</div>
</r-content>
</r-popover>
<r-popover trigger="click,hover" placement="top">
<r-button style="margin: 20px">popover</r-button>
<r-content>
<div style="width: 100vw; max-width: 600px; height: 300px">
<r-progress type="drag"></r-progress>
</div>
</r-content>
</r-popover>
<h2>colorpicker</h2>
<span>1111111111111</span><r-colorpicker value="rgb(73, 108, 156)"></r-colorpicker>
<h2>video</h2>
<div style="width: 100vw; max-width: 600px; height: 300px; margin: 20px">
<r-player src="https://chaxus.github.io/ran/hls/example.m3u8"> </r-player>
</div>
<h2>Progress</h2>
<r-progress type="drag"></r-progress>
<h2>Select</h2>
<r-select style="width: 120px; height: 40px" type="text" defaultValue="185" placement="top" trigger="hover,click">
<r-option value="185">Mike</r-option>
<r-option value="186">Tom</r-option>
<r-option value="187">Lucy</r-option>
</r-select>
<r-select style="width: 120px; height: 40px" disabled defaultValue="185">
<r-option value="185">Mike</r-option>
<r-option value="186">Tom</r-option>
<r-option value="187">Lucy</r-option>
</r-select>
<r-select style="width: 120px; height: 40px" defaultValue="185" getPopupContainerId="select">
<r-option value="185">Mike</r-option>
<r-option value="186">Tom</r-option>
<r-option value="187">Lucy</r-option>
</r-select>
<r-select style="width: 120px; height: 40px" showSearch>
<r-option value="185">Mike</r-option>
<r-option value="186">Tom</r-option>
<r-option value="187">Lucy</r-option>
</r-select>
<h2>Button</h2>
<r-button type="primary">主要按钮</r-button>
<r-button type="warning" effect="false">警告按钮</r-button>
<r-button type="default" icon="user" sheet=".btn { width: 100px; }">默认按钮</r-button>
<r-button type="primary" disabled>disable 按钮</r-button>
<h2>Icon</h2>
<r-icon name="home" size="40" color="#1E90FF"></r-icon>
<r-icon name="close-circle-fill" size="40" color="rgba(0,0,0,.1)"></r-icon>
<r-icon name="loading" size="40" color="#1E90FF" spin></r-icon>
<h2>Tab</h2>
<r-tabs type="text">
<r-tab label="重名" icon="home">tab1</r-tab>
<r-tab label="tab2">tab2</r-tab>
<r-tab label="tab3">tab3</r-tab>
<r-tab label="重名" key="a" disabled>11111</r-tab>
<r-tab label="tab5" icon="home" r-key="aaa">22222</r-tab>
<r-tab label="tab6" ranKey="10">33333</r-tab>
<r-tab label="tab7">22222</r-tab>
<r-tab label="tab7777777">77777</r-tab>
</r-tabs>
<h2>Input</h2>
<div style="width: 40%; height: 200px; display: flex; flex-flow: column; justify-content: space-around">
<ra-input label="user"></ra-input>
<r-input label="user" placeholder="user"></r-input>
<r-input icon="home" status="warning" disabled></r-input>
</div>
<h2>Preview</h2>
<r-button type="primary" onclick="uploadFile()">choose file to preview</r-button>
<r-preview id="preview"></r-preview>
<script>
const inputDom = document.getElementById('input2');
const uploadFile = () => {
const preview = document.getElementById('preview');
const uploadFile = document.createElement('input');
uploadFile.setAttribute('type', 'file');
uploadFile.click();
uploadFile.onchange = (e) => {
const { files = [] } = uploadFile;
if (files.length > 0) {
preview.setAttribute('src', '');
const file = files[0];
const url = URL.createObjectURL(file);
preview.setAttribute('src', url);
}
};
};
</script>
<h2>message</h2>
<r-button onclick="message.info('这是一条提示 info')">信息提示</r-button>
<r-button onclick="message.warning('这是一条提示 warning')">警告提示</r-button>
<r-button onclick="message.error('这是一条提示 error')">错误提示</r-button>
<r-button onclick="message.success('这是一条提示 success')">成功提示</r-button>
<r-button onclick="message.toast('这是一条提示 toast')">成功提示</r-button>
<h2>Radar</h2>
<r-radar
style="width: 300px; height: 300px; display: block"
fillColor="red"
strokeColor="blue"
colorPolygon="green"
colorLine="blue"
abilitys='[{"abilityName":"生命","scoreRate":"10","backgroundColor":"red","fontSize":"30","fontColor":"blue"},{"abilityName":"攻击","scoreRate":"90"},{"abilityName":"防御","scoreRate":"20"},{"abilityName":"元素精通","scoreRate":"50"},{"abilityName":"暴击率","scoreRate":"80"},{"abilityName":"暴击伤害","scoreRate":"50"}]'
></r-radar>
<h2>Video</h2>
<!-- <r-video src=""></r-video> -->
<h2>Modal</h2>
<r-modal id="modal"></r-modal>
<r-button onclick="openModal()">弹窗的开关</r-button>
<script>
const openModal = () => {
const modal = document.getElementById('modal');
modal.setAttribute('open', 'true');
};
</script>
</body>
<script async>
function getPopupContainer() {
console.log('getPopupContainer');
}
// 添加资源到缓存
const addResourcesToCache = async (resources) => {
const cache = await caches.open('v1');
await cache.addAll(resources);
};
const putInCache = async (request, response) => {
const cache = await caches.open('v1');
await cache.put(request, response);
};
const cacheFirst = async (request) => {
// 首先从缓存中获取资源
const responseFromCache = await caches.match(request);
if (responseFromCache) {
return responseFromCache;
}
// 然后尝试从网络中获取资源
try {
const responseFromNetwork = await fetch(request);
// 响应可能会被使用
// 我们需要将它的拷贝放入缓存
// 然后再返回该响应
putInCache(request, responseFromNetwork.clone());
return responseFromNetwork;
} catch (error) {
const fallbackResponse = await caches.match(fallbackUrl);
if (fallbackResponse) {
return fallbackResponse;
}
// 当回落的响应也不可用时，
// 我们便无能为力了，但我们始终需要
// 返回 Response 对象
return new Response('Network error happened', {
status: 408,
headers: { 'Content-Type': 'text/plain' },
});
}
};
const registerServiceWorker = async (paths = []) => {
// 只有 https 可以开启 service-work
if (!window.location.protocol.includes('https')) return;
if ('serviceWorker' in navigator) {
try {
const registration = await navigator.serviceWorker.register('service-worker.js', {
scope: '/',
});
if (registration.installing) {
console.log('正在安装 Service worker');
} else if (registration.waiting) {
console.log('已安装 Service worker installed');
} else if (registration.active) {
console.log('激活 Service worker');
registration.addEventListener('install', (event) => {
event.waitUntil(addResourcesToCache(paths));
});
registration.addEventListener('fetch', (event) => {
event.respondWith(
cacheFirst({
request: event.request,
fallbackUrl: '/',
}),
);
});
}
} catch (error) {
console.error(`注册失败：${error}`);
}
}
};
const paths = ['/assets/js/pdf.js', '/assets/js/d3.js', '/assets/js/pdf-worker.js', '/assets/js/dimple.js'];
registerServiceWorker(paths);
</script>
</html>