tdesign-blazor · teacher-zhou · Oct 8, 2022 · Sep 21, 2022 · Sep 21, 2022 · Sep 22, 2022
diff --git a/doc/TDesignBlazor.Docs.Shared/Components/Example.razor b/doc/TDesignBlazor.Docs.Shared/Components/Example.razor
@@ -3,7 +3,7 @@
     <h2>@Title</h2>
     @if (Description is not null)
     {
-        <p>@Description</p>
+            <p>@Description</p>
     }
 
     @*<Tab Position="TDesignBlazor.Position.Top" >
@@ -18,11 +18,11 @@
 
     <Div AdditionalCssClass="demo-wrapper">
         <Div AdditionalCssClass="content" AdditionalStyle="@RunStyle">
-                @RunContent
+            @RunContent
         </Div>
         <Div class="footer">
             <Div class="btn">
-                <Icon AdditionalCssClass="@BtnClass" Name="IconName.Code" Size="24px" @onclick="e=>ToogleCode()" />
+                <Icon AdditionalCssClass="@BtnClass" Name="IconName.Code" Size="24px"  @onclick="e=>ToogleCode()" />
             </Div>
         </Div>
         <Div class="@CodeClass" style="@GetStyle()">
@@ -37,11 +37,11 @@
     [Parameter] public RenderFragment Description { get; set; }
     [Parameter] public RenderFragment CodeContent { get; set; }
     [Parameter] public RenderFragment RunContent { get; set; }
-    [Parameter]public string? RunStyle{ get; set; }
+    [Parameter] public string? RunStyle { get; set; }
 
     bool Active = false;
 
-    string GetStyle() =>Active?"": "display:none";
+    string GetStyle() => Active ? "" : "display:none";
     string CodeClass => HtmlHelper.CreateCssBuilder().Append("content code")
     //.Append(Active, "code-collapse", "code-expand")
     .ToString()
@@ -55,3 +55,4 @@
         StateHasChanged();
     }
 }
+
diff --git a/doc/TDesignBlazor.Docs.Shared/Layouts/MainLayout.razor b/doc/TDesignBlazor.Docs.Shared/Layouts/MainLayout.razor
@@ -6,7 +6,7 @@
             <LogoContent>
                 <img alt="TDesignBlazor Logo" width="200" src="https://tdesign.gtimg.com/site/TDesignBlazor.png">
                 &nbsp;&nbsp;
-                <h2><i>基于 TDesignBlazor 的 Blazor 企业级组件库</i></h2>
+                <h2><i>基于 TDesign 的 Blazor 企业级组件库</i></h2>
             </LogoContent>
             <OperationContent>
                 <a href="https://github.com/AchievedOwner/TDesignBlazor" title="源码" target="_blank">
@@ -17,7 +17,7 @@
     </HeaderContent>
     <LeftSideContent>
         <div style="overflow-y:auto;height:95vh;overflow-x:hidden">
-        <NavMenu />
+            <NavMenu />
         </div>
     </LeftSideContent>
     <ChildContent>
@@ -30,4 +30,4 @@
             TDesignBlazor © William 2022 当前版本 v0.1
         </div>
     </FooterContent>
-</Layout>
+</Layout>
diff --git a/doc/TDesignBlazor.Docs.Shared/Layouts/NavMenu.razor b/doc/TDesignBlazor.Docs.Shared/Layouts/NavMenu.razor
@@ -37,6 +37,7 @@
         <MenuItem Link="components/loading">Loading 加载</MenuItem>
         <MenuItem Link="components/table">Table 表格</MenuItem>
         <MenuItem Link="components/tag">Tag 标签</MenuItem>
+        <MenuItem Link="components/progress">Progress 进度条</MenuItem>
     </MenuItemGroup>
     <MenuItemGroup Title="消息提醒">
         <MenuItem Link="components/alert">Alert 警告消息</MenuItem>

diff --git a/doc/TDesignBlazor.Docs.Shared/Pages/Components/ProgressPage.razor b/doc/TDesignBlazor.Docs.Shared/Pages/Components/ProgressPage.razor
@@ -0,0 +1,216 @@
+@page "/components/progress"
+
+<PageHeader Title="Progress 进度条">定义：展示操作的当前进度。</PageHeader>
+
+<Example Title="线形进度条">
+    <Description>以线形表示进度的组件，可以选择性地配有文字或图标补充显示进度和状态。多用于信息量较为丰富的情况。</Description>
+    <RunContent >
+        <Space Vertical style="width:500px"  >
+            <SpaceItem>
+                <div class="Progress-domo-margin">默认样式</div>
+                <Progress Theme="ProgressThemeType.Line" Percentage="30"></Progress>
+            </SpaceItem>
+            <SpaceItem>
+                <div class="Progress-domo-margin">100%</div>
+                <Progress Theme="ProgressThemeType.Line"  Percentage="100"></Progress>
+            </SpaceItem>
+            <SpaceItem>
+                 <div class="Progress-domo-margin">进度完成</div>
+                <Progress Theme="ProgressThemeType.Line" Status="Status.Success" Percentage="60"></Progress>
+            </SpaceItem>
+            <SpaceItem>
+                 <div class="Progress-domo-margin">进度状态发生重大错误</div>
+                <Progress Theme="ProgressThemeType.Line" Status="Status.Error" Percentage="60"></Progress>
+            </SpaceItem>
+                <SpaceItem>
+                   <div class="Progress-domo-margin">进度被中断</div>
+                <Progress Theme="ProgressThemeType.Line" Status="Status.Warning" Percentage="60"></Progress>
+            </SpaceItem>
+                 <SpaceItem>
+                      <div class="Progress-domo-margin">渐变色</div>
+                @{
+                    LinearGradient linearGradient = new LinearGradient() { From = "#0052D9", To = "#00A870" };
+                }
+                <Progress Theme="ProgressThemeType.Line" Color="@linearGradient" Percentage="60"></Progress>
+            </SpaceItem>
+            <SpaceItem>
+                <h3>可以在线形内展示进度信息</h3>
+                <div class="Progress-domo-margin">默认样式</div>
+                <Progress Theme="ProgressThemeType.Plump" Percentage="30" />
+
+            </SpaceItem>
+            <SpaceItem>
+                <div class="Progress-domo-margin">进度0-10%时数字位置出现在目前进度的右边区域</div>
+                <Progress Theme="ProgressThemeType.Plump" Percentage="5" />
+            </SpaceItem>
+
+
+        </Space>
+    </RunContent>
+    <CodeContent>
+        @Code.Create(@"
+```html
+<Space Vertical>
+    <SpaceItem>
+        <div class=""Progress-domo-margin"">默认样式</div>
+        <Progress Theme=""ProgressTheme.line"" Percentage=""30""></Progress>
+    </SpaceItem>
+    <SpaceItem>
+        <div class=""Progress-domo-margin"">100%</div>
+        <Progress Theme=""ProgressTheme.line"" Percentage=""100""></Progress>
+    </SpaceItem>
+    <SpaceItem>
+        <div class=""Progress-domo-margin"">进度完成</div>
+        <Progress Theme=""ProgressTheme.line"" Status=""Status.Success"" Percentage=""60""></Progress>
+    </SpaceItem>
+    <SpaceItem>
+        <div class=""Progress-domo-margin"">进度状态发生重大错误</div>
+        <Progress Theme=""ProgressTheme.line"" Status=""Status.Error"" Percentage=""60""></Progress>
+    </SpaceItem>
+    <SpaceItem>
+        <div class=""Progress-domo-margin"">进度被中断</div>
+        <Progress Theme=""ProgressTheme.line"" Status=""Status.Warning"" Percentage=""60""></Progress>
+    </SpaceItem>
+    <SpaceItem>
+        <div class=""Progress-domo-margin"">渐变色</div>
+        @{
+        LinearGradient linearGradient = new LinearGradient() { From = ""#0052D9"", To = ""#00A870"" };
+        }
+        <Progress Theme=""ProgressTheme.line"" Color=""@linearGradient"" Percentage=""60""></Progress>
+    </SpaceItem>
+    <SpaceItem>
+        <h3>可以在线形内展示进度信息</h3>
+        <div class=""Progress-domo-margin"">默认样式</div>
+        <Progress Theme=""ProgressTheme.plump"" Percentage=""30"" />
+    </SpaceItem>
+    <SpaceItem>
+        <div class=""Progress-domo-margin"">进度0-10%时数字位置出现在目前进度的右边区域</div>
+        <Progress Theme=""ProgressTheme.plump"" Percentage=""5"" />
+    </SpaceItem>
+</Space>
+```
+")
+    </CodeContent>
+</Example>
+<Example Title="带图标的标签">
+    <Description>设置 <code>Icon</code> 图标名称会在前面加图标。</Description>
+    <RunContent>
+        <Space Vertical>
+            <div>默认</div>
+            <!-- 重要：strokeWidth 大小不能超过 size 的一半，否则无法渲染出环形 -->
+            <Space>
+                <Space Vertical>
+                    <div>默认样式</div>
+                    <Progress Theme="ProgressThemeType.Circle" Percentage="30"></Progress>
+                </Space>
+                <Space Vertical>
+                    <div>不显示数字</div>
+                    <Progress Theme="ProgressThemeType.Circle" Label="false" Percentage="100" Status="Status.Success"></Progress>
+                </Space>
+                <Space Vertical>
+                    <div>自定义内容</div>
+                    @{
+                        var _label = "75day";
+                    }
+                    <Progress Theme="ProgressThemeType.Circle" Label="@_label" Percentage="50" Status="Status.Success"></Progress>
+                </Space>
+            </Space>
+
+            <Space>
+                <Space Vertical>
+                    <div>进度完成</div>
+                    <Progress Theme="ProgressThemeType.Circle" Percentage="100" Status="Status.Success"></Progress>
+                </Space>
+                <Space Vertical>
+                    <div>进度状态发生错误</div>
+                    <Progress Theme="ProgressThemeType.Circle" Percentage="75" Status="Status.Error"></Progress>
+                </Space>
+                <Space Vertical>
+                    <div>进度被中断</div>
+                    <Progress Theme="ProgressThemeType.Circle" Percentage="50" Status="Status.Warning"></Progress>
+                </Space>
+            </Space>
+
+            <div>默认不同尺寸</div>
+            <Space>
+                <Space Vertical>
+                    <div>小尺寸</div>
+                    <Progress Theme="ProgressThemeType.Circle" Percentage="30" Size="Size.Small"></Progress>
+                </Space>
+                <Space Vertical>
+                    <div>默认尺寸</div>
+                    <Progress Theme="ProgressThemeType.Circle" Percentage="30" Size="Size.Medium"></Progress>
+                </Space>
+                <Space Vertical>
+                    <div>大尺寸</div>
+                    <Progress Theme="ProgressThemeType.Circle" Percentage="75" Size="Size.Large"></Progress>
+                </Space>
+            </Space>
+        </Space>
+    </RunContent>
+    <CodeContent>
+        @Code.Create(@"
+```html
+        <Space Vertical>
+            <div>默认</div>
+            <!-- 重要：strokeWidth 大小不能超过 size 的一半，否则无法渲染出环形 -->
+            <Space>
+                <Space Vertical>
+                    <div>默认样式</div>
+                    <Progress Theme=""ProgressTheme.circle"" Percentage=""30""></Progress>
+                </Space>
+                <Space Vertical>
+                    <div>不显示数字</div>
+                    <Progress Theme=""ProgressTheme.circle"" Label=""false"" Percentage=""100"" Status=""Status.Success""></Progress>
+                </Space>
+                <Space Vertical>
+                    <div>自定义内容</div>
+            @{
+                var _label = ""75day"";
+            }
+                    <Progress Theme=""ProgressTheme.circle"" Label=""@_label"" Percentage=""50"" Status=""Status.Success""></Progress>
+                </Space>
+            </Space>
+
+            <Space>
+                <Space Vertical>
+                    <div>进度完成</div>
+                    <Progress Theme=""ProgressTheme.circle"" Percentage=""100"" Status=""Status.Success""></Progress>
+                </Space>
+                <Space Vertical>
+                    <div>进度状态发生错误</div>
+                    <Progress Theme=""ProgressTheme.circle"" Percentage=""75"" Status=""Status.Error""></Progress>
+                </Space>
+                <Space Vertical>
+                    <div>进度被中断</div>
+                    <Progress Theme=""ProgressTheme.circle"" Percentage=""50"" Status=""Status.Warning""></Progress>
+                </Space>
+            </Space>
+
+            <div>默认不同尺寸</div>
+            <Space>
+                <Space Vertical>
+                    <div>小尺寸</div>
+                    <Progress Theme=""ProgressTheme.circle"" Percentage=""30"" Size=""Size.Small""></Progress>
+                </Space>
+                <Space Vertical>
+                    <div>默认尺寸</div>
+                    <Progress Theme=""ProgressTheme.circle"" Percentage=""30"" Size=""Size.Medium""></Progress>
+                </Space>
+                <Space Vertical>
+                    <div>大尺寸</div>
+                    <Progress Theme=""ProgressTheme.circle"" Percentage=""75"" Size=""Size.Large""></Progress>
+                </Space>
+            </Space>
+        </Space>
+```
+")
+    </CodeContent>
+</Example>
+
+
+@inject IJSRuntime JS
+@code {
+    bool Checked1;
+}
+