Blazor set background color with parameter-CodePudding

I have a card blazor component with css styling, i've tried to pass background color as a parameter to the styling in the following way:

@inject NavigationManager UriHelper

<SfCard @onclick=@Navigate CssClass="@NavigateUri">
    <CardHeader Title="@Title">
        <span  aria-hidden="true"></span>
    </CardHeader>
    <CardContent Content="@Content" />
</SfCard>

<style>
    .e-card .e-card-header {
        background: @CardColor;
        height: 60px;
        align-self: flex-start;
    }

</style>


@code {
    [Parameter]
    public string Title { get; set; } = string.Empty;

    [Parameter]
    public string Content { get; set; } = string.Empty;

    [Parameter]
    public string NavigateUri { get; set; } = string.Empty;

    [Parameter]
    public string CardColor { get; set; } = string.Empty;

    [Parameter]
    public string CardIcon { get; set; } = string.Empty;

    void Navigate()
    {
        UriHelper.NavigateTo(NavigateUri);
    }
}

It works with 1 card, but when trying to create multiple instances of cards, like this for example:

    <Card Title="test1" NavigateUri="test1" CardIcon="random"
        Content="test1 content" CardColor="red">
    </Card>

    <Card Title="test2" NavigateUri="test2" CardIcon="random"
        Content="test2 content" CardColor="blue">
    </Card>

They are all colored with the first color provided (red) and not each with its own color

CodePudding user response：

Revised Answer

Something like this should work. I've used Guids to create uniqueness in each instance of the component. It's a manual version of component isolated CSS.

<div id="@UID"  style="max-width: 18rem;">
  <div >Header</div>
  <div >
    <h5 >Primary card title</h5>
    <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<style>
    @css  {
        background: @CardColor;
    }

</style>

@code {
    public string UID = $"xx-{Guid.NewGuid().ToString()}";

    private string css => $"#{UID} .e-card-header";

    [Parameter] public string CardColor { get; set; } = "#004";
}

Here's my test page:

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />
<MyCard CardColor="#004" />
<MyCard CardColor="#040" />
<MyCard CardColor="#800" />

@code {
}

And the result:

SyncFusion version:

Here's a "sort of working" Syncfusion version - I got fed up hoop jumping to get it fully installed!

@using Syncfusion.Blazor.Cards
<SfCard id="@UID" CssClass="@NavigateUri">
    <CardHeader Title="@Title">
        <span  aria-hidden="true"></span>
    </CardHeader>
    <CardContent Content="@Content" />
</SfCard>

<style>
    @css {
        background: @CardColor;
    }

</style>

@code {
    [Parameter]
    public string Title { get; set; } = "Hello";

    [Parameter]
    public string Content { get; set; } = "Hello Blazor";

    [Parameter]
    public string NavigateUri { get; set; } = string.Empty;

    [Parameter]
    public string CardColor { get; set; } = string.Empty;

    [Parameter]
    public string CardIcon { get; set; } = string.Empty;

    public string UID = $"xx-{Guid.NewGuid().ToString()}";

    private string css => $"#{UID} .e-card-header";
}

And running that shows the background color changes:

CodePudding user response：

If you want to set the background color for the whole SfCard, not just the CardHeader, you could take advantage of the SfCard's property HtmlAttributes (docs) and set the parameter-dependent style value directly on the SfCard component in your Card implementation.

<SfCard style="background-color: @CardColor">
    <!--Content-->
</SfCard>