For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.0/components/emoji-picker.md.
A3S UI
  • 简体中文
  • v0.4.0

      • 表情选择器

      在可搜索、可键盘遍历的有限集合中选择一个表情，并把选择结果作为普通文本交给宿主。

      实时预览

      用法

      <section class="emoji-picker" aria-label="选择回应表情">
  <input class="input" type="search" placeholder="搜索回应" aria-label="搜索回应" /><div data-emoji-grid role="listbox"><button type="button" data-emoji-value="👍" aria-label="赞同">👍</button><button type="button" data-emoji-value="🎉" aria-label="庆祝">🎉</button><button type="button" data-emoji-value="❤️" aria-label="喜爱">❤️</button><p hidden data-emoji-empty>没有匹配的回应。</p></div>
</section>

      独立控制器

      import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/emoji-picker";

const component = document.querySelector(".emoji-picker");
component.getState();

      控制器是幂等的；完整包可改为一次导入 @a3s-lab/ui/all。宿主通过可取消的 before-* 事件执行权限与业务校验。

      契约

      接口值
      根选择器.emoji-picker
      原生根元素<section>
      状态ready, empty, disabled
      事件a3s:emoji-before-select, a3s:emoji-query-change, a3s:emoji-select
      方法getState, refresh, select, setQuery

      产品边界

      组件不管理最近使用、皮肤偏好、远程表情包或消息发送。大型目录应由宿主提供分组、虚拟化和本地化搜索数据。

      组件只发布可复用的交互边界。数据获取、持久化、权限、可信内容与业务实体继续由宿主产品拥有。

      可访问性

      每个表情按钮需要名称，方向键在可见结果中移动，空结果明确播报。表情是内容，不承担无文字界面图标的职责。