List

Basic

Display title and subtitle rows with s-list-item.

Code copied

<template>
  <s-list>
    <s-list-item title="One text" />
    <s-list-item title="Another text" subtitle="A little text" />
    <s-list-item title="Some more text" />
    <s-list-item title="Even more text" subtitle="Another little text" />

Header

Group items under s-list-header.

Code copied

<template>
  <s-list>
    <s-list-header title="Group 1" />
    <s-list-item title="Snickerdoodle" subtitle="An excellent companion" />
    <s-list-item
      title="Sapporo Haru"
      subtitle="An excellent polish restaurant, quick delivery and hearty, filling meals"

Icon

Add leading icons to list rows.

Code copied

<template>
  <s-list>
    <s-list-header icon="cb:group" title="Group 1" />
    <s-list-item
      icon="cb:checkmark"
      title="Snickerdoodle"

Content

Place actions or custom content in the item slot.

Code copied

<template>
  <s-list>
    <s-list-header title="Group 1" />
    <s-list-item title="Snickerdoodle" subtitle="An excellent companion">
      <s-button color="danger">One action</s-button>
    </s-list-item>
    <s-list-item

Avatar

Use the avatar slot for profile images or initials.

Code copied

<template>
  <s-list>
    <s-list-header title="Users" color="danger" />
    <s-list-item title="Steve Jobes" subtitle="Top Contributor">
      <template #avatar>
        <s-avatar>

API