Blazor定制组件

Question

我想建立一个自定义的组件，在这个组件中，我可以选择 "忽略 "部分代码，比如说，我有这个simpleCard组件，当这个simplecard组件被调用时，有没有办法 "忽略 "按钮类？

 <div class="simpleCard">
        <div class="img-fluid">
            <img src="@imageUrl">
        </div>
        <div class="simpleCard-title">
            <p>@cardTitle</p>
        </div>
        <div class="simpleCard-text">
            <p>@cardText</p>
        </div>
         <button> class="simpleCard-button">Click me</button>
        </div>
    </div>


`@code `{
    [Parameter]
    public string imageUrl { get; set; }
    [Parameter]
    public string cardTitle { get; set; }
    [Parameter]
    public string cardText { get; set; }
}

当这个simplecard组件被调用的时候，有没有办法 "忽略 "按钮类？假设我想创建一个带按钮的卡片和一个不带按钮的卡片？

Answer 1

在你的组件中添加一个布尔值的参数。

[Parameter]
public bool ButtonVisible { get; set; }

然后在你的标记中..:

@if(ButtonVisible)
{
 </div>
   <button> class="simpleCard-button">Click me</button>
 </div>
}

当你调用这个组件时，根据需要将值设置为true或false。

.....

<Component ButtonVisible="True" .... />

...

只有当你把值设置为True时，按钮才会呈现。