Пользовательский компонент Blazor

Question

Я хочу создать пользовательский компонент, где у меня есть возможность «пропустить» часть кода. Скажем, у меня есть этот компонент 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.