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.