安裝與使用
將下列標籤放置於 HTML 中的 <head> .. </head>
處即可使用 Tocas UI,你也可以至 GitHub 下載離線使用。
<!-- 核心:Tocas UI -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/5.0.1/tocas.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas/5.0.1/tocas.min.js"></script>
<!-- 字體:Noto Sans TC -->
<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" />
<!-- 啟用:響應式設計 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
全域設定
Tocas UI 預設會依照使用者的系統設定自動變更亮暗主題,你可以覆寫這個設定。
說明 | |
---|---|
is-light | 強制使用亮色主題。 |
is-dark | 強制使用暗色主題。 |
<!-- 指定 `is-dark` 會讓整個頁面使用暗色主題 -->
<html class="is-dark">
變更元件的圓角程度,令其看起來更尖銳或是圓潤。
圓角尺寸 | 說明 | |
---|---|---|
is-sharp | 0rem | 沒有任何圓角且看似生硬。 |
0.4rem | Tocas UI 的預設圓角設定值。 | |
is-rounded | 1rem | 更有現代感的圓潤邊角。 |
<!-- 指定 `is-sharp` 會移除頁面裡所有元件的圓角 -->
<html class="is-sharp">