Action List

Action List is a list of actions. It is primarily used with Dropdowns. There are few components that helps to build an action list.

• <ActionList> - The container
• <ActionListItem> - An item
• <ActionListGroup> - A group wrapper with a title and a divider

Properties and Slots

ActionList

Properties

Slots

ActionListItem

Properties

Events

A select event is emitted when the item is clicked/selected. See the examples below.

Slots

ActionListGroup

Properties

Examples

Basic

<ActionList>
    <ActionListItem>Show Details</ActionListItem>
    <ActionListItem>Edit Comment</ActionListItem>
    <ActionListItem type="danger">Delete Comment</ActionListItem>
</ActionList>

Single Selection

For single selections, set selection="single" in the <ActionList> component. Then, use the selected property and the on:select events of the <ActionListItem> component to manage the selected item.

<ActionList selection="single">
    <ActionListItem 
        selected={current === 1}
        on:select={() => current = 1}
    >
        Option 1
    </ActionListItem>
    <ActionListItem 
        selected={current === 2}
        on:select={() => current = 2}
    >
        Option 2
    </ActionListItem>
    <ActionListItem 
        selected={current === 3}
        on:select={() => current = 3}
    >
        Option 3
    </ActionListItem>
</ActionList>

Multi Selection

For multi selections, set selection="multi" in the <ActionList> component.

<ActionList selection="multi">
    {#each [1,2,3] as value}
        <ActionListItem 
            selected={x2.includes(value)}
            on:select={() => {
                if (x2.includes(value)) {
                    x2 = x2.filter(x => x !== value);
                } else {
                    x2 = [...x2, value];
                }
            }}
        >
            Option {value}
        </ActionListItem>
    {/each}
</ActionList>

Group

Use the <ActionListGroup> component to group items. You can also set a title and a divider for the group.

<ActionList>
    <ActionListGroup title="Comment">
        <ActionListItem>Delete</ActionListItem>
        <ActionListItem>Spam</ActionListItem>
    </ActionListGroup>
    <ActionListGroup title="User" divider>
        <ActionListItem>Ban User</ActionListItem>
    </ActionListGroup>
</ActionList>

Group Selection

You can also use the selection property in the <ActionListGroup> component to set the selection mode for only the items in the group.

<ActionList>
    <ActionListGroup title="Single" selection="single">
        <ActionListItem selected>Option 1</ActionListItem>
        <ActionListItem>Option 2</ActionListItem>
    </ActionListGroup>
    <ActionListGroup title="Multi" divider selection="multi">
        <ActionListItem>Option 3</ActionListItem>
        <ActionListItem>Option 4</ActionListItem>
    </ActionListGroup>
</ActionList>

Start and End Slots

<ActionList>
    <ActionListItem>
        <IconHandThumbsUp slot="start" />
        Vote
        <Text light slot="end">⌘⇧V</Text>
    </ActionListItem>
    <ActionListItem>
        <IconPencil slot="start" />
        Edit
        <Text light slot="end">⌘⇧E</Text>
    </ActionListItem>
    <ActionListItem type="danger">
        <IconTrash slot="start" />
        Delete
        <Text light slot="end">⌘⇧D</Text>
    </ActionListItem>
</ActionList>

Descriptions

<ActionList>
    <ActionListItem>
        <IconHandThumbsUp slot="start" />
        Vote
        <div slot="description">Add a vote to this comment.</div>
        <Text light slot="end">⌘⇧V</Text>
    </ActionListItem>
    <ActionListItem>
        <IconPencil slot="start" />
        Edit
        <div slot="description">Edit this comment.</div>
        <Text light slot="end">⌘⇧E</Text>
    </ActionListItem>
    <ActionListItem type="danger">
        <IconTrash slot="start" />
        Delete
        <div slot="description">Delete this comment.</div>
        <Text light slot="end">⌘⇧D</Text>
    </ActionListItem>
</ActionList>