基础使用

香蕉

橘子

苹果

葡萄

<script setup>
const items = [
  { label: '香蕉' },
  { label: '橘子' },
  { label: '苹果' },
  { label: '葡萄' },
]
</script>

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

点击展开/收起代码

点击打开交互式编辑器

尺寸

xs

sm

md

lg

xl

香蕉

橘子

苹果

葡萄

<script setup>
import { ref } from 'vue'
const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
const items = [
  { label: '香蕉' },
  { label: '橘子' },
  { label: '苹果' },
  { label: '葡萄' },
]
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>

点击展开/收起代码

点击打开交互式编辑器

带分割线

香蕉

橘子

苹果

葡萄

<script setup>
const items = [
  { label: '香蕉' },
  { label: '橘子' },
  { label: '苹果' },
  { label: '葡萄' },
]
</script>

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

点击展开/收起代码

点击打开交互式编辑器

可点击 & 激活态

香蕉

橘子

苹果

葡萄

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

const items = [
  { label: '香蕉' },
  { label: '橘子' },
  { label: '苹果' },
  { label: '葡萄' },
]
const activeItem = ref('香蕉')
</script>

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

点击展开/收起代码

点击打开交互式编辑器

自定义项

下面是用c-info-item组件作为item插槽实现的自定义列表项

通知

一些通知相关的内容

个人

一些个人相关的内容

设置

一些系统相关的设置

退出

用于退出登录

<script setup>
import { ref } from 'vue'
import {
  matCheck,
  matOfflineBolt,
  matPersonAddAlt1,
  matSettings,
  matSettingsPower,
} from '@quasar/extras/material-icons/index'
const items = [
  { title: '通知', subtitle: '一些通知相关的内容', icon: matOfflineBolt },
  { title: '个人', subtitle: '一些个人相关的内容', icon: matPersonAddAlt1 },
  { title: '设置', subtitle: '一些系统相关的设置', icon: matSettings },
  { title: '退出', subtitle: '用于退出登录', 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>

点击展开/收起代码

点击打开交互式编辑器

CList API

Props

Slots

Events

items

Array<any>

默认值  () => []

列表项

itemKey

string

默认值  'id'

列表项的唯一键值

clickable

boolean

默认值  false

是否可点击

size

CSize

默认值  'md'

尺寸

activeFn

TSFunctionType

默认值  () => false

计算列表项是否处于激活态的函数

divider

boolean

默认值  false

是否展示分割线

CItem API

Props

Slots

Events

label

string | number

默认值  ''

文字

size

CSize

默认值  'md'

尺寸

clickable

boolean

默认值  false

是否表现为可点击交互

active

boolean

默认值  false

是否处于激活态

CInfoItem API

Props

Slots

Events

icon

string

默认值  ''

图标，从@quasar/extras导入的图标

title

string

默认值  ''

标题

subtitle

string

默认值  ''

子标题

align

"start" | "center" | "end"

默认值  'center'

横向对齐方向，css的align-items属性

iconAlign

"start" | "center" | "end"

默认值  'start'

图标的对齐方向，css的align-items属性

size

CSize

默认值  'md'

尺寸，该值会影响标题、子标题、字体大小以及图标与标题间的间距