This is a simple but useful component to display a value along with a label. It contains three elements commonly used together. A div wrapping the whole component, a label, and a paragraph. It also provides a placeholder to display a character or string in case the value to display is null. This feature is fairly important because without it the overall height of the component would be reduced when the value is null, empty, or whitespace potentially producing an odd look in the UI. The default value for the placeholder is the dash “-” character.
Oh and it’s helpful to style the label differently than the value to help the user distinguish between the two.
Here’s an example of how to use the DisplayValueBCA component.
<div class="row">
<DisplayValueBCA Label="MAKE"
Value=@MyCar.Make
ClassDiv="col-2" />
<DisplayValueBCA Label="MODEL"
Value=@MyCar.Model
ClassDiv="col-2" />
<DisplayValueBCA Label="VIN"
Value=@MyCar.VIN
ClassDiv="col-2" />
</div>
Here’s the markup and code for the DisplayValueBCA component.
<div class="@ClassDiv" title=@Title>
<label class=@ClassLabel>
@Label
</label>
<p class=@ClassValue id="@Id">
@DisplayValue
</p>
</div>
@code {
[Parameter]
public string? Value { get; set; }
[Parameter]
public string? Label { get; set; }
[Parameter]
public string Id { get; set; } = string.Empty;
[Parameter]
public string Title { get; set; } = string.Empty;
[Parameter]
public string? ClassDiv { get; set; }
[Parameter]
public string? ClassLabel { get; set; }
[Parameter]
public string? ClassValue { get; set; }
[Parameter]
public string Placeholder { get; set; } = "-";
public string DisplayValue {
get
{
if (string.IsNullOrWhiteSpace(Value))
{
return Placeholder;
}
return Value;
}
}
}
