Feature: Status Badge - Icon for Widget Generator#8
Conversation
csullivan18
left a comment
csullivan18
left a comment
There was a problem hiding this comment.
This looks great! The only other recommendation I would have is to rather than use the if/else statement on the WidgetGen page, you could actually add another parameter onto the MudBadge component that accepts the refreshInProgress (bool) variable and handles the if inside the component. Just helps make the html side a little cleaner, but what you have is still correct. If you have any questions just let me know!
Unskilledcrab
left a comment
Unskilledcrab
left a comment
There was a problem hiding this comment.
Minor changes requested but a clever implementation and workaround for the issues you faced!
| <!-- The badge icon which indicates an ongoing refresh --> | ||
| @if (refreshInProgress) | ||
| { | ||
| <MudBadge Origin="Origin.TopLeft" | ||
| Color="Color.Warning" | ||
| Overlap="true" | ||
| Bordered="false" | ||
| Icon="@badgeIcon"> | ||
| </MudBadge> | ||
| } | ||
| else //Uses a transparent badge to keep the card formatting consistent | ||
| { | ||
| <MudBadge Origin="Origin.TopLeft" | ||
| Color="Color.Transparent" | ||
| Overlap="true" | ||
| Bordered="false"> | ||
| </MudBadge> | ||
| } |
There was a problem hiding this comment.
This is a great start and heading in the right direction but looking at the documentation I believe this component should wrap the card component. That is probably why you were facing issues with the formatting being inconsistent
<MudBadge Origin="Origin.TopLeft"
Visible="refreshInProgress" <--- replacing color parameter
Overlap="true" <--- not sure if this would still be needed
Bordered="false"
Icon="@badgeIcon">
<!-- The main card that contains the widget generator -->
<MudCard Outlined="true">
.....
</MudCard>
</MudBadge>
There also looks like there is a Visible property that we can take advantage of on the badge component
Please also note: In the documentation there is a "show code" button you can press to see examples of how it is used in practice:
Unskilledcrab
left a comment
Unskilledcrab
left a comment
There was a problem hiding this comment.
This is really close. But I take a look back at my last comment. The badge component should be wrapping the entire card component
3 participants
Added a yellow hourglass icon badge to the main card which indicates that a response is being generated. When a response is not being generated, a transparent badge takes its place to keep page spacing consistent.
