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

Name

Default

Description

selection

none

The selection mode. One of:

none
single
multi

selectionAlign

start

The alignment of the selection indicator (tick or checkbox) in items. One of:

start
end

Slots

Name

Description

default

The content of the action list.

ActionListItem

Properties

Name

Default

Description

selected

false

Whether the item is selected or not. Only works when the selection property of the <ActionList> is set.

disabled

false

Whether the item is disabled or not.

type

default

default or danger

Events

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

Name

Description

select

Emitted when the item is selected.

Slots

Name

Default

default

The content of the action list item.

description

The description of the action list item. See Descriptions.

start

The content of the start slot (left side).

end

The content of the end slot (right side).

ActionListGroup

Properties

Name

Default

Description

title

The title of the group.

divider

false

Whether to show a divider or not.

selection

none

Override the selection mode of the <ActionList> component. One of:

none
single
multi

SeeGroup Selection.

Examples

Basic

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

Show Details

Edit Comment

Delete Comment

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>

Option 1

Option 2

Option 3

with selectionAlign="end"

Option 1

Option 2

Option 3

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>

Option 1

Option 2

Option 3

with selectionAlign="end"

Option 1

Option 2

Option 3

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>

Comment

Edit

Move

User

Ban

Delete

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>

Single

Option 1

Option 2

Multi

Option 1

Option 2

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>

Vote ⌘⇧V

Edit ⌘⇧E

Delete ⌘⇧D

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>

Vote

Add a vote to this comment.

⌘⇧V

Edit

Edit this comment.

⌘⇧E

Delete

Delete this comment.

⌘⇧D

Disabled

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

Vote

Add a vote to this comment.

⌘⇧V

Edit

Edit this comment.

⌘⇧E