Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HxIcon overwrites class instead of combining it. #801

Closed
osre77 opened this issue May 2, 2024 · 1 comment
Closed

HxIcon overwrites class instead of combining it. #801

osre77 opened this issue May 2, 2024 · 1 comment

Comments

@osre77
Copy link

osre77 commented May 2, 2024

I'm using Havit.Blazor V4.6.5

I have a custom icon and it works as expected when I don't add a css class to the <HxIcon> element.
But when I do, the css class of my renderer root element is replaced instead of merged.

This works:
<HxIcon Icon="JhIcon.AlignLeft"></HxIcon>
and results in
<span class="jh_icon" b-yapvemezsy=""> ...
This doesn't:
<HxIcon Class="red_text" Icon="JhIcon.AlignLeft"></HxIcon>
and results in:
<span class="red_text" b-yapvemezsy=""> ...
But I would expect:
<span class="jh_icon red_text" b-yapvemezsy=""> ...

Here is my renderer component:

@using Icons

<span class="@CssClassHelper.Combine("jh_icon", CssClass)"
      @attributes="AdditionalAttributes">
    @ChildContent
</span>

@code {
    /// <summary>
    /// Icon to render.
    /// </summary>
    [Parameter]
    public SvgIcon? Icon { get; set; }

    /// <summary>
    /// CSS Class to combine with basic icon CSS class.
    /// </summary>
    [Parameter]
    public string? CssClass { get; set; }

    /// <summary>
    /// Additional attributes to be splatted onto an underlying HTML element.
    /// </summary>
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> AdditionalAttributes { get; set; } = new();

    private RenderFragment ChildContent => (builder) =>
    {
        builder.AddMarkupContent(0, Icon?.GetSvgData() ?? "<span>?</span>");
    };
}

When I use a BootstrapIcon the same thing happens. class is replaced instead of merged and the icon disappears.

Thank you in advance,
Reinhard.

@hakenr
Copy link
Member

hakenr commented May 15, 2024

You have to use CssClass parameter, when using the HxIcon, instead of Class (which gets part of AdditionalAttributes and overrides the class attribute when rendered).

-<HxIcon Class="red_text" Icon="JhIcon.AlignLeft"></HxIcon>
+<HxIcon CssClass="red_text" Icon="JhIcon.AlignLeft" />

@havit havit locked and limited conversation to collaborators May 15, 2024
@hakenr hakenr converted this issue into discussion #808 May 15, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants