Progress is-empty, fixed #820

teacat · Aug 2, 2022 · 76d6991 · 76d6991
1 parent 1f6778e
commit 76d6991
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/languages/en-us/components/progress.yml b/languages/en-us/components/progress.yml
@@ -90,6 +90,17 @@ Definitions:
     - Title: Variations
       Description:
       Sections:
+          - Title: Empty
+            Anchor: Empty
+            Description: 當進度為零時，可以指定其狀態為空並隱藏進度條的背景。
+            Since: 4.0.0
+            HTML: |
+                <div class="ts-progress [[is-empty]]">
+                    <div class="bar" style="--value: 0;">
+                        <div class="[[text]]">0%</div>
+                    </div>
+                </div>
+
           - Title: Secondary
             Anchor: Secondary
             Description: 次要的進度列可以作為緩衝值或是輔助使用。

diff --git a/languages/zh-tw/components/progress.yml b/languages/zh-tw/components/progress.yml
@@ -90,6 +90,17 @@ Definitions:
     - Title: 外觀
       Description:
       Sections:
+          - Title: 空的
+            Anchor: Empty
+            Description: 當進度為零時，可以指定其狀態為空並隱藏進度條的背景。
+            Since: 4.0.0
+            HTML: |
+                <div class="ts-progress [[is-empty]]">
+                    <div class="bar" style="--value: 0;">
+                        <div class="[[text]]">0%</div>
+                    </div>
+                </div>
+
           - Title: 次要列
             Anchor: Secondary
             Description: 次要的進度列可以作為緩衝值或是輔助使用。

diff --git a/src/progress.css b/src/progress.css
@@ -90,6 +90,15 @@
     animation: ts-progress-active 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }
 
+/**
+ * Empty
+ */
+
+.ts-progress.is-empty .bar {
+    background: transparent;
+    color: var(--ts-gray-800);
+}
+
 /**
  * Processing
  */