DESIGN NOTES
为什么值得收藏
- 分组折叠字体和版本历史内容均可折叠,用户按需展开查看。
- 效果描述向 AI 描述为设置页中两个独立的折叠区:字体、版本历史;点击各区标题切换展开与收起状态。原文未指定动画时长。
同源设计合集 · 6 项
UI 组件
结合原始资料,按需应用到自己的设计中。
实现一个可折叠的字体与版本历史设置区(原生 HTML/CSS/JS,零依赖,单文件交付): 【效果描述】设置页包含“字体”和“版本历史”两个独立折叠区。点击各区标题,可展开或收起对应内容;两个区可以同时展开。视觉细节以所提供的原图为参考,不臆造原图中无法确认的样式。 【交互参数】初始状态均为收起;鼠标点击标题,或通过键盘聚焦后按 Enter、空格键切换状态。标题的可点击区域高度至少 44px。原规格未指定动画时长;如加入动画,建议以可调参数设置为 180ms,并在 `prefers-reduced-motion: reduce` 下关闭。内容为空时仍允许切换,显示简短的空状态提示。 【使用示例】展开“字体”查看字体设置;保持“字体”展开,同时展开“版本历史”查阅更新记录。 【实现要点】使用两个独立的 `<details>` 与 `<summary>` 实现折叠和键盘操作;分别填入字体设置与版本记录的示例内容;为标题、内容和展开状态添加清晰的视觉区分。单文件包含完整 HTML、CSS 和必要的 JS。 【质量要求】所有样式限定在组件容器内,类名使用 `uw-` 前缀,不污染全局样式;支持 `prefers-reduced-motion`;用注释标明初始展开状态、点击区域尺寸和动画时长等可调参数。 【参考资源】 - 资料详情:https://ui.undoai.cn/components/x-hub-collapsible-settings-sections/ - Demo 源码:https://ui.undoai.cn/components/x-hub-collapsible-settings-sections/demo.html - 原始设计参考图:https://ui.undoai.cn/components/x-hub-collapsible-settings-sections/refs/01.jpg(字体与版本历史折叠内容的原图参考)
将提示词与你的页面背景、技术栈和目标尺寸一起交给代码助手。实现后对照原图检查布局和状态,再验证键盘、触控和减少动态效果。
展开后加载源代码
查看 Markdown 全文,复制或下载 design.md 后交给开发者使用。
# 可折叠的字体与版本历史 — design.md 内容版本:sha256:d783bdde11760875c8b7e056ec0428c8126ddc9eda176ecc770afcf58c3f1bee 本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明;未提供的数值不作推断。实现建议须在后续开发中选择和验收。 ## 元数据记录 - 资产:components/x-hub-collapsible-settings-sections;语义类型:interaction。 - 分类:交互模式。 - 标签:折叠面板、设置页、版本历史。 - 场景:查看字体设置、查阅版本历史、收起暂不需要的设置内容。 - 平台:未提供。 - 风格:未提供。 ### 亮点声明 - 分组折叠:字体和版本历史内容均可折叠,用户按需展开查看。 - 效果描述:向 AI 描述为设置页中两个独立的折叠区:字体、版本历史;点击各区标题切换展开与收起状态。原文未指定动画时长。 ### 实际文件与参考资源 - `demo.html`(sha256:0a5c65101bba4db07105314394a106f5919681c8f94c95d4c700202b96e3186e) - `meta.yml` - `refs/01.jpg`(sha256:81a6d5c4e3b4834806e96c9b9ac9232ba889293c6e755ff55868cd2e5c149a4f) - 参考图:`refs/01.jpg`;字体与版本历史折叠内容的原图参考。 - 实现摘要:sha256:0a5c65101bba4db07105314394a106f5919681c8f94c95d4c700202b96e3186e。 ## 未提供 - 未结构化记录的精确色值、字号、间距、断点、动效时长与状态转换参数不作推断;亮点中的数值属于元数据声明,demo 的存在与摘要不代表浏览器行为已验收。 ## 实现建议 - 按正常、悬停、聚焦、激活、禁用、加载、成功和错误状态定义适用的状态表。 - 使用语义化元素,验证键盘操作、焦点可见性、触控目标和减少动效偏好。 - 以 demo.html 为实现参考,逐项验证交互、窄屏布局、文本溢出和错误恢复;具体参数由实现与验收确认。
在完整提示词后补充你的要求;生成提示词不会创建新资产。
DESIGN NOTES
GOOD FOR