ChatShimmer 이미지
텍스트 쉬머 애니메이션 효과를 표시합니다.
Usage
ChatShimmer 구성 요소는 텍스트 위에 애니메이션 shimmer 그라디언트를 가진 요소를 렌더링하며, 일반적으로 채팅 인터페이스에서 스트리밍 또는 로드 상태를 나타내는 데 사용됩니다.
사용자가 축소된 모션을 선호하면 애니메이션이 자동으로 비활성화되고 텍스트는 정적 음소거 텍스트로 표시됩니다.
Text
text prop을 사용하여 shimmer 텍스트를 설정합니다.
Thinking...
<template>
<UChatShimmer text="Thinking..." />
</template>기간
duration Prop을 사용하여 애니메이션 속도를 초 단위로 제어합니다.
Thinking...
<template>
<UChatShimmer text="Thinking..." :duration="4" />
</template>spread (### 스프레드)
spread 소품을 사용하여 shimmer 강조 표시의 폭을 제어합니다. 실제 스프레드는 픽셀 단위의 text.length * spread로 계산됩니다.
Thinking...
<template>
<UChatShimmer text="Thinking..." :spread="5" />
</template>examples 예
API
Props (### Props)
| 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 | {} |
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'
}
}
})
]
})변경 로그
No recent changes