CODEWITHSUNDEEP
c#blazor.net-6.0
dima kal
dima kal

Reputation: 29

Blazor set background color with parameter

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 class="fa fa-@CardIcon test-icon" 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

Upvotes: 0

Views: 6310

Answers (2)

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30167

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" class="card text-white e-card mb-3" style="max-width: 18rem;">
  <div class="card-header e-card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">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:

enter image description here

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 class="fa fa-@CardIcon test-icon" 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:

enter image description here

Upvotes: 3

Astrid E.
Astrid E.

Reputation: 2872

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>

Upvotes: 0

Related Questions