2026-10-03 15:26:21 +02:00
|
|
|
@inherits DComponentBase
|
2026-10-03 12:01:42 +02:00
|
|
|
|
|
|
|
|
@* daisyUI Accordion: https://daisyui.com/components/accordion/ . Instead of daisyUI's radio group, the open item is an
|
|
|
|
|
index in C# (@bind-Active, -1 = none). Each DAccordionItem registers itself through the cascading value and renders a
|
|
|
|
|
DCollapse that is open only while its index is Active. The cascading value isn't fixed, so every item re-renders
|
|
|
|
|
whenever the accordion does. *@
|
|
|
|
|
<div @attributes="AdditionalAttributes" class="@CssClass">
|
|
|
|
|
<CascadingValue Value="this">
|
|
|
|
|
@ChildContent
|
|
|
|
|
</CascadingValue>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@code {
|
|
|
|
|
[Parameter] public RenderFragment ChildContent { get; set; }
|
|
|
|
|
/// <summary>Index of the open item, in registration order; -1 when all are closed.</summary>
|
|
|
|
|
[Parameter] public int Active { get; set; } = -1;
|
|
|
|
|
[Parameter] public EventCallback<int> ActiveChanged { get; set; }
|
|
|
|
|
[Parameter] public DCollapseIcon Icon { get; set; }
|
|
|
|
|
/// <summary>Join the items into one block (join join-vertical, join-item).</summary>
|
|
|
|
|
[Parameter] public bool Joined { get; set; }
|
|
|
|
|
|
2026-10-03 15:26:21 +02:00
|
|
|
readonly List<DAccordionItem> items = [];
|
2026-10-03 12:01:42 +02:00
|
|
|
|
|
|
|
|
string CssClass => Cx(Joined ? "join join-vertical rounded-box neo-raised" : "flex flex-col gap-2", Class);
|
|
|
|
|
|
|
|
|
|
internal int IndexOf(DAccordionItem item) => items.IndexOf(item);
|
|
|
|
|
|
|
|
|
|
internal void Add(DAccordionItem item)
|
|
|
|
|
{
|
|
|
|
|
items.Add(item);
|
|
|
|
|
StateHasChanged();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
internal void Remove(DAccordionItem item)
|
|
|
|
|
{
|
|
|
|
|
items.Remove(item);
|
|
|
|
|
StateHasChanged();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
internal async Task Select(int index)
|
|
|
|
|
{
|
|
|
|
|
Active = index;
|
|
|
|
|
await ActiveChanged.InvokeAsync(index);
|
|
|
|
|
StateHasChanged();
|
|
|
|
|
}
|
|
|
|
|
}
|