ProductUI Action list - PrimerBlazor

Basic Action List

<PrimerActionList>
    <PrimerActionListItem>Item One</PrimerActionListItem>
    <PrimerActionListItem>Item Two</PrimerActionListItem>
</PrimerActionList>

Action List with Visuals

<PrimerActionList>
    <PrimerActionListItem>
        <LeadingVisual>
            <PrimerAvatar ImageUrl="https://github.com/mona.png" Size="2" IsCircle="true" ClassName="mr-2" />
        </LeadingVisual>
        <ChildContent>
            Item One
        </ChildContent>
        <TrailingVisual>
            <PrimerIcon Icon="IconName.Pencil16" Size="IconSize.Small" />
        </TrailingVisual>
    </PrimerActionListItem>
    <PrimerActionListItem>
        <LeadingVisual>
            <PrimerAvatar ImageUrl="https://github.com/mona.png" Size="2" IsCircle="true" ClassName="mr-2" />
        </LeadingVisual>
            <ChildContent>
            Item Two
        </ChildContent>
        <TrailingVisual>
            <PrimerIcon Icon="IconName.Pencil16" Size="IconSize.Small" />
        </TrailingVisual>
    </PrimerActionListItem>
</PrimerActionList>

Action List with Single Selection

<PrimerActionList>
    @for (int i = 0; i < ItemsSingle.Count; i++)
    {
        var index = i;
        var label = ItemsSingle[i];

        <PrimerActionListItem
            SelectionVariant="ActionSelectionVariant.Single"
            IsSelected="@(SelectedIndex == index)"
            OnClick="@(() => SelectSingle(index))">
            @label
        </PrimerActionListItem>
    }
</PrimerActionList>

Action List with Multiple Selection

<PrimerActionList>
    @for (int i = 0; i < ItemsMultiple.Count; i++)
    {
        var index = i;
        var label = ItemsMultiple[i];

        <PrimerActionListItem
            SelectionVariant="ActionSelectionVariant.Multiple"
            IsSelected="@(SelectedIndices.Contains(index))"
            OnClick="@(() => ToggleMultiple(index))">
            <ChildContent>
                @label
            </ChildContent>
        </PrimerActionListItem>
    }
</PrimerActionList>

ActionList Options

Available options for ActionList component

Name	Description	Default Value	CSS Class
Inset	Whether to inset the list	true	inset
ShowDividers	Show dividers between items	false	dividers

ActionListItem Options

Available options for ActionListItem component

Name	Description	Default Value	CSS Class
IsActive	Mark item as active	false	active
IsDisabled	Disable the item	false	disabled
IsInactive	Mark item as inactive	false	inactive
Variant	Item variant (default, danger)	default	ActionListItem--danger
SelectionVariant	Selection type (none, single, multiple)	none	-
DescriptionVariant	Description display (block, inline)	block	-

private List<string> ItemsSingle = new();
private int SelectedIndex = -1;
private bool IsReadySingle = false;

private List<string> ItemsMultiple = new();
private HashSet<int> SelectedIndices = new();
private bool IsReadyMultiple = false;

protected override void OnInitialized()
{
    ItemsSingle = new() { "Item One", "Item Two", "Item Three" };
    ItemsMultiple = new() { "Item One", "Item Two", "Item Three" };
    SelectedIndices = new();
    IsReadySingle = true;
    IsReadyMultiple = true;
}

private void SelectSingle(int index)
{
    SelectedIndex = index;
}

private void ToggleMultiple(int index)
{
    if (SelectedIndices.Contains(index))
        SelectedIndices.Remove(index);
    else
        SelectedIndices.Add(index);
}