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>