MotionControl

用法

全部变体

variant 选择控件；选项与命令都由调用方提供。

最佳实践

• 业务结果由应用持有：菜单命令不代表后端成功，PiP 状态不代表平台已切换，download 只是请求。
• 使用稳定的 value 键，文案单独本地化；分类、日期、频率、标签与命令由调用方提供。
• 可关闭标签同时绑定 v-model 与 v-model:items；要保留最后一项时设 minItems="1"，用 add 分配真实 ID。
• item 插槽内不放交互元素；独立操作放在原生按钮之外，丰富内容用 panel 插槽。
• status 与 progress 来自真实传输，取消与错误也在传输层处理。

API 参考

属性

事件

插槽

类型

MotionControlItem

MotionControlLabels

labels 的键与默认值，导出为 MOTION_CONTROL_DEFAULT_LABELS：

{
  control: 'Motion control', choose: 'Choose an option', frequency: 'Frequency',
  confirm: 'Confirm selection', add: 'Add tab', close: 'Close',
  increase: 'Increase', decrease: 'Decrease', back: 'Back', forward: 'Forward',
  actions: 'Actions', details: 'View details', action: 'Action', launch: 'Launch',
  link: 'Open link', preview: 'Preview', help: 'Help', download: 'Download',
  downloading: 'Downloading', downloaded: 'Downloaded', downloadError: 'Download failed',
  pip: 'Enter picture in picture', pipOff: 'Exit picture in picture',
  save: 'Save item', saved: 'Saved', follow: 'Follow', following: 'Following',
  grid: 'Grid view', list: 'List view', stack: 'Stack view', light: 'Light mode',
  dark: 'Dark mode', progress: 'Progress', page: 'Page',
}

源码映射

源码路径相对于上游 src/components/css-animations/。MOTION_CONTROL_SOURCES 导出每项的完整路径、行号、上游导出名与模型类型，MOTION_CONTROL_VARIANTS 导出全部变体 ID。

目录变体

额外导出

概述

• 内部组合 TxSelect、TxTabs、TxDropdownMenu、TxContextMenu、TxTooltip、TxPagination 与 TxTextMorph；焦点、方向键、Escape、外部点击与锚定沿用这些原语。
• 计数器聚焦后 ↑ / ↓ 增减，Home / End 跳到边界；频率选择器收起后焦点回到触发器。
• yui-multi-tab-close 关闭当前标签时选中最近的可用标签，关闭其他标签不改变选择；模型事件不等待退场动画。
• 关闭按钮位于标签导航旁的独立操作条，不嵌套在标签按钮内。
• 菜单命令沿用原语的 select 时序：关闭前保留确认节奏，减少动态效果时立即执行。
• 离屏、文档隐藏、KeepAlive 失活、卸载或减少动态效果时停止动效。

技术实现

• 上游：Amicro 提交 43c29ce，MIT，Copyright (c) 2026 SYED SUBHAN UDDIN。
• 源码：packages/tuffex/packages/components/src/motion-control/。