按钮 · Button
硬边像素钮,红/绿/蓝/黄/紫,底部厚墩,按下整块下沉。
px-btn ( --red/--green/--blue/--yellow/--purple · --sm/--lg/--block )
面板 · Panel
像素窗口,彩色标题条 + 可选四角方块。
QUEST
击败 5 只史莱姆,把它们的黏液带回村庄。奖励:100 金币。
px-panel > px-panel__hd + px-panel__bd · 四角:px-corner tl/tr/bl/br
弹窗 · Modal
遮罩 + 面板 + 像素关闭钮。点击预览。
px-modal-mask > px-modal ( px-modal__close + px-panel )
进度条 · Bar
像素填充条,HP/MP/XP/STA 四色,可加 label。
px-bar > px-bar__fill --hp/--mp/--xp/--sta + px-bar__label
货币条 · Currency
金币/宝石/爱心,像素方块图标。
$999
◆42
♥3
px-currency > px-currency__ic --gold/--gem/--heart + 数值
生命格 · Hearts
像素爱心生命(替代液体球),满心/空心。
px-hearts > px-hearts__row > span.h(空心加 .empty)
图标底座 · Icon Slot
道具槽,普通/稀有/传说底色 + 冷却遮罩。
px-icon ( --rare / --legend ) · 冷却:px-icon__cd
卡片 · Card
像素卡,含标签、名称、底部插槽,按下位移。
px-card ( --red/--green/--purple ) > __art(含 __tag) + __name + __foot
列表项 · List
物品/日志通用行,左图标 + 主副标题 + 右值。
px-list > px-list__item ( __ic + __tx(b+small) + __val )
顶部 HUD · HUD Bar
头像 + 名称/等级 + 右侧货币。
px-hud > px-hud__ava + px-hud__who(b+small) + px-hud__spacer + 右侧组件
导航栏 · Nav Bar
底部主导航,--active 高亮。点击切换。
px-nav > px-nav__tab ( --active ) > span.i + 文字
标签页 · Tabs
面板分页,点击切换。
px-tabs > px-tabs__tab ( --active )
输入框 · Input
像素边框,聚焦青色描边;可选前置图标。
<input class="px-input"> · 带图标:px-field > px-field__ic + px-input
下拉选择 · Select
像素定制 + 三角箭头。
px-select > <select> > <option>
徽章 · Badge
红/黄像素徽章,可贴图标右上。
px-badge ( --yellow ) · 贴角:px-badge-wrap > 内容 + px-badge
角标 · Ribbon
卡片左上像素角标。放 relative 容器内。
px-ribbon ( --yellow ) · 置于 relative 容器内
标签 · Tag
属性小标签,红/绿/蓝文字。
近战
火 +10
毒
冰
px-tag ( --red / --green / --blue )
提示 · Tooltip
悬停显示,内容取 data-tip。悬停试试。
CRIT
REGEN
FIRE
<span class="px-tooltip" data-tip="内容">
通知 · Toast
像素提示,普通/危险/金币三色边框。
px-toast ( --danger / --coin ) > px-toast__ic + 内容(b 标题)
对话气泡 · Bubble
NPC 对话框,含说话人名 + 闪烁"按 A 继续"。
村长
勇者啊!魔王就在北方的城堡里,带上这把剑去打倒他吧!
▼ 按 A 继续px-bubble > px-bubble__who + 文字 + px-bubble__blink
加载 · Spinner
方块绕圈(steps 逐帧,非平滑)。
px-spinner
头像组 · Avatar Group
方框叠放 + 溢出计数。
px-avatars > 多个 px-avatars__a + px-avatars__more
星级评分 · Stars
物品品质,.on 点亮黄星。
★★★★★
★★★★★
px-stars > 多个 <span>★,点亮加 .on
分隔线 · Divider
虚点线,可带中心标签。
px-divider > px-divider__mark
空状态 · Empty
列表为空占位,图标+标题+说明。
px-empty > px-empty__ic + px-empty__tt + px-empty__ds
进阶组件 · ADVANCED
复杂交互组件,均可操作。
步进器 · Stepper
数量选择,可点增减。
px-stepper > px-stepper__btn(-) + px-stepper__val + px-stepper__btn(+)
面包屑 · Breadcrumb
层级路径,末项高亮。
px-breadcrumb > a + __sep … + __cur
手风琴 · Accordion
原生 details,+/- 切换。
怎么存档?
在村庄的记录点或使用存档水晶即可保存进度。
怎么合成装备?
收集材料后前往铁匠铺,消耗金币和材料合成更强的装备。
怎么复活?
阵亡后会回到最近的存档点,损失一半金币但保留经验。
px-accordion > <details> ( <summary> + px-accordion__bd )
侧边抽屉 · Drawer
右滑面板(steps 逐帧滑入)。点击预览。
px-drawer-mask + px-drawer ( __hd + __bd ) · 加 .open 展开
数据表格 · Table
排行榜,斑马纹 + 悬停高亮。
| # | NAME | LV | SCORE |
|---|
| 1 | HERO | 12 | 128400 |
| 2 | MAGE | 11 | 117900 |
| 3 | ROGUE | 10 | 106700 |
| 4 | KNIGHT | 9 | 95210 |
table.px-table > thead th + tbody td · 名次:px-table__rank
分页器 · Pagination
翻页,--active 当前 / --dis 禁用。点击切换。
px-pagination > px-pagination__pg ( --active / --dis )
时间轴 · Timeline
竖向进度,--done 完成 / --now 当前。
px-timeline > px-timeline__item ( --done/--now ) ( __t + __d )
树形菜单 · Tree
嵌套分类,details 折叠。
⚔️ 武器
剑 (8)
弓 (4)
魔法武器
法杖 (3)
魔典 (2)
🛡️ 防具
头盔 (5)
铠甲 (7)
px-tree > 嵌套 <details> + px-tree__leaf
能量条倒计时 · Energy
体力,含实时倒计时。
px-energy > __orb + __body ( __top(含 __timer) + px-bar )
签到日历 · Calendar
7 日签到,--done 已领 / --today 当天。
px-calendar > px-calendar__day ( --done / --today )
任务链 · Quest Chain
连锁节点,--done/--now + 连接线。
px-questchain > __node( --done/--now ) 与 __link( --done ) 交替
成就解锁 · Achievement
奖章+标题+描述,--locked 灰化。
px-achievement ( --locked ) > __medal + __tx(b+small)
翻牌 · Flip Card
CSS 3D 翻转(steps 逐帧),点击揭晓。
px-flipcard > __inner > __face __back + __face __front · 加 .flipped
开宝箱 · Chest
点击抖动开启,揭示战利品。
px-chest > __box + __label + __glow · 加 .opened
背包网格 · Inventory Grid
格子背包,稀有度描边、数量角标、空格。
px-invgrid > px-invgrid__cell ( --rare/--legend/--empty ) + px-invgrid__qty
装备对比 · Compare
当前 vs 新装,属性升降绿/红标注。
VS
⚔️
新: 圣剑
ATK185 ▲
CRIT18% ▲
px-compare > __side + __vs + __side · 升降:px-compare__up / __down