











Grid
Header
Icon
Iconset
Image




<div class="ts-image is-disabled is-small">
@@ -545,7 +549,7 @@
-
+
<div class="ts-image is-rounded is-small">
@@ -580,7 +584,7 @@
-
+
<div class="ts-image is-circular is-small">
@@ -615,7 +619,7 @@
-
+
<div class="ts-image is-bordered is-small">
@@ -650,7 +654,7 @@
-
+
<div class="ts-image is-centered is-small">
@@ -685,7 +689,7 @@
-
+
<div class="ts-image is-covered">
@@ -720,15 +724,15 @@
-
+
-
+
-
+
<div class="ts-image is-1-by-1 is-covered">
@@ -770,15 +774,15 @@
相較於稱呼自己是間「科技公司」,我們
-
+
的運作模式更像是所「學校」。雖然卡莉絲伊繁星提供網際網路服務與電子科技產業的相關產品,但我們更注重人們是否能在開發的過程
-
+
中有所收穫並學以致用,而我們也十分地重視一項產品是否能夠達成社會的期許並希望能藉此改變某些人的生活,協助大眾
-
+
更向自己的目標邁進;這也正是伊繁星最高協議被創造的原因。
@@ -868,15 +872,15 @@
-
+
-
+
-
+
<div class="ts-image is-tiny">
@@ -922,7 +926,7 @@
-
+
@@ -985,7 +989,7 @@
-
+
diff --git a/docs/en-us/imageset.html b/docs/en-us/imageset.html
index 4a3fac41e..23df59855 100644
--- a/docs/en-us/imageset.html
+++ b/docs/en-us/imageset.html
@@ -1,5 +1,5 @@
-
+
@@ -113,13 +113,13 @@
-
+
-
+
- Imageset
+ Imageset
A collection of the images.
@@ -359,6 +359,10 @@
Breadcrumb
+
+ Dropdown
+
+
Menu
@@ -395,7 +399,7 @@
-
+
@@ -451,13 +455,13 @@
-
+
-
+
-
+
@@ -511,16 +515,16 @@
-
+
-
+
-
+
-
+
@@ -568,16 +572,16 @@
-
+
-
+
-
+
-
+
@@ -625,13 +629,13 @@
-
+
-
+
-
+
@@ -676,37 +680,37 @@
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -773,7 +777,7 @@
-
+
@@ -811,7 +815,7 @@
-
+
diff --git a/docs/en-us/index.html b/docs/en-us/index.html
index 219762d60..1bc159d93 100644
--- a/docs/en-us/index.html
+++ b/docs/en-us/index.html
@@ -1,5 +1,5 @@
-
+
@@ -472,8 +472,8 @@
Ready to rock?
Copy the following HTML tags to your page and have a blast.
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.0.4/tocas.min.css">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.0.4/tocas.min.js"></script>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.1.0/tocas.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.1.0/tocas.min.js"></script>
Getting Started
@@ -484,7 +484,7 @@
-
+
diff --git a/docs/en-us/input.html b/docs/en-us/input.html
index 1a1cc09d9..92cd321ad 100644
--- a/docs/en-us/input.html
+++ b/docs/en-us/input.html
@@ -1,5 +1,5 @@
-
+
@@ -113,13 +113,13 @@
-
+
-
+
- Input
+ Input
A field used to elicit a response from a user.
@@ -359,6 +359,10 @@
Breadcrumb
+
+ Dropdown
+
+
Menu
@@ -395,7 +399,7 @@
-
+
@@ -795,41 +799,6 @@
-
-
-
- Fluid
-
- Code
-
-
- 寬度可以是符合父容器的。
-
-
-
-
-
-
-
-
-
- <div class="ts-input is-fluid">
- <input type="text" placeholder="個人簡介">
-</div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -936,12 +905,157 @@
+
+
+
+ Dense
+
+ Code
+
+
+ 變更元件的內距,令元素之間看起來更密集。
+
+
+
+
+
+
+
+
+
+ <div class="ts-input is-dense">
+ <input type="text" placeholder="使用者名稱">
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Types
+
+
+
+
+
+
+
+
+
+
+
+
+ Color
+
+ Code
+
+
+ 透過原生的輸入欄位選擇指定的顏色。
+
+
+
+
+
+
+
+
+
+ <div class="ts-input">
+ <input type="color">
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Date And Time
+
+ Code
+
+
+ HTML 有提供數種用於時間、日期與週期的輸入欄位。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <div class="ts-input">
+ <input type="datetime-local">
+</div>
+<div class="ts-input">
+ <input type="date">
+</div>
+<div class="ts-input">
+ <input type="time">
+</div>
+<div class="ts-input">
+ <input type="month">
+</div>
+<div class="ts-input">
+ <input type="week">
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
@@ -987,10 +1101,6 @@
Negative is-negative
-
- Fluid is-fluid
-
-
Side Icon is-start-icon
@@ -999,6 +1109,23 @@
Sizes is-small
+
+ Dense is-dense
+
+
+
+
+ Types
+
Back to Top
@@ -1012,7 +1139,7 @@
-
+
diff --git a/docs/en-us/list.html b/docs/en-us/list.html
index f7817b3bd..359a6e98b 100644
--- a/docs/en-us/list.html
+++ b/docs/en-us/list.html
@@ -1,5 +1,5 @@
-
+
@@ -113,13 +113,13 @@
-
+
-
+
- List
+ List
Groups the related content or lists the items.
@@ -359,6 +359,10 @@
Breadcrumb
+
+ Dropdown
+
+
Menu
@@ -395,7 +399,7 @@
-
+
@@ -699,7 +703,7 @@
-
+
@@ -742,7 +746,7 @@
-
+
diff --git a/docs/en-us/loading.html b/docs/en-us/loading.html
index 9d6806c43..64630a2c0 100644
--- a/docs/en-us/loading.html
+++ b/docs/en-us/loading.html
@@ -1,5 +1,5 @@
-
+
@@ -113,13 +113,13 @@
Loading
Dimmer




















Menu
選單是一個提供垂直可選項目清單的元件,如果希望建立一個左右水平的導覽選單則可以考慮使用分頁籤。
- -這個元件同時也被設計作為右鍵選單、下拉式選單的基礎設計,如果在網頁或是應用程式裡需要一個右鍵選單則可以考慮使用此選單元件並將其設為「下拉式選單的」來達成。
以較淺的文字說明特定項目。
-<div class="ts-box is-collapsed">
- <div class="ts-menu is-collapsed">
- <a class="item">
- 下載
- <span class="description">Ctrl + D</span>
- </a>
- <a class="item">
- 儲存圖片
- <span class="description">Ctrl + S</span>
- </a>
- <a class="item">
- 全選
- <span class="description">Ctrl + A</span>
- </a>
- </div>
-</div>
-Meta
Modal
使用時需自行搭配 JavaScript 操控元件的可見狀態。
-彈出視窗出現時會覆蓋整個畫面且使用者將無法與背景的元素互動,使用此元件時必須注意這件事情是否急迫到需要打斷使用者目前的操作。
+快顯視窗出現時會覆蓋整個畫面且使用者將無法與背景的元素互動,使用此元件時必須注意這件事情是否急迫到需要打斷使用者目前的操作。
這個元件是一個雛型框架,如果希望在其中建立標題、頁腳跟動作按鈕,則需自行搭配其他元件,可以參考底部的組合應用章節。
彈出視窗預設是隱藏的,必須指定為「可見的」才會顯示在頁面上。這個設計是為了讓 JavaScript 能夠切換其可見度。
+快顯視窗預設是隱藏的,必須指定為「可見的」才會顯示在頁面上。這個設計是為了讓 JavaScript 能夠切換其可見度。
Notice
Pagination
Placeholder
Procedure
Progress
當進度為零時,可以指定其狀態為空並隱藏進度條的背景。
+<div class="ts-progress is-empty">
+ <div class="bar" style="--value: 0;">
+ <div class="text">0%</div>
+ </div>
+</div>
+

Quote
Radio
Rating
響應式設計
Row
Segment
Select
表示選擇欄位目前正在被選取或是展開的樣子。若子元素裡包含彈出式選單則會一同連帶開啟。
+<div class="ts-select is-active">
+ <select>
+ <option>TeaMeow</option>
+ <option>Tunalog</option>
+ <option>EnekoCore</option>
+ </select>
+</div>
+在下拉選擇欄位中擺放更豐富的內容,如:圖示、旗幟或是大頭貼。
+ +使用此樣式的時候原生 HTML 選擇元素將無法使用,須搭配彈出式選單或是以 JavaScript 觸發其他元素。查看底部的組合應用章節來檢視如何使用。
+<div class="ts-select">
+ <div class="content">
+ <span class="ts-flag is-tw-flag"></span> Taiwan
+ </div>
+</div>
+下拉式選擇欄位能夠與彈出式選單一同使用。像 Facebook 貼文發表那樣,一個帶有圖示輔助的內容隱私設定欄位。
+<div class="ts-select is-active">
+ <div class="content">
+ <span class="ts-icon is-users-icon"></span> 所有人
+ </div>
+ <div class="ts-dropdown is-bottom">
+ <button class="item">
+ <span class="ts-icon is-users-icon"></span> 所有人
+ </button>
+ <button class="item is-selected">
+ <span class="ts-icon is-user-group-icon"></span> 僅有朋友
+ </button>
+ <button class="item">
+ <span class="ts-icon is-lock-icon"></span> 只限自己
+ </button>
+ </div>
+</div>
+在電子信箱或是標註人名時,常常會有一個可供新增更多使用者的下拉式選擇欄位。
+

<div class="ts-select is-fluid">
+ <div class="content">
+ <div class="ts-chip">
+ <div class="ts-image">
+ <img src="user.png" />
+ </div>
+ ゲオルイース
+ <button class="ts-close is-small"></button>
+ </div>
+ <div class="ts-chip">
+ <div class="ts-image">
+ <img src="user.png" />
+ </div>
+ グイーネ
+ <button class="ts-close is-small"></button>
+ </div>
+ </div>
+</div>
+-
+
+
- + Dropdown + + +