# Tocas UI [![](https://img.shields.io/npm/dt/tocas.svg)](https://www.npmjs.com/package/tocas) [![](https://img.shields.io/npm/v/tocas.svg)](https://github.com/teacat/tocas/releases) [![](https://img.shields.io/npm/l/tocas.svg)](https://github.com/teacat/tocas/blob/master/LICENSE)

以最快最直覺的方式，建構多樣的網站與漸進式網路應用程式介面。

- 📘 文件：[tocas-ui.com/5.0/zh-tw](https://tocas-ui.com/5.0/zh-tw) ([原始碼](https://github.com/teacat/tocas-docs))
- 🎲 範例：[tocas-ui.com/5.0/zh-tw/examples.html](https://tocas-ui.com/5.0/zh-tw/examples.html)
- 📦 原始碼：[GitHub](https://github.com/teacat/tocas) | [NPM](https://www.npmjs.com/package/tocas) | [cdnjs](https://cdnjs.com/libraries/tocas)
- 🌎 語系：**台灣正體**

&nbsp;

## 📀 開始使用！

只需要將下列 HTML 標籤複製至你的 `<head>...</head>` 網頁段落就可以開工了 🔥

```html
<!-- 核心：Tocas UI -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/5.0.3/tocas.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/5.0.3/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" />
```

&nbsp;

## 🚀 範例程式碼

```html
<!-- 按鈕 -->
<button class="ts-button">按鈕</button>

<!-- 標題 -->
<div class="ts-header">標題</div>

<!-- 輸入欄位 -->
<div class="ts-input">
    <input type="text" placeholder="搜尋…" />
</div>
```

- 📘 文件：[tocas-ui.com/5.0/zh-tw](https://tocas-ui.com/5.0/zh-tw) ([原始碼](https://github.com/teacat/tocas-docs))
- 🎲 範例：[tocas-ui.com/5.0/zh-tw/examples.html](https://tocas-ui.com/5.0/zh-tw/examples.html)

&nbsp;

## 👥 使用的原始碼

Tocas UI 使用且包含了下面套件的部份原始碼，謝謝他們 🥳！

- [FortAwesome/Font-Awesome](https://github.com/FortAwesome/Font-Awesome)
- [floating-ui/floating-ui](https://github.com/floating-ui/floating-ui)
- [lipis/flag-icons](https://github.com/lipis/flag-icons)

&nbsp;

## ❤️ 來自台灣的愛心

٩(ˊᗜˋ\*)و 由來自 🇹🇼 台灣的 [Yami Odymel](https://twitter.com/YamiOdymel) 所設計，當然還有[貢獻者們](https://github.com/teacat/tocas/graphs/contributors)的愛心 ❤️。原始碼授權方式為 [MIT](https://github.com/teacat/tocas/blob/master/LICENSE)，文件則為 [CC 0](https://creativecommons.org/publicdomain/zero/1.0/deed.zh_TW) 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是[卡莉絲伊繁星](https://caris.events/)的設計語言，而卡莉絲伊繁星屬[對空音商事](https://sorae.co/zh-tw.html)。
