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: badge): preset color of ribbon (#791)

Browse Source 
* Fix ribbon syle

Text color was same as background color.

* Ribbon documentation

Added two ribbon examples with color set (preset and custom)

* fix : badgeribbon html content

Html content must be the same as in the react version

* revert changes

We don't change less files. They are copied from react version.

* revert

* tests: fix badgeribbon unit tests

Modified expected html to match markup from react version.

* Update tests/badge/RibbonTests.cs

Co-authored-by: James Yeung <shunjiey@hotmail.com>
This commit is contained in:
abdelkrim boutkhil 2020-11-17 09:38:32 +01:00 committed by GitHub
parent ab1d3cc2b1
commit 6b0e9cb153
3 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/badge/BadgeRibbon.razor
View File

@ -7,7 +7,9 @@
@ChildContent
}
<div class="@ClassMapper.Class" style="@_colorStyle">
@if (TextTemplate != null)@TextTemplate else @Text
<span class="ant-ribbon-text">
@if (TextTemplate != null)@TextTemplate else @Text
</span>
<div class="ant-ribbon-corner" style="@_cornerColorStyle" />
</div>
</div>
</div>

10
site/AntBlazor.Docs/Demos/Components/Badge/demo/Ribbon.razor
View File

@ -2,6 +2,14 @@
<Card Bordered>And raises the spyglass.</Card>
</BadgeRibbon>
<br />
<BadgeRibbon Text="Pushes open the window" Color="orange">
<Card Bordered>And raises the spyglass.</Card>
</BadgeRibbon>
<br />
<BadgeRibbon Text="Pushes open the window" Color="#832">
<Card Bordered>And raises the spyglass.</Card>
</BadgeRibbon>
<br />
<BadgeRibbon >
<TextTemplate>
<Icon Type="windows" Theme="outline" />Pushes open the window
@ -9,4 +17,4 @@
<ChildContent>
<Card Bordered>And raises the spyglass.</Card>
</ChildContent>
</BadgeRibbon>
</BadgeRibbon>

13
tests/badge/RibbonTests.cs
View File

@ -1,4 +1,4 @@
using Bunit;
using Bunit;
using Microsoft.AspNetCore.Components;
using Xunit;
@ -13,6 +13,7 @@ namespace AntDesign.Tests.Badge
cut.MarkupMatches(@"
<div class=""ant-ribbon-wrapper"">
<div class=""ant-ribbon ant-ribbon-placement-end"">
<span class=""ant-ribbon-text""></span>
<div class=""ant-ribbon-corner""></div>
</div>
</div>
@ -32,6 +33,7 @@ namespace AntDesign.Tests.Badge
<div class=""ant-ribbon-wrapper"">
<div />
<div class=""ant-ribbon ant-ribbon-placement-start"">
<span class=""ant-ribbon-text""></span>
<div class=""ant-ribbon-corner"">
</div>
</div>
@ -48,6 +50,7 @@ namespace AntDesign.Tests.Badge
<div class=""ant-ribbon-wrapper"">
<div />
<div class=""ant-ribbon ant-ribbon-placement-end"">
<span class=""ant-ribbon-text""></span>
<div class=""ant-ribbon-corner"">
</div>
</div>
@ -68,6 +71,7 @@ namespace AntDesign.Tests.Badge
<div class=""ant-ribbon-wrapper"">
<div />
<div class=""ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"">
<span class=""ant-ribbon-text""></span>
<div class=""ant-ribbon-corner"">
</div>
</div>
@ -91,6 +95,7 @@ namespace AntDesign.Tests.Badge
<div class=""ant-ribbon-wrapper"">
<div />
<div class=""ant-ribbon ant-ribbon-placement-end"" style=""background: {color}"">
<span class=""ant-ribbon-text""></span>
<div class=""ant-ribbon-corner"" style=""color: {color}"">
</div>
</div>
@ -112,7 +117,7 @@ namespace AntDesign.Tests.Badge
<div class=""ant-ribbon-wrapper"">
<div />
<div class=""ant-ribbon ant-ribbon-placement-end"">
unicorn
<span class=""ant-ribbon-text"">unicorn</span>
<div class=""ant-ribbon-corner"">
</div>
</div>
@ -142,7 +147,9 @@ namespace AntDesign.Tests.Badge
<div class=""ant-ribbon-wrapper"">
<div />
<div class=""ant-ribbon ant-ribbon-placement-end"">
<span class=""cool"">Hello</span>
<span class=""ant-ribbon-text"">
<span class=""cool"">Hello</span>
</span>
<div class=""ant-ribbon-corner"">
</div>
</div>