Basic Usage

Banana

Orange

Apple

Grapes

<script setup>
const items = [
  { label: 'Banana' },
  { label: 'Orange' },
  { label: 'Apple' },
  { label: 'Grapes' },
]
</script>

<template>
  <c-list :items="items" />
</template>

Click to open/fold code

Open Vue Repl Editor

Sizes

xs

sm

md

lg

xl

Banana

Orange

Apple

Grapes

<script setup>
import { ref } from 'vue'
const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
const items = [
  { label: 'Banana' },
  { label: 'Orange' },
  { label: 'Apple' },
  { label: 'Grapes' },
]
const size = ref('md')
</script>

<template>
  <div class="c-row c-items-center c-gutter-md c-wrap">
    <div
      v-for="s in sizes"
      :key="s"
    >
      <c-radio
        v-model="size"
        :label="s"
        :value="s"
      />
    </div>
  </div>
  <c-list
    :items="items"
    :size="size"
  />
</template>

Click to open/fold code

Open Vue Repl Editor

With Divider

Banana

Orange

Apple

Grapes

<script setup>
const items = [
  { label: 'Banana' },
  { label: 'Orange' },
  { label: 'Apple' },
  { label: 'Grapes' },
]
</script>

<template>
  <c-list
    :items="items"
    divider
  />
</template>

Click to open/fold code

Open Vue Repl Editor

Clickable & Active Status

Banana

Orange

Apple

Grapes

<script setup>
import { ref } from 'vue'

const items = [
  { label: 'Banana' },
  { label: 'Orange' },
  { label: 'Apple' },
  { label: 'Grapes' },
]
const activeItem = ref('Banana')
</script>

<template>
  <c-list
    :items="items"
    clickable
    :active-fn="item => item.label === activeItem"
    @item-click="item => (activeItem = item.label)"
  />
</template>

Click to open/fold code

Open Vue Repl Editor

Customize Item Content

This is an example for using c-info-item as item

Notification

Some notification description

Personal

Some personal description

Settings

Some settings description

Exit

Some exit description

<script setup>
import { ref } from 'vue'
import {
  matCheck,
  matOfflineBolt,
  matPersonAddAlt1,
  matSettings,
  matSettingsPower,
} from '@quasar/extras/material-icons/index'
const items = [
  { title: 'Notification', subtitle: 'Some notification description', icon: matOfflineBolt },
  { title: 'Personal', subtitle: 'Some personal description', icon: matPersonAddAlt1 },
  { title: 'Settings', subtitle: 'Some settings description', icon: matSettings },
  { title: 'Exit', subtitle: 'Some exit description', icon: matSettingsPower },
]
const activeItem = ref('')
</script>

<template>
  <c-list
    :items="items"
    clickable
    :active-fn="item => item.title === activeItem"
    @item-click="item => (activeItem = item.title)"
  >
    <template #item="{ isActive, item }">
      <c-info-item v-bind="item">
        <template
          v-if="isActive"
          #append
        >
          <c-icon
            :content="matCheck"
            class="c-text-primary checked-icon"
          />
        </template>
      </c-info-item>
    </template>
  </c-list>
</template>

<style
  scoped
  lang="scss"
>
.checked-icon {
  font-size: 28px;
}
</style>

Click to open/fold code

Open Vue Repl Editor

CList API

Props

Slots

Events

items

Array<any>

Default  () => []

The items config.

itemKey

string

Default  'id'

The unique key of item.

clickable

boolean

Default  false

Determine whether the list items are clickable or not.

size

CSize

Default  'md'

The size of list.

activeFn

TSFunctionType

Default  () => false

The function to determine whether the item is in active or not.

divider

boolean

Default  false

Determine whether to show divider or not.

CItem API

Props

Slots

Events

label

string | number

Default  ''

The label text of item.

size

CSize

Default  'md'

The size of item.

clickable

boolean

Default  false

Determine whether the item is clickable or not.

active

boolean

Default  false

Determine whether the item is in active status or not.

CInfoItem API

Props

Slots

Events

icon

string

Default  ''

The icon. imported from @quasar/extras

title

string

Default  ''

The title.

subtitle

string

Default  ''

The subtitle.

align

"start" | "center" | "end"

Default  'center'

The align direction.

iconAlign

"start" | "center" | "end"

Default  'start'

The align direction with icon and title.

size

CSize

Default  'md'

The Size of item.