-
Notifications
You must be signed in to change notification settings - Fork 33
/
Copy pathindex.html
491 lines (466 loc) · 33.7 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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./assets/style.css" />
<link rel="stylesheet" href="./assets/index.css" />
<link rel="stylesheet" href="./assets/highlight.css" />
<link rel="stylesheet" href="./assets/tocas/tocas.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet" />
<script src="./assets/script.js"></script>
<title>Tocas UI</title>
<!--
▄▄▄ ▄▄████▄
▄█████▄ ▄██▀ ██
▀█▄ ██▄ ██▀ ██
▀██▄▄▄████ ▄▄▄██▀
▀▀▀████▀▀▀▀▀
██
██ ▄█████▄ █████████████ ▄█ █▄
██ ▄█▀ ▀█▄ ██ ██ ██▀█▄ ▄█▀
██ ██ ██ ██ ██ ██ ▀██ ██▀
██ ██ ██ ██ ██ ▄█▀ ██ ▀▀▀▀▀▀▀███
██ ▀█▄ ▄█▀ ██ ██ ██▀ ▀█▄ ██▀
██ ▀███████▀ █████████████ ███▄▄▄▄▄▄▄▄▄███ █▀
「你只能死一次，一定要死的轟轟烈烈。」
沒有人可以做一件事情直到永遠，
而一個人的生命也不是永生。
死亡給予了我們試著活下去的動力，
在那之前都應該竭盡所能的向著自己的夢邁進。
將自己的生命活得淋漓盡致才是最重要的；
不要將剛開始的序章放在頁尾。
-->
<meta name="description" content="以最快最直覺的方式，建構多樣的網站與漸進式網路應用程式介面。" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Tocas UI" />
<meta name="twitter:description" content="以最快最直覺的方式，建構多樣的網站與漸進式網路應用程式介面。" />
<meta name="twitter:image" content="https://v4.tocas-ui.com/zh-tw/assets/images/og.png" />
<meta property="og:title" content="Tocas UI" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://v4.tocas-ui.com/zh-tw/assets/images/og.png" />
<meta property="og:url" content="https://v4.tocas-ui.com/zh-tw/index.html" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="720" />
<meta property="og:description" content="以最快最直覺的方式，建構多樣的網站與漸進式網路應用程式介面。" />
</head>
</head>
<body>
<div class="穹頂">
<div class="界限容器">
<div class="穹頂-導航列">
<div class="穹頂-導航列-左側">
<a class="穹頂-導航列-項目 穹頂-導航列-項目_主要" href="./index.html">Tocas UI</a>
<a class="穹頂-導航列-項目" href="./getting-started.html">開始使用</a>
<a class="穹頂-導航列-項目" href="./button.html">元件樣式</a>
<a class="穹頂-導航列-項目" href="./examples.html">實際範例</a>
</div>
<div class="穹頂-導航列-右側">
<div class="穹頂-導航列-項目 穹頂-導航列-項目_語系的">
<span class="ts-flag is-taiwan-flag"></span> 台灣正體
<div class="穹頂-導航列-項目-語系下拉式選單">
<a
class="穹頂-導航列-項目-語系下拉式選單-項目 穹頂-導航列-項目-語系下拉式選單-項目_啟用的"
href="./../zh-tw/index.html"
><span class="ts-flag is-taiwan-flag"></span> 台灣正體</a
>
</div>
</div>
<a class="穹頂-導航列-項目" href="https://github.com/teacat/tocas" target="_blank"><span class="ts-icon is-github-icon"></span> GitHub</a>
</div>
</div>
<div class="穹頂-導航列 穹頂-導航列_手機的">
<div class="穹頂-導航列-右側">
<div class="穹頂-導航列-項目 穹頂-導航列-項目_語系的">
<span class="ts-flag is-taiwan-flag"></span> 台灣正體
<div class="穹頂-導航列-項目-語系下拉式選單">
<a
class="穹頂-導航列-項目-語系下拉式選單-項目 穹頂-導航列-項目-語系下拉式選單-項目_啟用的"
href="./../zh-tw/index.html"
><span class="ts-flag is-taiwan-flag"></span> 台灣正體</a
>
</div>
</div>
</div>
</div>
<div class="穹頂-行動號召">
<div class="穹頂-行動號召-容器">
<div class="穹頂-行動號召-容器-標題">Tocas UI</div>
<div class="穹頂-行動號召-容器-副標題">以最快最直覺的方式，建構多樣的網站與漸進式網路應用程式介面。</div>
<a href="./getting-started.html" class="穹頂-行動號召-容器-動作">開始使用</a>
<a href="./examples.html" class="穹頂-行動號召-容器-動作 穹頂-行動號召-容器-動作_次要的">檢視範例</a>
</div>
</div>
<div class="進階宣傳-彈性格局">
<div class="進階宣傳-彈性格局-標題">即將登場</div>
<div class="進階宣傳-彈性格局-內容">透過 Tocas Templates 模板元件庫來快速拼湊出應用程式、購物商城和企業宣傳介面。</div>
<!--<a href="#!" class="進階宣傳-彈性格局-連結" target="_blank">
<span class="ts-icon is-chevron-right-icon"></span>
</a>-->
</div>
</div>
</div>
<div class="主要內容">
<div class="界限容器">
<div class="主要內容-贊助者 主要內容-內容區塊">
<div class="主要內容-贊助者-標題 主要內容-內容區塊-標題">本專案由以下贊助者提供</div>
<div class="主要內容-贊助者-清單">
<div class="主要內容-贊助者-清單-項目">
<img src="./assets/images/donators/Mac Taylor.jpg" class="主要內容-贊助者-清單-項目-頭像" />
<div class="主要內容-贊助者-清單-項目-名稱">Mac Taylor</div>
</div>
<div class="主要內容-贊助者-清單-項目">
<img src="./assets/images/donators/Sciuridae Li.jpg" class="主要內容-贊助者-清單-項目-頭像" />
<div class="主要內容-贊助者-清單-項目-名稱">Sciuridae Li</div>
</div>
<div class="主要內容-贊助者-清單-項目">
<img src="./assets/images/donators/Yan-K.jpg" class="主要內容-贊助者-清單-項目-頭像" />
<div class="主要內容-贊助者-清單-項目-名稱">Yan-K</div>
</div>
<div class="主要內容-贊助者-清單-項目">
<img src="./assets/images/donators/李政皇.jpg" class="主要內容-贊助者-清單-項目-頭像" />
<div class="主要內容-贊助者-清單-項目-名稱">李政皇</div>
</div>
<div class="主要內容-贊助者-清單-項目">
<img src="./assets/images/donators/Fan Kangtai.jpg" class="主要內容-贊助者-清單-項目-頭像" />
<div class="主要內容-贊助者-清單-項目-名稱">乾太₍₍ ◝(･◡･)◟ ⁾⁾</div>
</div>
<div class="主要內容-贊助者-清單-項目">
<img src="./assets/images/donators/Rex Tseng.jpg" class="主要內容-贊助者-清單-項目-頭像" />
<div class="主要內容-贊助者-清單-項目-名稱">Leko</div>
</div>
<div class="主要內容-贊助者-清單-項目">
<img src="./assets/images/donators/Bobby Ho.jpg" class="主要內容-贊助者-清單-項目-頭像" />
<div class="主要內容-贊助者-清單-項目-名稱">Bobby Ho</div>
</div>
<div class="主要內容-贊助者-清單-項目">
<img src="./assets/images/donators/Coin.jpg" class="主要內容-贊助者-清單-項目-頭像" />
<div class="主要內容-贊助者-清單-項目-名稱">Coin</div>
</div>
<div class="主要內容-贊助者-清單-項目">
<img src="./assets/images/donators/SpaceTimeHalf.jpg" class="主要內容-贊助者-清單-項目-頭像" />
<div class="主要內容-贊助者-清單-項目-名稱">SpaceTimeHalf</div>
</div>
<div class="主要內容-贊助者-清單-項目">
<img src="./assets/images/donators/methratton.jpg" class="主要內容-贊助者-清單-項目-頭像" />
<div class="主要內容-贊助者-清單-項目-名稱">methratton</div>
</div>
<div class="主要內容-贊助者-清單-項目">
<img src="./assets/images/donators/Sean Wei.jpg" class="主要內容-贊助者-清單-項目-頭像" />
<div class="主要內容-贊助者-清單-項目-名稱">Sean Wei</div>
</div>
<div class="主要內容-贊助者-清單-項目">
<img src="./assets/images/donators/Jonathan Goh.jpg" class="主要內容-贊助者-清單-項目-頭像" />
<div class="主要內容-贊助者-清單-項目-名稱">Jonathan Goh</div>
</div>
</div>
</div>
<div class="主要內容-特色說明 主要內容-內容區塊">
<div class="主要內容-特色說明-項目">
<div class="主要內容-特色說明-項目-標題">沒有 jQuery 相依性。</div>
<div class="主要內容-特色說明-項目-說明">
除了耗費多餘的網路頻寬之外；對於現代網站而言，使用 jQuery 已經不再是所謂的絕佳首選。Tocas UI 能與所有前端框架友善地搭配。
</div>
</div>
<div class="主要內容-特色說明-項目">
<div class="主要內容-特色說明-項目-標題">不需要 npm 或 Webpack。</div>
<div class="主要內容-特色說明-項目-說明">
沒有任何繁雜的手續：像是透過 npm 安裝一堆套件、在 Webpack 裡設置一堆載入器。你只需要將我們提供的 HTML 樣式標籤複製到你的網頁，然後…搭啦！就這麼容易。
</div>
</div>
<div class="主要內容-特色說明-項目">
<div class="主要內容-特色說明-項目-標題">完善的文件說明。</div>
<div class="主要內容-特色說明-項目-說明">
就算沒有撰寫過 Bootstrap 或是 Bulma、Semantic UI、Material Design…你也能夠透過完整的說明理解整個介面系統、響應式設計如何運作。
</div>
</div>
</div>
<div class="主要內容-內容區塊">
<div class="主要內容-內容區塊-標題">設計恍如隔世。</div>
<div class="主要內容-內容區塊-說明">現有的元件與樣式一應俱全，已經為你做好萬全的準備。</div>
<div class="主要內容-內容區塊-藝廊格局">
<div class="主要內容-內容區塊-藝廊格局-主要">
<div class="ts-grid is-relaxed">
<!-- 左側 -->
<div class="column is-4-wide">
<!-- 圖片卡片 -->
<div class="ts-header">圖片卡片</div>
<div class="ts-space"></div>
<div class="ts-box">
<img class="ts-image" src="./assets/images/16-9.png" />
<div class="ts-content">
<div class="ts-header is-heavy">好吃的千層蛋糕！</div>
<p>在 5 月之前於線上網路門市訂購，現在還特別加贈限量環保袋。</p>
</div>
</div>
<!-- / 圖片卡片 -->
<div class="ts-space is-large"></div>
<!-- 按鈕 -->
<div class="ts-header">按鈕</div>
<div class="ts-space is-small"></div>
<div class="ts-grid is-3-columns">
<div class="column">
<button class="ts-button is-fluid">送出</button>
</div>
<div class="column">
<button class="ts-button is-fluid is-secondary">取消</button>
</div>
<div class="column">
<button class="ts-button is-fluid is-outlined is-negative">刪除</button>
</div>
</div>
<!-- / 按鈕 -->
<div class="ts-space is-large"></div>
<!-- 標籤 -->
<div class="ts-header">標籤</div>
<div class="ts-space is-small"></div>
<div class="ts-wrap is-compact">
<span class="ts-chip">
<div class="ts-image">
<img src="./assets/images/user.png" />
</div>
飛鳥湊
</span>
<span class="ts-chip">
<div class="ts-image">
<img src="./assets/images/user3.png" />
</div>
西園寺風莉
</span>
</div>
<div class="ts-space"></div>
<div class="ts-wrap is-compact">
<span class="ts-badge">8,964</span>
<span class="ts-badge is-secondary">16,226</span>
<span class="ts-badge is-negative">320</span>
</div>
<!-- / 標籤 -->
</div>
<!-- / 左側 -->
<!-- 中間 -->
<div class="column is-8-wide">
<!-- 統計數據 -->
<div class="ts-header">統計數據</div>
<div class="ts-space"></div>
<div class="ts-grid is-2-columns">
<div class="column">
<div class="ts-box">
<div class="ts-content">
<div class="ts-statistic">
<div class="value">42,689</div>
<div class="comparison is-increased">32</div>
</div>
本月拜訪次數
</div>
<div class="symbol">
<span class="ts-icon is-eye-icon"></span>
</div>
</div>
</div>
<div class="column">
<div class="ts-box">
<div class="ts-content">
<div class="ts-statistic">
<div class="value">8,652</div>
<div class="comparison is-increased">351</div>
</div>
總會員數
</div>
<div class="symbol">
<span class="ts-icon is-users-icon"></span>
</div>
</div>
</div>
</div>
<!-- / 統計數據 -->
<div class="ts-space is-large"></div>
<!-- 導航列 -->
<div class="ts-header">導航列</div>
<div class="ts-space"></div>
<div class="ts-segment is-dense">
<div class="ts-app-navbar is-indicated is-dense is-fluid">
<a href="#!" class="item">
<div class="ts-icon is-user-icon"></div>
<div class="label">使用者</div>
</a>
<a href="#!" class="item">
<div class="ts-icon is-house-icon"></div>
<div class="label">首頁</div>
</a>
<a href="#!" class="item is-active">
<div class="ts-icon is-newspaper-icon"></div>
<div class="label">新聞</div>
</a>
</div>
</div>
<!-- / 導航列 -->
<div class="ts-space is-large"></div>
<!-- 表格 -->
<div class="ts-header">表格</div>
<div class="ts-space"></div>
<div class="ts-box">
<table class="ts-table">
<thead>
<tr>
<th>#</th>
<th>名稱</th>
<th>英文名稱</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>半音商業銀行</td>
<td>Flat Bank</td>
</tr>
<tr>
<td>2</td>
<td>對空音商事有限公司</td>
<td>Sorae & Co., Ltd.</td>
</tr>
<tr>
<td>3</td>
<td>卡莉絲伊繁星</td>
<td>Caris Events</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">統計筆數：3</th>
</tr>
</tfoot>
</table>
</div>
<!-- / 表格 -->
</div>
<!-- / 中間 -->
<!-- 右側 -->
<div class="column is-4-wide">
<!-- 導覽標記 -->
<div class="ts-header">導覽標記</div>
<div class="ts-space"></div>
<div class="ts-segment is-secondary">
<div class="ts-breadcrumb is-chevroned">
<a class="item">電影</a>
<a class="item">科幻與冒險</a>
<a class="item">星際效應</a>
</div>
</div>
<!-- / 導覽標記 -->
<div class="ts-space is-large"></div>
<!-- 預置內容 -->
<div class="ts-header">預置內容</div>
<div class="ts-space"></div>
<div class="ts-segment">
<div class="ts-placeholder">
<div class="image is-header"></div>
<div class="text"></div>
<div class="text"></div>
</div>
</div>
<!-- / 預置內容 -->
<div class="ts-space is-large"></div>
<!-- 國旗 -->
<div class="ts-header">國旗</div>
<div class="ts-space is-small"></div>
<span class="ts-flag is-rounded is-taiwan-flag"></span>
<span class="ts-flag is-rounded is-america-flag"></span>
<span class="ts-flag is-rounded is-hong-kong-flag"></span>
<span class="ts-flag is-rounded is-south-korea-flag"></span>
<span class="ts-flag is-rounded is-sweden-flag"></span>
<span class="ts-flag is-rounded is-poland-flag"></span>
<span class="ts-flag is-rounded is-bordered is-japan-flag"></span>
<span class="ts-flag is-rounded is-india-flag"></span>
<span class="ts-flag is-rounded is-nigeria-flag"></span>
<!-- / 國旗 -->
<div class="ts-space is-large"></div>
<!-- 評分 -->
<div class="ts-header">評分</div>
<div class="ts-space is-small"></div>
<div class="ts-rating is-yellow">
<div class="star is-active"></div>
<div class="star is-active"></div>
<div class="star"></div>
</div>
<div class="ts-rating is-red">
<div class="heart is-active"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
<!-- / 評分 -->
<div class="ts-space is-large"></div>
<!-- 項目切換 -->
<div class="ts-header">項目切換</div>
<div class="ts-space is-small"></div>
<div class="ts-selection is-fluid is-circular">
<label class="item">
<input type="radio" name="performance" checked />
<div class="text">省電</div>
</label>
<label class="item">
<input type="radio" name="performance" />
<div class="text">平衡</div>
</label>
<label class="item">
<input type="radio" name="performance" />
<div class="text">高效能</div>
</label>
</div>
<!-- / 項目切換 -->
</div>
<!-- / 右側 -->
</div>
</div>
<div class="主要內容-內容區塊-藝廊格局-次要">
<div class="主要內容-內容區塊-藝廊格局-標題">明暗主題與響應式設計</div>
<div class="主要內容-內容區塊-藝廊格局-說明">支援暗黑模式且有針對行動裝置所設計的介面密度樣式。</div>
<a href="./responsive.html" class="主要內容-內容區塊-藝廊格局-按鈕">檢視相關資訊</a>
</div>
<div class="主要內容-內容區塊-藝廊格局-次要">
<div class="主要內容-內容區塊-藝廊格局-標題">鬆離耦合性</div>
<div class="主要內容-內容區塊-藝廊格局-說明">Tocas UI 元件以原子化設計令其能夠相互組合使用。</div>
<a href="./button.html" class="主要內容-內容區塊-藝廊格局-按鈕">檢視元件</a>
</div>
<div class="主要內容-內容區塊-藝廊格局-次要">
<div class="主要內容-內容區塊-藝廊格局-標題">臨機應變</div>
<div class="主要內容-內容區塊-藝廊格局-說明">想做電商平臺？沒問題。管理介面？沒問題。社群網站？沒問題。</div>
<a href="./examples.html" class="主要內容-內容區塊-藝廊格局-按鈕">檢視範例</a>
</div>
</div>
</div>
</div>
<div class="主要內容-準備區塊 主要內容-內容區塊 is-light">
<div class="主要內容-準備區塊-標題">準備好了嗎？</div>
<div class="主要內容-準備區塊-說明">複製下列 HTML 標籤至你的網頁，然後盡情地大鬧一番。</div>
<div class="主要內容-準備區塊-程式碼"><pre><code class="hljs"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/tocas/4.2.3/tocas.min.css"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/tocas/4.2.3/tocas.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
</div>
<div class="主要內容-準備區塊-行動號召">
<a href="./getting-started.html" class="主要內容-準備區塊-行動號召-動作">開始使用</a>
</div>
</div>
</div>
<div class="頁腳">
<div class="界限容器">
<div class="頁腳-導航列">
<button class="頁腳-導航列-項目 頁腳-導航列-項目_回到頂部"><span class="ts-icon is-arrow-up-icon"></span> 回到頂部</button>
<a class="頁腳-導航列-項目" href="https://github.com/teacat/tocas" target="_blank">GitHub</a>
<a class="頁腳-導航列-項目" href="./getting-started.html">開始使用</a>
<a class="頁腳-導航列-項目" href="./button.html">元件樣式</a>
<a class="頁腳-導航列-項目" href="./examples.html">實際範例</a>
</div>
<div class="頁腳-格局">
<div class="頁腳-格局-資訊">
<div class="頁腳-格局-資訊-文字">由來自 <span class="ts-flag is-taiwan-flag is-small"></span> 台灣的 <a href="https://twitter.com/YamiOdymel" target="_blank">Yami Odymel</a> 所設計，當然還有<a href="https://github.com/teacat/tocas/graphs/contributors" target="_blank">貢獻者們</a>的愛心❤️。原始碼授權方式為 <a href="https://github.com/teacat/tocas/blob/master/LICENSE" target="_blank">MIT</a>，文件則為 <a href="https://creativecommons.org/publicdomain/zero/1.0/deed.zh_TW" target="_blank">CC 0</a> 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是<a href="https://caris.events" target="_blank">卡莉絲伊繁星</a>的設計語言，而卡莉絲伊繁星屬<a href="https://sorae.co" target="_blank">對空音商事</a>。</div>
<div class="頁腳-格局-資訊-翻譯者">台灣正體語系協作者：<a href="https://twitter.com/YamiOdymel" target="_blank">Yami Odymel</a>、coin3x、<a href="https://www.sean.taipei/" target="_blank">Sea-n</a></div>
</div>
<div class="頁腳-格局-商標">
<img class="頁腳-格局-商標-圖片" src="./assets/images/caris-events.svg" alt='擁有 Tocas UI 的所屬組織商標'/>
</div>
</div>
</div>
</div>
</body>
</html>