logo
导航

ListItem

ListItem is a list item component that supports a loading progress bar or ring animation, suitable for async operation feedback scenarios.

Introduction

The ListItem component displays list item content and shows a progress bar or ring animation during async operations, improving user feedback experience.

Basic Usage

  • 普通列表项
  • 基础列表项
  • ---
    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>
    

    Loading State (Indeterminate)

  • 加载中
  • 加载中列表项 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>
    

    Custom Progress Duration

    If duration is provided, a progress bar animation is shown:

  • 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>