ListItem

ListItem 是一个支持加载中进度条或多种无限动画效果的列表项组件，适用于需要异步操作反馈的场景。

简介

ListItem 组件用于展示列表项内容，并在异步操作时显示进度条或多种无限动画效果，提升用户操作反馈体验。

基础用法

普通列表项

基础列表项

---
import { ListItem } from '@coffic/cosy-ui';
---

<ListItem loading={false}>普通列表项</ListItem>

普通列表项

基础列表项

<template>
  <ListItem>基础列表项</ListItem>
</template>

<script setup lang="ts">
import { ListItem } from '@coffic/cosy-ui/vue';
</script>

加载中状态（无限动画）

加载中

加载中列表项 Vue

---
import { ListItem } from '@coffic/cosy-ui';
---

<ListItem loading={true} loadingAnimationType="ring">加载中</ListItem>

加载中

加载中列表项 Vue

<template>
  <ListItem :loading="true">加载中列表项 Vue</ListItem>
</template>

<script setup>
import { ListItem } from '@coffic/cosy-ui/vue';
</script>

动画类型

ListItem 支持多种无限动画效果，通过 animationType 属性控制：

Ring 外环脉冲默认效果

前置图标 Spinner 旋转

后置图标 Dots 跳动

背景呼吸背景色变化

整体脉冲缩放 + 透明度

发光边框阴影发光

Ring 外环脉冲默认效果

前置图标Spinner 旋转

后置图标Dots 跳动

背景呼吸背景色变化

整体脉冲缩放 + 透明度

发光边框阴影发光

---
/**
 * @component ListItemAnimationTypesExample
 * @description 展示 ListItem 的所有动画效果类型
 */
import { ListItem } from '@coffic/cosy-ui';
---

<div class="cosy:space-y-4">
  <div class="cosy:grid cosy:gap-4">
    <ListItem loading={true} loadingAnimationType="ring">
      <span class="cosy:font-medium">Ring 外环脉冲</span>
      <span class="cosy:ml-auto cosy:text-sm cosy:opacity-70">默认效果</span>
    </ListItem>

    <ListItem loading={true} loadingAnimationType="icon-left">
      <span class="cosy:font-medium">前置图标</span>
      <span class="cosy:ml-auto cosy:text-sm cosy:opacity-70">Spinner 旋转</span
      >
    </ListItem>

    <ListItem loading={true} loadingAnimationType="icon-right">
      <span class="cosy:font-medium">后置图标</span>
      <span class="cosy:ml-auto cosy:text-sm cosy:opacity-70">Dots 跳动</span>
    </ListItem>

    <ListItem loading={true} loadingAnimationType="breath">
      <span class="cosy:font-medium">背景呼吸</span>
      <span class="cosy:ml-auto cosy:text-sm cosy:opacity-70">背景色变化</span>
    </ListItem>

    <ListItem loading={true} loadingAnimationType="pulse">
      <span class="cosy:font-medium">整体脉冲</span>
      <span class="cosy:ml-auto cosy:text-sm cosy:opacity-70"
        >缩放 + 透明度</span
      >
    </ListItem>

    <ListItem loading={true} loadingAnimationType="glow">
      <span class="cosy:font-medium">发光边框</span>
      <span class="cosy:ml-auto cosy:text-sm cosy:opacity-70">阴影发光</span>
    </ListItem>
  </div>
</div>

Ring 外环脉冲默认效果

前置图标 Spinner 旋转

后置图标 Dots 跳动

背景呼吸背景色变化

整体脉冲缩放 + 透明度

发光边框阴影发光

Ring 外环脉冲默认效果

前置图标Spinner 旋转

后置图标Dots 跳动

背景呼吸背景色变化

整体脉冲缩放 + 透明度

发光边框阴影发光

<template>
  <div class="cosy:space-y-4">
    <div class="cosy:grid cosy:gap-4">
      <ListItem :loading="true" animation-type="ring">
        <span class="cosy:font-medium">Ring 外环脉冲</span>
        <span class="cosy:ml-auto cosy:text-sm cosy:opacity-70">默认效果</span>
      </ListItem>

      <ListItem :loading="true" animation-type="icon-left">
        <span class="cosy:font-medium">前置图标</span>
        <span class="cosy:ml-auto cosy:text-sm cosy:opacity-70"
          >Spinner 旋转</span
        >
      </ListItem>

      <ListItem :loading="true" animation-type="icon-right">
        <span class="cosy:font-medium">后置图标</span>
        <span class="cosy:ml-auto cosy:text-sm cosy:opacity-70">Dots 跳动</span>
      </ListItem>

      <ListItem :loading="true" animation-type="breath">
        <span class="cosy:font-medium">背景呼吸</span>
        <span class="cosy:ml-auto cosy:text-sm cosy:opacity-70"
          >背景色变化</span
        >
      </ListItem>

      <ListItem :loading="true" animation-type="pulse">
        <span class="cosy:font-medium">整体脉冲</span>
        <span class="cosy:ml-auto cosy:text-sm cosy:opacity-70"
          >缩放 + 透明度</span
        >
      </ListItem>

      <ListItem :loading="true" animation-type="glow">
        <span class="cosy:font-medium">发光边框</span>
        <span class="cosy:ml-auto cosy:text-sm cosy:opacity-70">阴影发光</span>
      </ListItem>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * @component ListItemAnimationTypesExample
 * @description 展示 ListItem 的所有动画效果类型
 */
import { ListItem } from '@coffic/cosy-ui/vue';
</script>

进度条时长自定义

传入 duration 时，显示进度条动画：

3秒进度条

📈 数据分析2秒进度条

---
import { ListItem } from '@coffic/cosy-ui';
---

<ListItem loading={true} duration={3000} loadingAnimationType="ring"
  >3秒进度条</ListItem
>

3秒进度条

📈 数据分析2秒进度条

<template>
  <ListItem :loading="true" :duration="2000">
    <span class="cosy:text-lg">📈 数据分析</span>
    <span class="cosy:ml-auto cosy:text-sm cosy:opacity-70">2秒进度条</span>
  </ListItem>
</template>

<script setup lang="ts">
import { ListItem } from '@coffic/cosy-ui/vue';
</script>