ChatShimmer

GitHub

显示文本闪烁动画效果。

用法

ChatShimmer组件在文本上呈现具有动画闪烁渐变的元素，通常用于指示聊天界面中的流或加载状态。

流式传输时，ChatTool和ChatReasoning组件自动使用此组件。

当用户喜欢减少运动时，动画自动禁用，文本显示为静态静音文本。

Text

使用text道具设置微光文本。

text

Thinking...

<template>
  <UChatShimmer text="Thinking..." />
</template>

持续时间

使用duration道具控制动画速度（以秒为单位）。

text

duration

Thinking...

<template>
  <UChatShimmer text="Thinking..." :duration="4" />
</template>

Spread

使用spread属性来控制微光高光的宽度。实际的扩散以像素为单位计算为text.length * spread。

text

spread

Thinking...

<template>
  <UChatShimmer text="Thinking..." :spread="5" />
</template>

示例

查看Chat概述页面以获取安装说明、服务器设置和使用示例。

API

Props

Prop	Default	Type
`as`	`'span'`	`any` The element or component this component should render as.
`text`		`string` The text to display with the shimmer effect.
`duration`	`2`	`number` The duration of the shimmer animation in seconds.
`spread`	`2`	`number` The spread multiplier for the shimmer highlight. The actual spread is computed as `text.length * spread` in pixels.
`ui`		`{}`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    chatShimmer: {
      base: 'text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-text-muted),var(--ui-text-muted))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted'
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        chatShimmer: {
          base: 'text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-text-muted),var(--ui-text-muted))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted'
        }
      }
    })
  ]
})

Changelog

No recent changes

ChatReasoning

Display a collapsible AI reasoning or thinking process.

ChatTool

Display a collapsible AI tool invocation status.