组件总览

Evoke UI 共内置 61 个组件，按用途分为六组：基础元件、布局骨架、站点区块、媒体与交互、 反馈与主题、移动端专属。每个组件卡片右上角带平台兼容标识：

双端兼容 仅桌面保证样式 移动端专属（文档在移动端板块）

移动端适配范式与桌面 → 移动的重排手法见移动端适配板块。

基础

Icon图标双端核心语义集 + 900+ 展示集，点击复制图标名Button按钮双端五种强调层级，pill 胶囊形态IconButton图标按钮双端只有图标的紧凑按钮，hover 浮现底色Tag标签双端胶囊轻标签，附促销色调Badge徽标双端角标计数，99+ 折叠与圆点形态Keycap键帽双端键盘快捷键的键帽视觉Input输入框双端前缀图标、一键清空与错误态Textarea多行输入双端行数控制与字数计数Select下拉选择双端自定义菜单替代原生 selectField字段包装双端标签 + 控件 + 提示的表单外壳Tabs标签页双端分段胶囊与下划线两种页签，窄屏可横滚Switch开关双端二元状态开关，spring 滑块Slider滑块双端连续数值选取，导轨已走过部分着主色Avatar头像双端缺图时自动回退姓名首字AvatarGroup头像组双端头像层叠与 +N 折叠

布局

Container容器双端居中限宽的栅格基座，四档宽度Section区块双端大写眉题 + 展示标题的区块头ScrollScene滚动场景双端滚动叙事舞台，进度随滚动双向驱动Bento图文组合分区双端大小卡混排的 Bento 栅格，图文自动排版Card卡片双端粉彩、贴纸、深色渐变三种卡面Hero首屏桌面淡蓝灰光带上的第一印象Navbar导航双端吸顶磨砂导航，移动端折叠Footer页脚桌面品牌区 + 多栏链接 + 版权条

站点区块

SearchBox搜索框双端分类/输入/动作三段一体的大搜索框IconGrid图标网格桌面分类分节的致密图标网格FeatureGrid特性桌面bullets 特性条与三栏特性卡Statistic指标双端强字重数字，支持入视口滚动LogoCloud品牌墙桌面弱化字标的信任背书位PricingCard定价卡桌面完整定价要素的转化卡ComparisonTable对比表桌面多档位功能差异对照Faq手风琴桌面平滑展开的常见问题Quote评价双端引号装饰的用户评价ArticleCard文章卡桌面封面 + 摘要的博客条目Article文章内容桌面页头 + 阅读排版正文的内容骨架ProfileCard个人名片桌面团队墙与自我介绍位ExecCard高管介绍卡桌面人物图走出卡片的团队介绍卡Timeline时间线双端更新日志与里程碑Cta行动召唤桌面页面收尾的转化区Newsletter订阅桌面一体式邮箱订阅框Alert公告双端胶囊通告横幅与状态提示卡

媒体与交互

Video视频桌面固定画幅承载视频与 iframeAudio音频桌面胶囊卡片式播放器Carousel轮播桌面自动轮播，hover 暂停ImageWall图片墙双端均匀网格图片墙，点击打开灯箱Waterfall瀑布流双端最短列优先的多列瀑布流，比例自适应ImagePreview图片预览双端全屏灯箱，键盘切换与滚动锁定Modal弹出层双端居中对话框，尺寸与底部动作可配Marquee跑马灯桌面无限循环的大字横幅BorderBeam边框流光双端沿边框循环扫过的流光描边ContactForm留言表单桌面联系我们三字段表单

反馈与主题

CodeBlock命令块桌面深色终端形态，一键复制MarkdownMarkdown 渲染桌面零依赖 Markdown 渲染与高亮MarkdownEditorMarkdown 编辑器桌面工具栏 + 编辑预览双栏ThemeToggle主题切换双端明暗切换按钮ConfigProvider主题配置双端运行时换色/圆角/间距/容器宽

移动端专属

PullRefresh下拉刷新移动内容流顶部下拉刷新，对齐原生手感LoadMore加载更多移动列表尾部点击/触底自动加载ActionSheet动作面板移动底部滑入的对象操作菜单NavBar页头移动返回 + 标题 + 动作的 H5 页面头部Tabbar底部标签栏移动H5 一级导航吸底，安全区内置

想看整页效果？

单个组件之外，案例分区用这些组件拼了三个完整页面——企业官网、 个人博客与云笔记工作台，整页可交互，源码可直接拷走作为起点。