27 lines
1.3 KiB
Plaintext
27 lines
1.3 KiB
Plaintext
 
|
@inherits DComponentBase
|
||
|
|
|
||
|
|
@* daisyUI Theme controller: https://daisyui.com/components/theme-controller/ . While checked, the page uses the theme
|
||
|
|
named in Value (daisyUI's :root:has(.theme-controller:checked) rule). The app itself sets data-theme from C#, so
|
||
|
|
this exists for completeness. Style it with class="toggle", "checkbox", "radio", "btn" and so on. For a radio
|
||
|
|
group, pass the same name attribute to each and set Checked from one shared value: a radio raises no change event
|
||
|
|
when another one unchecks it. *@
|
||
|
|
<input @attributes="AdditionalAttributes" type="@(Radio ? "radio" : "checkbox")" value="@Value" class="@CssClass"
|
||
|
|
checked="@Checked" @onchange="OnChange" />
|
||
|
|
|
||
|
|
@code {
|
||
|
|
/// <summary>A daisyUI theme name, e.g. "neo-dark".</summary>
|
||
|
|
[Parameter] public string Value { get; set; }
|
||
|
|
[Parameter] public bool Checked { get; set; }
|
||
|
|
[Parameter] public EventCallback<bool> CheckedChanged { get; set; }
|
||
|
|
/// <summary>Render a radio instead of a checkbox.</summary>
|
||
|
|
[Parameter] public bool Radio { get; set; }
|
||
|
|
|
||
|
|
string CssClass => Cx("theme-controller", Class);
|
||
|
|
|
||
|
|
async Task OnChange(ChangeEventArgs e)
|
||
|
|
{
|
||
|
|
// A checkbox reports its checked state; a radio only reports its value when it becomes checked.
|
||
|
|
Checked = Radio || e.Value is true;
|
||
|
|
await CheckedChanged.InvokeAsync(Checked);
|
||
|
|
}
|
||
|
|
}
|