From 54ddab796927edeb6aecd6978db076961d1de7ec Mon Sep 17 00:00:00 2001 From: YamiOdymel Date: Sun, 10 Apr 2022 00:18:27 +0800 Subject: [PATCH] 4.0.0-beta.2 --- README-tw.md | 4 +- README.md | 4 +- docs/zh-tw/getting-started.html | 964 ++++++++---------- docs/zh-tw/index.html | 4 +- .../zh-tw/components/getting-started.yml | 4 +- languages/zh-tw/meta.yml | 4 +- package.json | 76 +- 7 files changed, 446 insertions(+), 614 deletions(-) diff --git a/README-tw.md b/README-tw.md index 300170e3..248a37ee 100644 --- a/README-tw.md +++ b/README-tw.md @@ -47,8 +47,8 @@ 只需要將下列 HTML 標籤複製至你的 `...` 網頁段落就可以開工了 🔥。 ```html - - + + ``` 又或者你喜歡 `npm` 的話…👀 diff --git a/README.md b/README.md index f53b81c1..6f8af50f 100644 --- a/README.md +++ b/README.md @@ -47,8 +47,8 @@ The fastest and most intuitive way to build diverse websites and progressive web Just copy the HTML tags to your `...` section and have a blast🔥. ```html - - + + ``` Or maybe you like `npm` 👀 diff --git a/docs/zh-tw/getting-started.html b/docs/zh-tw/getting-started.html index 2a998c09..4852f4fa 100644 --- a/docs/zh-tw/getting-started.html +++ b/docs/zh-tw/getting-started.html @@ -72,19 +72,13 @@
台灣正體
- - English (US) - - 台灣正體 -
GitHub @@ -98,19 +92,13 @@
台灣正體
- - English (US) - - 台灣正體 -
@@ -127,382 +115,147 @@
-
+
-
初入上手
- + - 開始使用 Getting Started + 開始使用 Getting Started - - - 主題色系 Colors - - - - 響應式設計 Responsive - - + + 主題色系 Colors + + 響應式設計 Responsive +
格局設計
- - - 箱型容器 Box - - - - 絕對置中 Center - - - - 界限容器 Container - - - - 內容區塊 Content - - - - 表單控制項 Control - - - - 網格系統 Grid - - - - 空白間隔 Space - - - - 水平排列 Row - - - - 間隔容器 Wrap - - + + 箱型容器 Box + + 絕對置中 Center + + 界限容器 Container + + 內容區塊 Content + + 表單控制項 Control + + 網格系統 Grid + + 空白間隔 Space + + 水平排列 Row + + 間隔容器 Wrap +
表單
- - - 按鈕 Button - - - - 核取方塊 Checkbox - - - - 欄位分組 Fieldset - - - - 檔案上傳 File - - - - 輸入欄位 Input - - - - 選項按鈕 Radio - - - - 下拉式選擇 Select - - - - 項目切換 Selection - - - - 指撥開關 Switch - - + + 按鈕 Button + + 核取方塊 Checkbox + + 欄位分組 Fieldset + + 檔案上傳 File + + 輸入欄位 Input + + 選項按鈕 Radio + + 下拉式選擇 Select + + 項目切換 Selection + + 指撥開關 Switch +
文字與段落
- - - 分隔線 Divider - - - - 標題 Header - - - - 內容遮罩 Mask - - - - 引言 Quote - - - - 片段 Segment - - - - 文字 Text - - + + 分隔線 Divider + + 標題 Header + + 內容遮罩 Mask + + 引言 Quote + + 片段 Segment + + 文字 Text +
視覺回饋
- - - 圓形量測計 Gauge - - - - 讀取狀態 Loading - - - - 彈出視窗 Modal - - - - 提示訊息 Notice - - - - 預置內容 Placeholder - - - - 步驟指示器 Procedure - - - - 進度條 Progress - - - - 簡短通知 Snackbar - - + + 圓形量測計 Gauge + + 讀取狀態 Loading + + 彈出視窗 Modal + + 提示訊息 Notice + + 預置內容 Placeholder + + 步驟指示器 Procedure + + 進度條 Progress + + 簡短通知 Snackbar +
多媒體與圖示
- - - 大頭貼 Avatar - - - - 國家旗幟 Flag - - - - 圖示 Icon - - - - 圖示項目 Iconset - - - - 多媒體圖片 Image - - - - 圖片組合 Imageset - - + + 大頭貼 Avatar + + 國家旗幟 Flag + + 圖示 Icon + + 圖示項目 Iconset + + 多媒體圖片 Image + + 圖片組合 Imageset +
資料顯示
- - - 可折疊內容 Accordion - - - - 計數徽章 Badge - - - - 檢查清單 Checklist - - - - 關聯標籤 Chip - - - - 關閉按鈕 Close - - - - 交談會話 Conversation - - - - 清單 List - - - - 中繼資料 Meta - - - - 評分 Rating - - - - 統計數據 Statistic - - - - 表格 Table - - + + 可折疊內容 Accordion + + 計數徽章 Badge + + 檢查清單 Checklist + + 關聯標籤 Chip + + 關閉按鈕 Close + + 交談會話 Conversation + + 清單 List + + 中繼資料 Meta + + 評分 Rating + + 統計數據 Statistic + + 表格 Table +
導覽
- - - 導覽標記 Breadcrumb - - - - 選單 Menu - - - - 頁數導覽列 Pagination - - - - 分頁籤 Tab - - + + 導覽標記 Breadcrumb + + 選單 Menu + + 頁數導覽列 Pagination + + 分頁籤 Tab +
應用程式
- - - 格局劃分 App Layout - - - - 導航列 App Navbar - - - - 側邊欄 App Sidebar - - + + 格局劃分 App Layout + + 導航列 App Navbar + + 側邊欄 App Sidebar +
@@ -515,406 +268,469 @@
- + - + - +
安裝與使用
- -

引用 Tocas UI 的檔案才能夠開始使用，你可以直接複製貼上或是下載原始碼供離線、自行使用。

-
- +

引用 Tocas UI 的檔案才能夠開始使用，你可以直接複製貼上或是下載原始碼供離線、自行使用。

- + - +
立即使用的免安裝線上 CDN 來源 -
-

這是由一家知名 CDN 公司 CloudFlare 所提供的免費服務並且提供夠快的服務速度，這使你不需要下載 Tocas UI，只需要將下列標籤放置於 HTML 中的 <head> .. </head> 處即可，該公司提供可靠的上線時間令你毋須擔心。

-
+
+

+ 這是由一家知名 CDN 公司 CloudFlare 所提供的免費服務並且提供夠快的服務速度，這使你不需要下載 Tocas UI，只需要將下列標籤放置於 HTML 中的 + <head> .. </head> 處即可，該公司提供可靠的上線時間令你毋須擔心。 +

+
- + - - 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.0.0-beta.1/tocas.css">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.0.0-beta.1/tocas.js"></script>
-
- + +
+ 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.0.0-beta.2/tocas.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.0.0-beta.2/tocas.js"></script>
+
+ - +
- +
自行下載 Tocas UI -
-

你也可以到 Tocas UI 的官方 Github 下載樣式然後取出其中的 /dist 資料夾並像下面這樣引用 Tocas UI 檔案。使用此安裝方式的好處是可以確保樣式不會因為遠端的伺服器離線而遺失。

-
+
+

+ 你也可以到 Tocas UI 的官方 Github 下載樣式然後取出其中的 /dist 資料夾並像下面這樣引用 + Tocas UI 檔案。使用此安裝方式的好處是可以確保樣式不會因為遠端的伺服器離線而遺失。 +

+
- + - - 
<link rel="stylesheet" href="./tocas/dist/tocas.min.css">
+
+                            

+                                
<link rel="stylesheet" href="./tocas/dist/tocas.min.css">
 <script src="./tocas/dist/tocas.min.js"></script>

-

-                            
+
+ - +
- +
以 NPM 安裝 -
-

Tocas UI 也能夠從 NPM 中直接安裝，執行下列指令後引用最重要的 @tocas/dist/tocas.min.css 和 @tocas/dist/tocas.min.js 檔案即可。

-
+
+

+ Tocas UI 也能夠從 NPM 中直接安裝，執行下列指令後引用最重要的 + @tocas/dist/tocas.min.css 和 @tocas/dist/tocas.min.js 檔案即可。 +

+
- + - - 
npm i tocas
-
- + +
+ 
npm i tocas
+
+ - +
- + - +
使用須知
- -

需要注意 HTML 和設計上是否有達到這些要求。

-
- +

需要注意 HTML 和設計上是否有達到這些要求。

- + - +
網頁字型 -
-

目前 Tocas UI 使用下列字型在各個系統（如：Ubuntu、macOS、Windows）。

+
+

目前 Tocas UI 使用下列字型在各個系統（如：Ubuntu、macOS、Windows）。

-
"Noto Sans TC", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", "Microsoft JhengHei", wf_SegoeUI, "Segoe UI", Segoe, "Segoe WP", Tahoma, Verdana, Ubuntu, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, 微軟正黑體, "LiHei Pro", "WenQuanYi Micro Hei", "Droid Sans Fallback", "AR PL UMing TW", Roboto, "Helvetica Neue", "Hiragino Maru Gothic ProN", メイリオ, "ヒラギノ丸ゴ ProN W4", Meiryo, "Droid Sans", sans-serif
+                                
"Noto Sans TC", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", "Microsoft JhengHei", wf_SegoeUI, "Segoe UI", Segoe, "Segoe WP", Tahoma, Verdana, Ubuntu, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, 微軟正黑體, "LiHei Pro", "WenQuanYi Micro Hei", "Droid Sans Fallback", "AR PL UMing TW", Roboto, "Helvetica Neue", "Hiragino Maru Gothic ProN", メイリオ, "ヒラギノ丸ゴ ProN W4", Meiryo, "Droid Sans", sans-serif
 

 
-
由於每個系統的字型仍有差異，我們建議你直接在 HTML 中的 <head> .. </head> 引用 Google Fonts 的 Noto Sans TC 思源黑體字型，這樣便能在不同裝置與系統統一呈現效果而沒有誤差。

-
+

+ 由於每個系統的字型仍有差異，我們建議你直接在 HTML 中的 <head> .. </head> 引用 Google Fonts 的 + Noto Sans TC 思源黑體字型，這樣便能在不同裝置與系統統一呈現效果而沒有誤差。 +

+
- + - - 
<link rel="preconnect" href="https://fonts.googleapis.com" />
+
+                            

+                                
<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" />

-

-                            
+
+ - +
- +
HTML5 與響應式設計 -
-

請確定有透過 <!DOCTYPE HTML> 將網頁宣告成 HTML5。Tocas UI 支援響應式設計，相關內容請參閱響應式設計頁面。

-
+
+

+ 請確定有透過 <!DOCTYPE HTML> 將網頁宣告成 HTML5。Tocas UI 支援響應式設計，相關內容請參閱響應式設計頁面。 +

+
- + - + - +
- + - +
與其他框架比較
- -

當我們在打造 Tocas UI 時，我們參考了許多現有框架的設計，同時我們也依據以往的經驗而避免了不少的問題。這裡簡略分析 Tocas UI 與其他現今的元件框架的不同之處。

-
- +
+

+ 當我們在打造 Tocas UI 時，我們參考了許多現有框架的設計，同時我們也依據以往的經驗而避免了不少的問題。這裡簡略分析 Tocas UI + 與其他現今的元件框架的不同之處。 +

+
- + - +
Bootstrap -
-

Bootstrap 是個常見但使用率已經逐漸降低的框架，過多雜亂的樣式名稱（如：m-l-1、p-x-2、m-x-auto）並不能夠一眼就看出這些樣式所具備的意義、過於鬆散的元件使得無法適用於一個更緊緻的視覺設計需求（如：行動版網站）。

- -

相較之下 Tocas UI 的元件命名（如：is-large、is-spaced）更有意義。針對不同的設計情境時，Tocas UI 元件亦提供了密度樣式可減少元件多餘的空白與間隙。

- -

在 HTML 結構與命名部分，Bootstrap 常為了要補足某些缺陷、排列而新增過多不必要的結構（如：carousel-inner、navbar-nav）這些過度仰賴特定元件的子元素令使用者在開發時不利於記憶。

- -

Bootstrap 所提供的元件數量過少已不符合現今設計的需求，其排版、格局多數情況下並沒有辦法湊合使用，導致設計時須不斷地覆蓋其樣式才能達成目的。在 Bootstrap 推出可供使用者自訂 SASS 變數後，其建置過程也變得更加煩躁令專案在剛入手時有一定的困難。

- -

Tocas UI 的使用方式十分簡單，僅須複製貼上其 CSS 引用網址便能直接使用；元件數量也眾多，較能符合在設計現代應用程式與網頁的需求。

- -
    -
  • 元件間隙過大而不適合用於設計行動裝置介面。
    • -
  • 樣式命名過於簡化而難以辨識，結構過於複雜。
    • -
  • 缺少符合現代設計應用情境的元件。
    • -
  • 網格與排版系統較不像 Tocas UI 那樣地彈性。
    • -
-
+
+

+ Bootstrap + 是個常見但使用率已經逐漸降低的框架，過多雜亂的樣式名稱（如：m-l-1、p-x-2、m-x-auto）並不能夠一眼就看出這些樣式所具備的意義、過於鬆散的元件使得無法適用於一個更緊緻的視覺設計需求（如：行動版網站）。 +

+ +

+ 相較之下 Tocas UI 的元件命名（如：is-large、is-spaced）更有意義。針對不同的設計情境時，Tocas UI + 元件亦提供了密度樣式可減少元件多餘的空白與間隙。 +

+ +

+ 在 HTML 結構與命名部分，Bootstrap + 常為了要補足某些缺陷、排列而新增過多不必要的結構（如：carousel-inner、navbar-nav）這些過度仰賴特定元件的子元素令使用者在開發時不利於記憶。 +

+ +

+ Bootstrap 所提供的元件數量過少已不符合現今設計的需求，其排版、格局多數情況下並沒有辦法湊合使用，導致設計時須不斷地覆蓋其樣式才能達成目的。在 + Bootstrap 推出可供使用者自訂 SASS 變數後，其建置過程也變得更加煩躁令專案在剛入手時有一定的困難。 +

+ +

Tocas UI 的使用方式十分簡單，僅須複製貼上其 CSS 引用網址便能直接使用；元件數量也眾多，較能符合在設計現代應用程式與網頁的需求。

+ +
    +
  • 元件間隙過大而不適合用於設計行動裝置介面。
    • +
  • 樣式命名過於簡化而難以辨識，結構過於複雜。
    • +
  • 缺少符合現代設計應用情境的元件。
    • +
  • 網格與排版系統較不像 Tocas UI 那樣地彈性。
    • +
+
- + - + - +
- +
Semantic UI / Fomantic UI -
-

Semantic UI 的維護已不再活躍且多數的問題無法得到修正。鑑於此事，開源社群自行衍生了名為 Fomantic UI 的第三方框架，但仍受到 Semantic UI 早期架構而在後期更新有所限制。

- -

為了迎合不同大眾的設計需求，Semantic UI 擁有自訂主題的功能，但後續的更新破壞了這些樣式且無人修繕。相反地，Tocas UI 起初就假設框架無法適用於所有人，我們便能在設計時省略過多不必要的功能並著重在真正重要的部份。

- -

Semantic UI 的樣式命名是最大的特色但問題也隨之而來，例如一個 large button 大型按鈕套用響應式設計時的 large device only 其 large 樣式便會導致樣式衝突而發生預期以外的問題。

- -

Semantic UI 基於 jQuery 的 JavaScript 模組在設計時能近乎涵蓋所有需求，但隨著現今 JavaScript 的框架崛起（如：Svelte、Vue、React）這些功能在結合上則衍生了不小問題，如：資料雙向綁定、事件監聽。

- -

舉例來說，Vue 的資料變更時並沒有辦法直接映射到 Semantic UI 的元件內容值上，必須重新呼叫 Semantic UI 的重新渲染機制才能讓整個頁面的資料同步。相反地，使用者在 Semantic UI 做出的資料變更（如：下拉式選單）也沒有辦法觸發在 Vue 裡已經寫好的函式。

- -

為了解決這個問題，Tocas UI 決定最小化 JavaScript 的干涉並盡量地沿用系統原生元素而不是自己另外打造出一個狀態管理系統。

- -
    -
  • 社群已經不再提供維護。
    • -
  • 命名方式導致樣式衝突且無法修正。
    • -
  • 無法移除的 jQuery 相依性。
    • -
  • JavaScript 模組無法與現今的前端框架妥善搭配。
    • -
-
+
+

+ Semantic UI 的維護已不再活躍且多數的問題無法得到修正。鑑於此事，開源社群自行衍生了名為 Fomantic UI 的第三方框架，但仍受到 Semantic UI + 早期架構而在後期更新有所限制。 +

+ +

+ 為了迎合不同大眾的設計需求，Semantic UI 擁有自訂主題的功能，但後續的更新破壞了這些樣式且無人修繕。相反地，Tocas UI + 起初就假設框架無法適用於所有人，我們便能在設計時省略過多不必要的功能並著重在真正重要的部份。 +

+ +

+ Semantic UI 的樣式命名是最大的特色但問題也隨之而來，例如一個 large button 大型按鈕套用響應式設計時的 + large device only 其 large 樣式便會導致樣式衝突而發生預期以外的問題。 +

+ +

+ Semantic UI 基於 jQuery 的 JavaScript 模組在設計時能近乎涵蓋所有需求，但隨著現今 JavaScript + 的框架崛起（如：Svelte、Vue、React）這些功能在結合上則衍生了不小問題，如：資料雙向綁定、事件監聽。 +

+ +

+ 舉例來說，Vue 的資料變更時並沒有辦法直接映射到 Semantic UI 的元件內容值上，必須重新呼叫 Semantic UI + 的重新渲染機制才能讓整個頁面的資料同步。相反地，使用者在 Semantic UI 做出的資料變更（如：下拉式選單）也沒有辦法觸發在 Vue 裡已經寫好的函式。 +

+ +

為了解決這個問題，Tocas UI 決定最小化 JavaScript 的干涉並盡量地沿用系統原生元素而不是自己另外打造出一個狀態管理系統。

+ +
    +
  • 社群已經不再提供維護。
    • +
  • 命名方式導致樣式衝突且無法修正。
    • +
  • 無法移除的 jQuery 相依性。
    • +
  • JavaScript 模組無法與現今的前端框架妥善搭配。
    • +
+
- + - + - +
- +
Foundation -
-

Foundation 在設計上較為生硬且缺少了許多可供點綴的樣式（如：圓角按鈕），其部份帶有陰影的設計趨近於以往的 Bootstrap 版本，這可能給予使用者一種沈重感。相較之下，Tocas UI 提供許多個性化的樣式並移除了多數的陰影設計，讓使用者在瀏覽時不會感到壓力。

- -
    -
  • 可供點綴的裝飾樣式過少。
    • -
  • 沈重的陰影設計可能帶給使用者壓力感。
    • -
  • 設計採用直角且略帶生硬。
    • -
-
+
+

+ Foundation 在設計上較為生硬且缺少了許多可供點綴的樣式（如：圓角按鈕），其部份帶有陰影的設計趨近於以往的 Bootstrap + 版本，這可能給予使用者一種沈重感。相較之下，Tocas UI 提供許多個性化的樣式並移除了多數的陰影設計，讓使用者在瀏覽時不會感到壓力。 +

+ +
    +
  • 可供點綴的裝飾樣式過少。
    • +
  • 沈重的陰影設計可能帶給使用者壓力感。
    • +
  • 設計採用直角且略帶生硬。
    • +
+
- + - + - +
- +
Tailwind CSS / Tachyons -
-

雖然不能相互比較，但 Tailwind CSS 是近幾年來前端開發容易被採用的設計方式，比起框架這更像是設計的輔助工具。Tailwind CSS 與 Tachyons 的理念相近，這兩個框架並沒有元件觀念。這意味著你將需要透過 Tailwind CSS 內建的輔助樣式自行建立需要的元件。

- -

通常使用 Tailwind CSS 會搭配 Node.js 預處理器（Preprocessor）來輔助（如：移除無用的多餘樣式），這令使用 Tailwind CSS 的專案都無法避免使用 Node.js 和其龐大且沈重的 npm 相依性套件。

- -

無論是 Tailwind CSS 還是 Tachyons 在樣式命名上有著與 Bootstrap 一樣厭垢並且更難以令人捉摸的問題，如：mr4 其實是 margin-right: 1rem;。在設計時，元素上會有過多的樣式如：fw6 f3 f2-ns lh-title mt0 mb3，這些都將導致未來整合有所困難。重複使用元件時須不斷地複製貼上其樣式而導致專案原始碼大小急劇增加。

- -

為了解決這個問題，Tailwind CSS 通常僅用於已經有 Vue、React 或 Svelte 這樣的 JavaScript 框架的專案。

- -

Tailwind CSS 像是讓開發者能夠自行設計一套元件庫而提供的輔助樣式；Tocas UI 則是已經為網頁、應用程式所設計數個可立即應用的元件且不須額外安裝任何 Node.js 相依性套件，更適用於非設計師專職的一般開發者、初心者。

- -
    -
  • 開發者須自行從頭打造，沒有現成元件可供使用。
    • -
  • 無法避免的 Node.js 相依性使專案需要大量前置作業。
    • -
  • 樣式名稱眾多且不直覺，開發時須翻閱說明文件。
    • -
  • 開發者須具備進階的 CSS 知識。
    • -
-
+
+

+ 雖然不能相互比較，但 Tailwind CSS 是近幾年來前端開發容易被採用的設計方式，比起框架這更像是設計的輔助工具。Tailwind CSS 與 Tachyons + 的理念相近，這兩個框架並沒有元件觀念。這意味著你將需要透過 Tailwind CSS 內建的輔助樣式自行建立需要的元件。 +

+ +

+ 通常使用 Tailwind CSS 會搭配 Node.js 預處理器（Preprocessor）來輔助（如：移除無用的多餘樣式），這令使用 Tailwind CSS 的專案都無法避免使用 + Node.js 和其龐大且沈重的 npm 相依性套件。 +

+ +

+ 無論是 Tailwind CSS 還是 Tachyons 在樣式命名上有著與 Bootstrap 一樣厭垢並且更難以令人捉摸的問題，如：mr4 其實是 + margin-right: 1rem;。在設計時，元素上會有過多的樣式如：fw6 f3 f2-ns lh-title mt0 mb3，這些都將導致未來整合有所困難。重複使用元件時須不斷地複製貼上其樣式而導致專案原始碼大小急劇增加。 +

+ +

為了解決這個問題，Tailwind CSS 通常僅用於已經有 Vue、React 或 Svelte 這樣的 JavaScript 框架的專案。

+ +

+ Tailwind CSS 像是讓開發者能夠自行設計一套元件庫而提供的輔助樣式；Tocas UI 則是已經為網頁、應用程式所設計數個可立即應用的元件且不須額外安裝任何 + Node.js 相依性套件，更適用於非設計師專職的一般開發者、初心者。 +

+ +
    +
  • 開發者須自行從頭打造，沒有現成元件可供使用。
    • +
  • 無法避免的 Node.js 相依性使專案需要大量前置作業。
    • +
  • 樣式名稱眾多且不直覺，開發時須翻閱說明文件。
    • +
  • 開發者須具備進階的 CSS 知識。
    • +
+
- + - + - +
- + - +
雜談
- -

一些和 Tocas UI 相關的開發歷程，還有其中瑣碎的事物。

-
- +

一些和 Tocas UI 相關的開發歷程，還有其中瑣碎的事物。

- + - +
勇敢地使用行內樣式 -
-

Tocas UI 並不是萬靈丹，這更像是一個元件庫。設計應用程式介面時十分地方便，但作為自由發揮的設計而言，一定沒有辦法從頭到尾都只使用 Tocas UI。

+
+

Tocas UI 並不是萬靈丹，這更像是一個元件庫。設計應用程式介面時十分地方便，但作為自由發揮的設計而言，一定沒有辦法從頭到尾都只使用 Tocas UI。

-

在這種情況下我們鼓勵你直接透過 HTML 的 style 標籤，直接對該容器、元素進行樣式的修改。就像 Tailwind UI 那樣，不需要特別花費時間整理出一個 my-style.css 來好好地規劃樣式，直接在 HTML 中修改樣式令其影響一目了然。

-
+

+ 在這種情況下我們鼓勵你直接透過 HTML 的 style 標籤，直接對該容器、元素進行樣式的修改。就像 Tailwind UI + 那樣，不需要特別花費時間整理出一個 my-style.css 來好好地規劃樣式，直接在 HTML 中修改樣式令其影響一目了然。 +

+
- + - + - +
- +
減少 JavaScript 模組的干涉 -
-

現今的應用程式或是網頁都有許多輔助框架可以選擇，例如：Vue、React、Svelte…甚至是 Web Components。

+
+

現今的應用程式或是網頁都有許多輔助框架可以選擇，例如：Vue、React、Svelte…甚至是 Web Components。

-

我們曾在 Tocas UI 花費數年的時間替不同輔助框架打造對應的元件，但最終的維護過於繁雜而作罷。每個框架對於 Web Components 的支援度和實作方式都有所不同，令資料綁定（Data Binding）上有非常大的困難。

+

+ 我們曾在 Tocas UI 花費數年的時間替不同輔助框架打造對應的元件，但最終的維護過於繁雜而作罷。每個框架對於 Web Components + 的支援度和實作方式都有所不同，令資料綁定（Data Binding）上有非常大的困難。 +

-

這些問題到目前都還沒能被解決，而我們也決定不再這個地方花費過多的時間琢磨，最終 Tocas UI 的設計不再以 JavaScript 為主。

+

這些問題到目前都還沒能被解決，而我們也決定不再這個地方花費過多的時間琢磨，最終 Tocas UI 的設計不再以 JavaScript 為主。

-

猶如 Tailwind UI 那樣，Tocas UI 未來僅會單純提供基本的 JavaScript 輔助函式用來協助使用者更快速地將自己正在使用的框架能夠與 Tocas UI 結合，而不是呼叫 Tocas UI 的 JavaScript 模組來達成資料綁定、元件功能，因為這些事情都應該交由框架執行。

-
+

+ 猶如 Tailwind UI 那樣，Tocas UI 未來僅會單純提供基本的 JavaScript 輔助函式用來協助使用者更快速地將自己正在使用的框架能夠與 Tocas UI + 結合，而不是呼叫 Tocas UI 的 JavaScript 模組來達成資料綁定、元件功能，因為這些事情都應該交由框架執行。 +

+
- + - + - +
- + - - - +
- +
@@ -931,8 +747,24 @@
-
由來自 台灣的 Yami Odymel 所設計，當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT，文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言，而卡莉絲伊繁星屬對空音商事有限公司。
-
台灣正體語系協作者：Yami Odymel、coin3x、Sea-n
+
+ 由來自 台灣的 + Yami Odymel 所設計，當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT，文件則為 + CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言，而卡莉絲伊繁星屬對空音商事有限公司。 +
+
+ 台灣正體語系協作者：Yami Odymel、coin3x、Sea-n +
diff --git a/docs/zh-tw/index.html b/docs/zh-tw/index.html index a07e3f7c..75ea5722 100644 --- a/docs/zh-tw/index.html +++ b/docs/zh-tw/index.html @@ -470,8 +470,8 @@
準備好了嗎？
複製下列 HTML 標籤至你的網頁，然後盡情地大鬧一番。
- 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.0.0-beta.1/tocas.css">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.0.0-beta.1/tocas.js"></script>
+ 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.0.0-beta.2/tocas.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.0.0-beta.2/tocas.js"></script>
開始使用 diff --git a/languages/zh-tw/components/getting-started.yml b/languages/zh-tw/components/getting-started.yml index 02376f60..a1322f88 100644 --- a/languages/zh-tw/components/getting-started.yml +++ b/languages/zh-tw/components/getting-started.yml @@ -25,8 +25,8 @@ Definitions: Description: | 這是由一家知名 CDN 公司 CloudFlare 所提供的免費服務並且提供夠快的服務速度，這使你不需要下載 Tocas UI，只需要將下列標籤放置於 HTML 中的 ` .. ` 處即可，該公司提供可靠的上線時間令你毋須擔心。 AttachedHTML: | - - + + - Title: 自行下載 Tocas UI Anchor: Download diff --git a/languages/zh-tw/meta.yml b/languages/zh-tw/meta.yml index d0ae1554..6b0fd88d 100644 --- a/languages/zh-tw/meta.yml +++ b/languages/zh-tw/meta.yml @@ -124,8 +124,8 @@ UI: Index_LetsGo_Title: 準備好了嗎？ Index_LetsGo_Description: 複製下列 HTML 標籤至你的網頁，然後盡情地大鬧一番。 Index_LetsGo_Code: > - - + + Index_LetsGo_Action: 開始使用 diff --git a/package.json b/package.json index eb3debe2..81e59d75 100644 --- a/package.json +++ b/package.json @@ -1,41 +1,41 @@ { - "name": "tocas", - "version": "4.0.0-beta.1", - "description": "The fastest and most intuitive way to build diverse websites and progressive web application interfaces.", - "directories": { - "doc": "docs", - "example": "examples" - }, - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/teacat/tocas.git" - }, - "keywords": [ - "tocas", - "css3", - "ui", - "html5", - "rwd" - ], - "autoupdate": { - "source": "git", - "target": "git://github.com/teacat/tocas.git", - "fileMap": [ - { - "basePath": "dist", - "files": [ - "**/*" + "name": "tocas", + "version": "4.0.0-beta.2", + "description": "The fastest and most intuitive way to build diverse websites and progressive web application interfaces.", + "directories": { + "doc": "docs", + "example": "examples" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/teacat/tocas.git" + }, + "keywords": [ + "tocas", + "css3", + "ui", + "html5", + "rwd" + ], + "autoupdate": { + "source": "git", + "target": "git://github.com/teacat/tocas.git", + "fileMap": [ + { + "basePath": "dist", + "files": [ + "**/*" + ] + } ] - } - ] - }, - "author": "Yami Odymel ", - "license": "MIT", - "bugs": { - "url": "https://github.com/teacat/tocas/issues" - }, - "homepage": "https://github.com/teacat/tocas#readme" + }, + "author": "Yami Odymel ", + "license": "MIT", + "bugs": { + "url": "https://github.com/teacat/tocas/issues" + }, + "homepage": "https://github.com/teacat/tocas#readme" }