5. 🧩 组件化元素 Components ★★★☆☆

🌏 Web 网页规范

  • 基础元素: `button`、`input`、`select`、`dialog` 原生标签
  • 渲染机制: DOM 渲染树与 CSS 盒模型渲染
  • 状态模式: Hover / Active / Focus / Disabled / Active
  • 扩展实现: 自定义 Web Component / 组件库

📱 App 移动端规范

  • 基础元素: Button、TextField、ComboBox、ActionSheet 原生组件
  • 渲染机制: 系统 UI 框架（SwiftUI / Compose）Canvas 渲染
  • 状态模式: Default / Pressed / Focused / Disabled
  • 扩展实现: 自定义 Canvas / 组合式 UI 渲染

Web 悬浮标签输入框与自定义选择组件

Web Floating Labels, Modals & Custom Dropdowns

网页端核心原子组件包括经典的 悬浮 Label 输入框、自定义下拉选择框与模态弹窗，提供连贯的网页录入反馈。

App 底部弹出菜单、抽屉栏与原生滚动选择器

App Bottom Sheets, Drawers & Native Pickers

App 端高频配合单手拇指操作使用 底部弹出菜单 (Bottom Sheet / Action Sheet)、侧滑抽屉栏以及拉起系统原生的年/月/日滚动选择器 (Picker)。

LIVE PLAYGROUND: 原子级 UI 交互状态与轨道适配 Web 模式测试自锁加载按钮，App 模式测试底部抽屉
https://web.meta-ui.edu/components
09:41
📶 🔋

浮动 Label 输入框

加载自锁按钮 (含 scale 物理按压)

选择操作选项
✏️ 编辑内容
🔗 分享至社交平台
🗑️ 删除此记录
取消
📋 大模型统一 Prompt (LLM Prompt)