WA 3.12:Figma 设计套件 3.0、下拉链接及工具提示修复

WA 3.12:Figma 设计套件 3.0、下拉链接及工具提示修复

💡 原文英文,约200词,阅读约需1分钟。
📝

内容提要

Figma Design Kit 3.0 发布,新增十个组件及变量、插槽和尺寸选项。`<wa-dropdown-item>` 支持链接属性,`<wa-tooltip>` 修复事件问题。另有开关、选择框、输入框等多项修复,详情见更新日志。

🔎

延伸解读

Figma 设计套件 3.0 的更新重点

本次更新新增了十个组件,并补充了变量、插槽和尺寸选项,进一步缩小了 Figma 与代码库之间的差距。对于设计团队而言,这意味着在 Figma 中能更贴近实际开发组件,减少设计与实现之间的偏差。建议设计师关注新增组件的具体列表,以便在项目中及时采用。

下拉项链接功能的实际影响

wa-dropdown-item 现在支持 href、target、rel 和 download 属性,使其可以像真实链接一样工作。但需要注意,带有子菜单的项会忽略 href,且 ⌘/Ctrl 点击会在新标签页打开(Safari 除外)。开发者在使用时应考虑这些限制,避免在子菜单项上设置链接导致失效。

工具提示修复的细节

wa-tooltip 现在会尊重取消的 wa-hide 事件,保持打开状态;同时,trigger="email" 的工具提示不再因 Escape 键关闭。这些修复提升了交互的稳定性和可预测性,尤其对于依赖键盘操作或需要精确控制提示显示的场景,用户将获得更一致的体验。

Q&A

Figma Design Kit 3.0 有哪些新变化?

Figma Design Kit 3.0 新增了十个组件,并添加了额外的变量、插槽和尺寸选项,以缩小 Figma 与库之间的差距。

wa-dropdown-item 现在支持哪些链接属性?

wa-dropdown-item 现在支持 href、target、rel 和 download 属性,使其能够像真正的链接一样工作。

在 wa-dropdown-item 中,如何在新标签页打开链接?

在 wa-dropdown-item 中,按住 ⌘/Ctrl 键点击链接会在新标签页打开(Safari 除外)。

wa-tooltip 修复了哪些问题?

wa-tooltip 现在会尊重取消的 wa-hide 事件并保持打开状态,同时修复了 trigger="email" 时按 Escape 键关闭的问题。

本次更新还修复了哪些组件的问题?

本次更新还修复了 wa-switch 的焦点环、wa-select 清除按钮的点击目标、wa-input 密码切换、wa-dropdown 的 aria-posinset/aria-setsize,以及 wa-data-grid 的过滤和布局等问题。

wa-dropdown-item 的子菜单项是否支持链接?

不,带有子菜单的 wa-dropdown-item 会忽略 href 属性,因此子菜单项不支持链接。

🏷️

标签

➡️

继续阅读