Updated docs for few missing 4.2.0 features

teacat · Mar 3, 2023 · 96e915a · 96e915a
1 parent dfca8af
commit 96e915a
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 14 deletions.
diff --git a/docs/zh-tw/close.html b/docs/zh-tw/close.html
@@ -706,6 +706,37 @@ <h1 class="穹頂-標題-主要">關閉按鈕</h1>
                             <!-- / 圖示組 -->
                         </div>
 
+                        <div class="主體-格局-內容-單個範例">
+                            <a class="主體-格局-內容-單個範例-錨點" id="rounded"></a>
+                            <div class="主體-格局-內容-單個範例-文字-標題 主體-格局-內容-單個範例-文字-標題_段落">
+                                <a href="#rounded" class="主體-格局-內容-單個範例-文字-標題-連結">圓角的</a>
+
+                                <button class="主體-格局-內容-單個範例-文字-標題-切換原始碼"><span class="ts-icon is-code-icon"></span> 原始碼</button>
+
+                            </div>
+                            <div class="主體-格局-內容-單個範例-文字"><p>使按鈕的四個角落都變得稍微有點圓角修飾。</p>
+</div>
+
+                            <!-- 範例與程式碼 -->
+
+                            <div class="主體-格局-內容-單個範例-範例">
+                                <div class="主體-格局-內容-單個範例-範例-實際效果"><span class="ts-close is-rounded"></span>
+</div>
+                                <div class="主體-格局-內容-單個範例-範例-程式碼"><pre><code class="hljs">&lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"ts-close <mark>is-rounded</mark>"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span></code></pre>
+</div>
+                            </div>
+
+                            <!-- / 範例與程式碼 -->
+
+                            <!-- 附帶程式片段 -->
+
+                            <!-- / 附帶程式片段 -->
+
+                            <!-- 圖示組 -->
+
+                            <!-- / 圖示組 -->
+                        </div>
+
                         <div class="主體-格局-內容-單個範例">
                             <a class="主體-格局-內容-單個範例-錨點" id="sizes"></a>
                             <div class="主體-格局-內容-單個範例-文字-標題 主體-格局-內容-單個範例-文字-標題_段落">
@@ -723,10 +754,12 @@ <h1 class="穹頂-標題-主要">關閉按鈕</h1>
                                 <div class="主體-格局-內容-單個範例-範例-實際效果"><span class="ts-close is-small"></span>
 <span class="ts-close"></span>
 <span class="ts-close is-large"></span>
+<span class="ts-close is-big"></span>
 </div>
                                 <div class="主體-格局-內容-單個範例-範例-程式碼"><pre><code class="hljs">&lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"ts-close <mark>is-small</mark>"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span>
 &lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"ts-close"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span>
-&lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"ts-close <mark>is-large</mark>"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span></code></pre>
+&lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"ts-close <mark>is-large</mark>"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span>
+&lt;span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"ts-close <mark>is-big</mark>"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span></code></pre>
 </div>
                             </div>
 
@@ -964,6 +997,10 @@ <h1 class="穹頂-標題-主要">關閉按鈕</h1>
                                 不重要的 <span class="主體-格局-索引-清單-項目-英文">is-tertiary</span>
                             </a>
 
+                            <a class="主體-格局-索引-清單-項目" href="#rounded">
+                                圓角的 <span class="主體-格局-索引-清單-項目-英文">is-rounded</span>
+                            </a>
+
                             <a class="主體-格局-索引-清單-項目" href="#sizes">
                                 尺寸 <span class="主體-格局-索引-清單-項目-英文">is-small</span>
                             </a>

diff --git a/docs/zh-tw/dropdown.html b/docs/zh-tw/dropdown.html
@@ -1289,7 +1289,9 @@ <h1 class="穹頂-標題-主要">彈出式選單</h1>
                                 <button class="主體-格局-內容-單個範例-文字-標題-切換原始碼"><span class="ts-icon is-code-icon"></span> 原始碼</button>
 
                             </div>
-                            <div class="主體-格局-內容-單個範例-文字"><p>下拉式選單可以透過 <code>is-top</code>（上面）和 <code>is-bottom</code>（下面）選擇要貼齊父容器的哪邊，這同時會讓選單以流動的方式填滿左右寬度。如果父容器的寬度小於選單裡的項目，則會以項目寬度為主。</p>
+                            <div class="主體-格局-內容-單個範例-文字"><p>下拉式選單可以透過 <code>is-top</code>（上面）和 <code>is-bottom</code>（下面）選擇要貼齊父容器的哪邊，這同時會讓選單以流動的方式填滿左右寬度。如果容器的寬度小於選單裡的項目，則會以項目寬度為主。</p>
+
+<p>由於 CSS 的先天限制，如果項目會超出容器的寬度，請考慮使用 <code>is-top-center</code>（上面置中）與 <code>is-bottom-center</code>（下面置中）。</p>
 </div>
 
                             <!-- 範例與程式碼 -->

diff --git a/docs/zh-tw/input.html b/docs/zh-tw/input.html
@@ -1071,25 +1071,39 @@ <h1 class="穹頂-標題-主要">輸入欄位</h1>
                         </div>
 
                         <div class="主體-格局-內容-單個範例">
-                            <a class="主體-格局-內容-單個範例-錨點" id="dense"></a>
+                            <a class="主體-格局-內容-單個範例-錨點" id="density"></a>
                             <div class="主體-格局-內容-單個範例-文字-標題 主體-格局-內容-單個範例-文字-標題_段落">
-                                <a href="#dense" class="主體-格局-內容-單個範例-文字-標題-連結">較密的</a>
+                                <a href="#density" class="主體-格局-內容-單個範例-文字-標題-連結">密度</a>
 
                                 <button class="主體-格局-內容-單個範例-文字-標題-切換原始碼"><span class="ts-icon is-code-icon"></span> 原始碼</button>
 
                             </div>
-                            <div class="主體-格局-內容-單個範例-文字"><p>變更元件的內距，令元素之間看起來更密集。</p>
+                            <div class="主體-格局-內容-單個範例-文字"><p>變更輸入欄位的高度，看起來更緊密或是令人感到寬鬆。</p>
 </div>
 
                             <!-- 範例與程式碼 -->
 
                             <div class="主體-格局-內容-單個範例-範例">
                                 <div class="主體-格局-內容-單個範例-範例-實際效果"><div class="ts-input is-dense">
-    <input type="text" placeholder="使用者名稱">
+    <input type="text" placeholder="緊密欄位">
+</div>
+<div class="ts-space"></div>
+<div class="ts-input">
+    <input type="text" placeholder="預設欄位">
+</div>
+<div class="ts-space"></div>
+<div class="ts-input is-relaxed">
+    <input type="text" placeholder="寬鬆欄位">
 </div>
 </div>
                                 <div class="主體-格局-內容-單個範例-範例-程式碼"><pre><code class="hljs">&lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"ts-input <mark>is-dense</mark>"</span>&gt;
-    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"使用者名稱"</span>&gt;</span>
+    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"緊密欄位"</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
+&lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"ts-input"</span>&gt;
+    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"預設欄位"</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
+&lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"ts-input <mark>is-relaxed</mark>"</span>&gt;
+    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"寬鬆欄位"</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
 </div>
                             </div>
@@ -1281,8 +1295,8 @@ <h1 class="穹頂-標題-主要">輸入欄位</h1>
                                 尺寸 <span class="主體-格局-索引-清單-項目-英文">is-small</span>
                             </a>
 
-                            <a class="主體-格局-索引-清單-項目" href="#dense">
-                                較密的 <span class="主體-格局-索引-清單-項目-英文">is-dense</span>
+                            <a class="主體-格局-索引-清單-項目" href="#density">
+                                密度 <span class="主體-格局-索引-清單-項目-英文">is-dense</span>
                             </a>
 
                         </div>

diff --git a/languages/zh-tw/components/close.yml b/languages/zh-tw/components/close.yml
@@ -43,6 +43,13 @@ Definitions:
             HTML: |
                 <span class="ts-close [[is-tertiary]]"></span>
 
+          - Title: 圓角的
+            Anchor: Rounded
+            Description: 使按鈕的四個角落都變得稍微有點圓角修飾。
+            Since: 4.0.0
+            HTML: |
+                <span class="ts-close [[is-rounded]]"></span>
+
           - Title: 尺寸
             Anchor: Sizes
             Description: 更改關閉按鈕的大小。
@@ -51,6 +58,7 @@ Definitions:
                 <span class="ts-close [[is-small]]"></span>
                 <span class="ts-close"></span>
                 <span class="ts-close [[is-large]]"></span>
+                <span class="ts-close [[is-big]]"></span>
 
           - Title: 間隔的
             Anchor: Spaced

diff --git a/languages/zh-tw/components/dropdown.yml b/languages/zh-tw/components/dropdown.yml
@@ -329,7 +329,10 @@ Definitions:
 
           - Title: 貼齊上下邊
             Anchor: Align Directions
-            Description: 下拉式選單可以透過 `is-top`（上面）和 `is-bottom`（下面）選擇要貼齊父容器的哪邊，這同時會讓選單以流動的方式填滿左右寬度。如果父容器的寬度小於選單裡的項目，則會以項目寬度為主。
+            Description: |
+                下拉式選單可以透過 `is-top`（上面）和 `is-bottom`（下面）選擇要貼齊父容器的哪邊，這同時會讓選單以流動的方式填滿左右寬度。如果容器的寬度小於選單裡的項目，則會以項目寬度為主。
+
+                由於 CSS 的先天限制，如果項目會超出容器的寬度，請考慮使用 `is-top-center`（上面置中）與 `is-bottom-center`（下面置中）。
             Since: 4.1.0
             Remove:
                 - <div class="ts-space is-huge"></div>

diff --git a/languages/zh-tw/components/input.yml b/languages/zh-tw/components/input.yml
@@ -170,13 +170,23 @@ Definitions:
                     <input type="text" placeholder="大型輸入欄位">
                 </div>
 
-          - Title: 較密的
-            Anchor: Dense
-            Description: 變更元件的內距，令元素之間看起來更密集。
+          - Title: 密度
+            Anchor: Density
+            Description: 變更輸入欄位的高度，看起來更緊密或是令人感到寬鬆。
             Since: 4.1.0
+            Remove:
+                - <div class="ts-space"></div>
             HTML: |
                 <div class="ts-input [[is-dense]]">
-                    <input type="text" placeholder="使用者名稱">
+                    <input type="text" placeholder="緊密欄位">
+                </div>
+                <div class="ts-space"></div>
+                <div class="ts-input">
+                    <input type="text" placeholder="預設欄位">
+                </div>
+                <div class="ts-space"></div>
+                <div class="ts-input [[is-relaxed]]">
+                    <input type="text" placeholder="寬鬆欄位">
                 </div>
 
     - Title: 種類