O componente ChatShimmer renderiza um elemento com um gradiente shimmer animado sobre o texto, comumente usado para indicar estados de streaming ou carregamento em interfaces de chat.
ChatTool e ChatReasoning durante o streaming.Use a prop text para definir o texto do shimmer.
<template>
<NChatShimmer text="Thinking..." />
</template>
Use a prop duration para controlar a velocidade da animação em segundos.
<template>
<NChatShimmer text="Thinking..." :duration="4" />
</template>
Use a prop spread para controlar a largura do destaque do shimmer. O spread real é calculado como text.length * spread em pixels.
<template>
<NChatShimmer text="Thinking..." :spread="5" />
</template>
| Prop | Default | Type |
|---|---|---|
as | 'span' | anyThe element or component this component should render as. |
text | stringThe text to display with the shimmer effect. | |
duration | 2 | numberThe duration of the shimmer animation in seconds. |
spread | 2 | numberThe spread multiplier for the shimmer highlight. The actual spread is computed as |
ui | {} |
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))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]'
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]'
}
}
})
]
})