SActionList

<SAvatarList> is a vertical list of interactive actions or options.

@globalbrain/sefirot/lib/components/SActionList.vue

Usage

<SActionList> takes a prop :list which is array of items to be listed as options.

<script setup lang="ts">
import IconActivity from '@iconify-icons/ph/activity-bold'
import IconEye from '@iconify-icons/ph/eye-bold'
import IconTrash from '@iconify-icons/ph/trash-bold'
import SActionList, { type ActionList } from '@globalbrain/sefirot/lib/components/SActionList.vue'

const list: ActionList = [
  { leadIcon: IconActivity, text: 'Show activity' },
  { leadIcon: IconEye, text: 'Preview' },
  { leadIcon: IconTrash, text: 'Delete item' }
]
</script>

<template>
  <SActionList :list="list" />
</template>

<script setup lang="ts">
import IconActivity from '@iconify-icons/ph/activity-bold'
import IconEye from '@iconify-icons/ph/eye-bold'
import IconTrash from '@iconify-icons/ph/trash-bold'
import SActionList, { type ActionList } from '@globalbrain/sefirot/lib/components/SActionList.vue'

const list: ActionList = [
  { leadIcon: IconActivity, text: 'Show activity' },
  { leadIcon: IconEye, text: 'Preview' },
  { leadIcon: IconTrash, text: 'Delete item' }
]
</script>

<template>
  <SActionList :list="list" />
</template>

Props

:list

The options to be listed.

import { type IconifyIcon } from '@iconify/vue/dist/offline'

interface Props {
  list?: ActionList
}

type ActionList = ActionListItem[]

interface ActionListItem {
  // The icon to be displayed on the left side of the text.
  leadIcon?: IconifyIcon

  // The text to be displayed.
  text: string

  // The link to be navigated to when the item is clicked. When this
  // prop is set, the item is rendered via `<SLink>`.
  link?: string

  // The callback to be called when the item is clicked.
  onClick?(): void
}

import { type IconifyIcon } from '@iconify/vue/dist/offline'

interface Props {
  list?: ActionList
}

type ActionList = ActionListItem[]

interface ActionListItem {
  // The icon to be displayed on the left side of the text.
  leadIcon?: IconifyIcon

  // The text to be displayed.
  text: string

  // The link to be navigated to when the item is clicked. When this
  // prop is set, the item is rendered via `<SLink>`.
  link?: string

  // The callback to be called when the item is clicked.
  onClick?(): void
}

<SActionList :list="[...]" />

<SActionList :list="[...]" />

Types

ActionList

The type of the :list prop.

type ActionList = ActionListItem[]

type ActionList = ActionListItem[]

ActionListItem

The type of action list item. See :list for the details.

import { type IconifyIcon } from '@iconify/vue/dist/offline'

interface ActionListItem {
  leadIcon?: IconifyIcon
  text: string
  link?: string
  onClick?(): void
}

import { type IconifyIcon } from '@iconify/vue/dist/offline'

interface ActionListItem {
  leadIcon?: IconifyIcon
  text: string
  link?: string
  onClick?(): void
}