Aora Bot
  • 简体中文

      • WorkingBadge

      三个错相脉动的点，给正在忙碌的智能体头像用。

      sizePx 14
      import { AgentAvatar, WorkingBadge } from '@aora-bot/react';

export default function Demo() {
  return (
    <div className="site-demo">
      {[
        { id: 'ada', name: 'Ada' },
        { id: 'grace', name: 'Grace' },
      ].map((agent) => (
        <span key={agent.id} style={{ position: 'relative', display: 'inline-flex' }}>
          <AgentAvatar agent={agent} sizePx={44} state="working" />
          <span style={{ position: 'absolute', bottom: -2, insetInlineEnd: -4 }}>
            <WorkingBadge />
          </span>
        </span>
      ))}
      <span className="site-demo__cell">
        <WorkingBadge sizePx={14} />
        <span className="site-demo__label">sizePx 14</span>
      </span>
    </div>
  );
}

      为什么不用转圈

      转圈的意思是「加载中」——有东西正往你这里来。三个点的意思是「工作中」——智能体在做事，你可以先去忙别的。错开的延迟让它们读起来像一个过程，而不是一个闪烁的元素：眼睛会跟着那颗亮点沿行移动。如果同相起步，同样三个点看起来就像一盏警示灯。

      每个点以负的动画延迟起步，所以徽标第一帧就已经处于周期中段，而不是三个点一起满亮地开场。

      放在哪里

      用途上它和 AvatarStatusDot 相邻，位置上也在同一个角：在线点回答智能体在不在，徽标回答它忙不忙，一个头像若同时显示两者，第二个就无处可放。在名册里，请与 working 状态色调搭配，而不是把两者叠在一起。

      无障碍

      徽标是一个以本地化的 avatar.working（或 label）命名的 img，不是 live region。它在屏幕上时状态不会变化，出现时播报一次既足够，也正是读者想要的。

      API

      属性类型默认值说明
      classNamestring——
      labelstring—Accessible name. Defaults to the locale's `avatar.working`.
      sizePxnumber8Height of the badge. The dots and the gaps scale with it.
      styleCSSProperties——

      接下来