按钮 · Button
圆润积木钮,红/蓝/绿/黄四色,硬底 3D 投影,按下真实下沉。
mr-btn ( --red/--blue/--green/--yellow · --sm/--lg/--block/--round )
面板 · Panel
白底厚描边 + 彩色标题条 + 可选四角金钉。
世界 1-4
收集 3 枚星星币,击败关底 Boss 即可解锁下一世界!
mr-panel > mr-panel__hd + mr-panel__bd · 四角金钉:mr-stud tl/tr/bl/br
弹窗 · Modal
遮罩 + 面板 + 圆形红关闭钮。点击预览。
mr-modal-mask > mr-modal ( mr-modal__close + mr-panel )
进度条 · Bar
圆头光泽条,金币/生命/星星三色,可加 label。
mr-bar > mr-bar__fill --coin/--life/--star + mr-bar__label
货币条 · Currency
金币/星星/1UP 三种,白底胶囊。
$×128
★×24
1×5
mr-currency > mr-currency__coin --gold/--star/--life + 数值
状态计量表 · Meter
P 速度表(替代液体球),箭头逐格点亮,满格 P 闪烁。
mr-meter > 多个 mr-meter__seg(点亮加 .on) + mr-meter__p
图标底座 · Icon Slot
道具槽,普通/稀有/传说底色 + 冷却遮罩。
mr-icon ( --rare / --legend ) · 冷却:mr-icon__cd
卡片 · Card
角色/道具卡,含标签、名称、底部插槽,悬停上浮。
mr-card ( --red/--green/--yellow ) > __art(含 __tag) + __name + __foot
列表项 · List
道具/关卡通用行,左图标 + 主副标题 + 右值。
mr-list > mr-list__item ( __ic + __tx(b+small) + __val )
顶部 HUD · HUD Bar
头像 + 名称/关卡 + 右侧货币。
mr-hud > mr-hud__ava + mr-hud__who(b+small) + mr-hud__spacer + 右侧组件
导航栏 · Nav Bar
底部主导航,--active 高亮。点击切换。
mr-nav > mr-nav__tab ( --active ) > span.i + 文字
标签页 · Tabs
面板分页,点击切换。
道具:超级蘑菇 ×12 · 火焰花 ×3 · 无敌星 ×1
mr-tabs > mr-tabs__tab ( --active )
输入框 · Input
圆角厚边,聚焦蓝光环;可选前置图标 mr-field。
<input class="mr-input"> · 带图标:mr-field > mr-field__ic + mr-input
下拉选择 · Select
圆角定制 + 箭头。
mr-select > <select> > <option>
徽章 · Badge
红/黄徽章,可贴图标右上。
mr-badge ( --yellow ) · 贴角:mr-badge-wrap > 内容 + mr-badge
角标 · Ribbon
卡片左上丝带。放 position:relative 容器内。
mr-ribbon ( --yellow ) · 置于 relative 容器内
标签 · Tag
属性小标签,红/绿/黄变体。
跳跃
🔥 火焰
🍄 变大
⭐ 无敌
mr-tag ( --red / --green / --yellow )
提示 · Tooltip
悬停显示,内容取 data-tip。悬停试试。
踩踏
火焰花
无敌星
<span class="mr-tooltip" data-tip="内容">
通知 · Toast
圆角提示,普通/危险/金币三种图标色。
🪙获得 100 金币!再收集 400 枚可换取 1UP。
mr-toast ( --danger / --coin ) > mr-toast__ic + 内容(b 标题)
对话气泡 · Bubble
NPC 对话框,含说话人名与尖角。
蘑菇头 · 奇诺比奥
公主被抓走了!快去城堡救她,一路上小心那些乌龟怪哦!
mr-bubble > mr-bubble__who + 对话文字
加载 · Spinner
旋转金币(rotateY 翻转)。
mr-spinner
头像组 · Avatar Group
圆形叠放 + 溢出计数。
mr-avatars > 多个 mr-avatars__a + mr-avatars__more
星级评分 · Stars
关卡评级,.on 点亮金星。
★★★★★
★★★★★
mr-stars > 多个 <span>★,点亮加 .on
分隔线 · Divider
粗圆线,可带中心标签。
mr-divider > mr-divider__mark
空状态 · Empty
列表为空占位,图标+标题+说明。
mr-empty > mr-empty__ic + mr-empty__tt + mr-empty__ds
★ 进阶组件 · Advanced
复杂交互组件,均可操作。
步进器 · Stepper
圆钮数量选择,可点增减。
mr-stepper > mr-stepper__btn(−) + mr-stepper__val + mr-stepper__btn(+)
面包屑 · Breadcrumb
层级路径,末项高亮。
mr-breadcrumb > a + __sep … + __cur
手风琴 · Accordion
原生 details,无需 JS。
怎么变大?
吃下超级蘑菇即可变大一级,再被击中会缩小而不是直接死亡。
怎么发射火球?
变大状态下吃火焰花,即可发射火球攻击敌人。
星星有什么用?
无敌星让你短时间内无敌并加速,碰到敌人可直接消灭。
mr-accordion > <details> ( <summary> + mr-accordion__bd )
侧边抽屉 · Drawer
右滑面板。点击预览。
mr-drawer-mask + mr-drawer ( __hd + __bd ) · 加 .open 展开
数据表格 · Table
排行榜,斑马纹 + 悬停高亮。
| 排名 | 玩家 | 关卡 | 分数 |
|---|
| ① | 红帽玩家 | 8-4 | 128,400 |
| ② | 绿帽玩家 | 8-3 | 117,900 |
| ③ | 公主 | 7-4 | 106,700 |
| 4 | 奇诺比奥 | 6-2 | 95,210 |
table.mr-table > thead th + tbody td · 名次:mr-table__rank
分页器 · Pagination
翻页,--active 当前 / --dis 禁用。点击切换。
mr-pagination > mr-pagination__pg ( --active / --dis )
时间轴 · Timeline
竖向进度,--done 完成 / --now 当前。
mr-timeline > mr-timeline__item ( --done/--now ) ( __t + __d )
树形菜单 · Tree
嵌套分类,details 折叠。
🍄 道具
超级蘑菇 (12)
火焰花 (3)
特殊道具
无敌星 (1)
超级叶子 (2)
🏆 收藏
星星币 (24)
徽章 (8)
mr-tree > 嵌套 <details> + mr-tree__leaf
能量条倒计时 · Energy
体力/生命,含实时倒计时。
mr-energy > __orb + __body ( __top(含 __timer) + mr-bar )
签到日历 · Calendar
7 日签到,--done 已领 / --today 当天。
mr-calendar > mr-calendar__day ( --done / --today )
任务链 · Quest Chain
世界关卡路径,--done/--now + 连接线。
mr-questchain > __node( --done/--now ) 与 __link( --done ) 交替
成就解锁 · Achievement
奖章+标题+描述,--locked 灰化。
mr-achievement ( --locked ) > __medal + __tx(b+small)
翻牌 · Flip Card
CSS 3D 翻转,砖块背面 → 道具正面。点击翻。
mr-flipcard > __inner > __face __back + __face __front · 加 .flipped
敲问号砖 · Chest
点击弹跳敲击,揭示道具。
mr-chest > __box + __label + __glow · 加 .opened
背包网格 · Inventory Grid
格子背包,稀有度底色、数量角标、空格。
mr-invgrid > mr-invgrid__cell ( --rare/--legend/--empty ) + mr-invgrid__qty
道具对比 · Compare
当前 vs 新道具,属性升降绿/红标注。
mr-compare > __side + __vs + __side · 升降:mr-compare__up / __down