设置带参数的背景色

Question

我有一个带有css样式的卡片blazor组件，我尝试以以下方式将背景色作为参数传递给样式：

@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);
    }
}

它适用于1张卡，但当尝试创建多个卡片实例时，例如：

    <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>

它们都是用第一种颜色(红色)着色的，而不是每种颜色都有自己的颜色。

Answer 1

修正后的答案

像这样的东西应该管用。我使用Guids在组件的每个实例中创建唯一性。它是组件隔离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";
}

这是我的测试页面：

@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 {
}

其结果是：

​

​

SyncFusion版本：

这是一个“工作的”同步版本-我厌倦了跳箍，让它完全安装！

@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";
}

以及显示背景色变化的运行：

​

​

Answer 2

如果您想为整个SfCard (而不仅仅是CardHeader )设置背景色，您可以利用SfCard的属性HtmlAttributes (文档)，并直接在Card实现中的SfCard组件上设置与参数相关的style值。

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