开发预览更新于 2026-05-10

TypingIndicator 输入中

三圆点 bouncing 动画 + 可选名字 prefix；prefers-reduced-motion 时退化为静态。

基础用法

背景视口

AliceBoChen

src/App.vue

<script setup lang="ts">
import { CfTypingIndicator } from '@chufix-design/vue';
</script>
<template>
  <div class="ti-demo">
    <CfTypingIndicator />
    <CfTypingIndicator name="Alice" />
    <CfTypingIndicator name="Bo" tone="accent" />
    <CfTypingIndicator size="sm" name="Chen" />
  </div>
</template>
<style scoped>
.ti-demo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

<script setup>
import { CfTypingIndicator } from '@chufix-design/vue';
</script>
<template>
  <div class="ti-demo">
    <CfTypingIndicator />
    <CfTypingIndicator name="Alice" />
    <CfTypingIndicator name="Bo" tone="accent" />
    <CfTypingIndicator size="sm" name="Chen" />
  </div>
</template>
<style scoped>
.ti-demo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

import { CfTypingIndicator } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfTypingIndicator />
      <CfTypingIndicator name="Alice" />
      <CfTypingIndicator name="Bo" tone="accent" />
    </>
  );
}

import { CfTypingIndicator } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfTypingIndicator />
      <CfTypingIndicator name="Alice" />
      <CfTypingIndicator name="Bo" tone="accent" />
    </>
  );
}

API

属性	类型	默认	说明
`name`	`string`	—	名字前缀
`size`	`'sm' \| 'md'`	`'md'`
`tone`	`'default' \| 'accent'`	`'default'`