36 lines
1.3 KiB
Plaintext
36 lines
1.3 KiB
Plaintext
 
|
@inherits DComponentBase
|
||
|
|
|
||
|
|
@* daisyUI Hero: https://daisyui.com/components/hero/ . ChildContent goes in hero-content (text, and optionally a
|
||
|
|
figure); with Overlay a hero-overlay tints the background image. *@
|
||
|
|
<div @attributes="AdditionalAttributes" class="@CssClass" style="@StyleValue">
|
||
|
|
@if (Overlay)
|
||
|
|
{
|
||
|
|
<div class="@Cx("hero-overlay", OverlayClass)"></div>
|
||
|
|
}
|
||
|
|
<div class="@Cx("hero-content", ContentClass)">
|
||
|
|
@ChildContent
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
@code {
|
||
|
|
[Parameter] public RenderFragment ChildContent { get; set; }
|
||
|
|
/// <summary>URL of a background image, set as an inline background-image.</summary>
|
||
|
|
[Parameter] public string BackgroundImage { get; set; }
|
||
|
|
/// <summary>Add a hero-overlay color layer above the background image.</summary>
|
||
|
|
[Parameter] public bool Overlay { get; set; }
|
||
|
|
[Parameter] public string OverlayClass { get; set; }
|
||
|
|
/// <summary>Classes for hero-content, e.g. "text-center" or "flex-col lg:flex-row".</summary>
|
||
|
|
[Parameter] public string ContentClass { get; set; }
|
||
|
|
|
||
|
|
string CssClass => Cx("hero", Class);
|
||
|
|
|
||
|
|
// The consumer's own style attribute is kept, after the background image.
|
||
|
|
string StyleValue
|
||
|
|
{
|
||
|
|
get
|
||
|
|
{
|
||
|
|
var style = AdditionalAttributes?.GetValueOrDefault("style")?.ToString();
|
||
|
|
return BackgroundImage is null ? style : Cx($"background-image: url('{BackgroundImage}');", style);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|