#表情选择器
在可搜索、可键盘遍历的有限集合中选择一个表情，并把选择结果作为普通文本交给宿主。
没有匹配的回应。
尚未选择回应。
安装Terminal
npm install @a3s-lab/ui@0.4.1<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/a3s.css";
import "@a3s-lab/ui/all";没有匹配的回应。
没有匹配的回应。
<div class="grid gap-4" data-emoji-picker-availability="zh">
<section class="emoji-picker" aria-label="空回应集合" data-state="empty">
<input class="input" type="search" value="zzzz" aria-label="搜索空集合" />
<div data-emoji-grid role="listbox">
<button type="button" data-emoji-value="👍" aria-label="赞同" hidden>👍</button>
<p data-emoji-empty>没有匹配的回应。</p>
</div>
</section>
<section class="emoji-picker" aria-label="锁定回应集合" data-disabled="true">
<input class="input" type="search" placeholder="搜索回应" aria-label="搜索锁定回应" disabled />
<div data-emoji-grid role="listbox">
<button type="button" data-emoji-value="👍" aria-label="赞同" disabled>👍</button>
<button type="button" data-emoji-value="🎉" aria-label="庆祝" disabled>🎉</button>
<p hidden data-emoji-empty>没有匹配的回应。</p>
</div>
</section>
</div>#用法
<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 |
#产品边界
它不拥有最近使用、肤色偏好、远程表情包或消息发送。大型目录需要宿主提供分组、虚拟化与本地化检索数据。
组件只发布可复用的交互边界。数据获取、持久化、权限、可信内容与业务实体仍由宿主拥有。
#无障碍
为根节点提供可访问名称，选项保持为带明确标签的按钮，并保留键盘网格导航。空结果必须通过空消息节点保持可感知。