A UI Razor component that renders a selectable radio-style list of options. It iterates Options to draw cards with optional icons and hints, highlights the active index from Active(), and invokes Pick(index) when a card is clicked.
@namespace Sunless.Libraries.UI
@using System.Collections.Generic
@using Sandbox
@using Sandbox.UI
@inherits Panel
@attribute [StyleSheet]
<root class="menu-radio">
@if ( Options is not null )
{
for ( int i = 0; i < Options.Count; i++ )
{
var idx = i;
var opt = Options[idx];
var active = idx == ( Active?.Invoke() ?? -1 );
<div class="radio-card @(active ? "active" : "")" @onclick=@(() => Pick?.Invoke( idx ))>
@if ( !string.IsNullOrEmpty( opt.Icon ) )
{
<Icon [email protected] Size=@(IconSize.Large) />
}
<div class="radio-text">
<div class="radio-label">@opt.Label</div>
@if ( !string.IsNullOrEmpty( opt.Hint ) )
{
<div class="radio-hint">@opt.Hint</div>
}
</div>
</div>
}
}
</root>
@code
{
public IReadOnlyList<MenuRadioWidget.Option> Options { get; set; }
public Func<int> Active { get; set; }
public Action<int> Pick { get; set; }
protected override int BuildHash() => HashCode.Combine( Options?.Count ?? 0, Active?.Invoke() ?? -1 );
}