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
See Group 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