test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-02 03:57:38 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

fix(module: progress): add missing trailing color (#1241)

Browse Source 
* add description to chart documentation

* translate general configuration to english.

* apply trailling color and adjust documentation a bit

* remove typo

* apply trail color for circle type aswell

* fix Chinese demo doc

Co-authored-by: ElderJames <shunjiey@hotmail.com>
This commit is contained in:
Nino Padrutt 2021-03-12 08:47:55 +01:00 committed by GitHub
parent da55e9e7e8
commit a5b612d892
5 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/progress/Progress.razor
View File

@ -7,7 +7,7 @@
@if (Steps == 0)
{
<div class="ant-progress-outer">
<div class="ant-progress-inner">
<div class="ant-progress-inner" style="background-color: @TrailColor">
<div class="ant-progress-bg" style="@_bgStyle">
</div>
@if (SuccessPercent != 0)
@ -67,7 +67,7 @@
</linearGradient>
</defs>
}
<path class="ant-progress-circle-trail" style="@_circleTrailStyle" fill-opacity="0" stroke="@TrailColor" stroke-linecap="@StrokeLinecap.Name" stroke-width="@StrokeWidth" d="M 50 50 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94" />
<path class="ant-progress-circle-trail" style="@_circleTrailStyle" fill-opacity="0" stroke-linecap="@StrokeLinecap.Name" stroke-width="@StrokeWidth" d="M 50 50 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94" />
@if (SuccessPercent != 0)
{
<path class="ant-progress-circle-path" style="@_circleSuccessStyle" opacity="1" fill-opacity="0" stroke="" stroke-linecap="@StrokeLinecap.Name" stroke-width="@StrokeWidth" d="M 50 50 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94" />

6
components/progress/Progress.razor.cs
View File

@ -173,13 +173,13 @@ namespace AntDesign
_bgStyle = GetLineBGStyle();
if (SuccessPercent != 0)
{
_bgSuccessStyle = $"width: {SuccessPercent}%; height: {StrokeWidth}px;";
_bgSuccessStyle = $" width: {SuccessPercent}%; height: {StrokeWidth}px;";
}
}
else if (Type == ProgressType.Circle)
{
_bgStyle = Size == ProgressSize.Default ? $"width: {Width}px; height: {Width}px; font-size: 24px;" : $"width: 80px; height: 80px; font-size: 18px;";
_circleTrailStyle = $"transition:stroke-dashoffset 0.3s, stroke-dasharray 0.3s, stroke 0.3s, stroke-width 0.06s 0.3s; stroke-dasharray: {CircleDash}px, {CircleDash}px; stroke-dashoffset: 0px;";
_circleTrailStyle = $"stroke:{TrailColor}; transition:stroke-dashoffset 0.3s, stroke-dasharray 0.3s, stroke 0.3s, stroke-width 0.06s 0.3s; stroke-dasharray: {CircleDash}px, {CircleDash}px; stroke-dashoffset: 0px;";
if (SuccessPercent == 0)
{
_circlePathStyle = $"transition:stroke-dashoffset 0.3s, stroke-dasharray 0.3s, stroke 0.3s, stroke-width 0.06s 0.3s; stroke-dasharray: {CircleDash * Percent / 100}px, {CircleDash}px; stroke-dashoffset: 0px;";
@ -195,7 +195,7 @@ namespace AntDesign
_bgStyle = Size == ProgressSize.Default ? $"width: 120px; height: 120px; font-size: 24px;" : $"width: 80px; height: 80px; font-size: 18px;";
double circumference = CircleDash - GapDegree;
double dashoffset = -GapDegree / 2.0;
_circleTrailStyle = $"transition:stroke-dashoffset 0.3s, stroke-dasharray 0.3s, stroke 0.3s, stroke-width 0.06s 0.3s; stroke-dasharray: {circumference}px, {CircleDash}px; stroke-dashoffset: {dashoffset}px;";
_circleTrailStyle = $"stroke:{TrailColor}; transition:stroke-dashoffset 0.3s, stroke-dasharray 0.3s, stroke 0.3s, stroke-width 0.06s 0.3s; stroke-dasharray: {circumference}px, {CircleDash}px; stroke-dashoffset: {dashoffset}px;";
if (SuccessPercent == 0)
{
_circlePathStyle = $"transition:stroke-dashoffset 0.3s, stroke-dasharray 0.3s, stroke 0.3s, stroke-width 0.06s 0.3s; stroke-dasharray: {circumference * Percent / 100}px, {CircleDash}px; stroke-dashoffset: {dashoffset}px;";

14
site/AntDesign.Docs/Demos/Components/Progress/demo/TrailColor.md Normal file
View File

@ -0,0 +1,14 @@
---
order: 12
title:
zh-CN: 设置未完成的分段的颜色
en-US: Customer Trail Color
---
## zh-CN
可通过 `TrailColor` 设置未完成的分段的颜色
## en-US
Sets the not yet filled part of the bar with `TrailColor`.

2
site/AntDesign.Docs/Demos/Components/Progress/demo/TrailColor.razor Normal file
View File

@ -0,0 +1,2 @@
<Progress Type="ProgressType.Dashboard" Percent=75 GapDegree=30 TrailColor="#FF69B4" />
<Progress Percent=75 GapDegree=30 TrailColor="#FF69B4" />

2
site/AntDesign.Docs/Demos/Components/Progress/doc/index.en-US.md
View File

@ -28,7 +28,7 @@ Properties that shared by all types.
| strokeLinecap | to set the style of the progress linecap | `round` \| `square` | `round` |
| strokeColor | color of progress bar | string | - |
| successPercent | segmented success percent | number | 0 |
| trailColor | color of unfilled part | string | - |
| trailColor | color of unfilled part as hex string. | string | - |
### `type="line"`