SuperAPI AI 工具集

render-ios-keyboard

前端与建站

查看项目

更新于 10-15 21:54

技能介绍

用途:提供可直接嵌入的 iOS QWERTY 键盘片段,配合 create-chatgpt-mockup、create-imessage-mockup 等消息类原子,用于视频中展示“正在输入”的画面。键盘固定在屏幕底部,由所属分子用 transform: translateY(...) 控制滑入滑出。

主要能力:通过 require('./generate') 获取 renderKeyboardHTML 与 renderKeyboardCSS。renderKeyboardHTML 接收 suggestions(最多三条字符串,默认 ['I', 'The', "I'm"])与 layout('qwerty-lower' 默认、'qwerty-upper'、'numbers'),返回单个根 div.ios-keyboard,内含建议栏、三行字母键、底部行(123/ABC、emoji、宽空格、return)及系统条(地球、麦克风)。用户字符串经 escapeHTML 转义。renderKeyboardCSS 读取 templates/keyboard.css,类名限定在 .ios-keyboard 下,避免冲突。

使用方式:先 require 模块,选择布局并传入建议,将 HTML 片段与 CSS 分别注入页面(CSS 放入 style 块),由分子负责动画与布局切换。本地预览可运行:node render.js --out /tmp/kb.html --suggestions 'I,The,I'''m',生成 750×1334 独立页面。

适用场景:需要静态 iOS 键盘外观的短视频、聊天界面模拟、UI 演示。

限制:无按键弹出动画、无 emoji 面板、无大小写切换交互;大写/数字仅为视觉变体,由分子决定显示;未知 layout 静默回退为 qwerty-lower;超过三条建议会挤压布局;未注入 CSS 则无样式;templates/keyboard.css 缺失会抛 ENOENT;render.js 未传 --out 会打印用法并以码 1 退出。键盘在 750 宽舞台约占 518px 垂直空间。