按钮 · Button
哥特金属质感,主/次/金/幽灵四种变体,支持 sm / lg / block / disabled。
<button class="dg-btn dg-btn--primary">进入地下城</button> · 变体:--primary / --gold / --ghost / --sm / --lg / --block
面板 · Panel
羊皮纸内衬 + 金线分隔 + 可选四角 ✦ 装饰。用作对话、任务、装备栏容器。
✦✦
✦✦
赏金任务
清剿凯焰荒漠的堕落亡者,收集 5 枚灵魂碎片。奖励:2 件传奇装备。
dg-panel > dg-panel__hd + dg-panel__bd · 四角装饰:dg-corner tl/tr/bl/br
弹窗 · Modal
遮罩 + 面板 + 血红关闭钮。点下方按钮预览真实弹出。
dg-modal-mask > dg-modal ( dg-modal__close + dg-panel )
进度条 · Bar
内嵌描边风,HP / MP / XP 三种填充,可加 label,--tall 变高。
dg-bar > dg-bar__fill dg-bar__fill--hp (style="width:72%") + dg-bar__label
货币条 · Currency
金币 / 灵魂 / 血石三种钱币图标,内嵌金框。
2.4M
860
37
dg-currency > dg-currency__coin dg-currency__coin--gold + 数值文字
状态球 · Orb
招牌的液体感 HP/MP 球,液面高度由内联 height 控制。
dg-orb > dg-orb__liquid --hp (style="height:78%") + dg-orb__gloss + dg-orb__num
图标底座 · Icon Slot
技能/物品格,普通/稀有/传说三档描边,支持冷却遮罩。
dg-icon ( --rare / --legend ) · 冷却:内放 dg-icon__cd
卡片 · Card
装备/角色卡,含稀有度角标、名称、底部插槽(可放进度条)。
dg-card > dg-card__art ( dg-card__rank ) + dg-card__name + dg-card__foot
列表项 · List
背包/邮件/排行榜通用行,左图标 + 主副标题 + 右侧数值。
dg-list > dg-list__item ( dg-list__ic + dg-list__tx (b+small) + dg-list__val )
顶部 HUD · HUD Bar
头像 + 名称/等级 + 右侧货币,主界面顶栏标配。
dg-hud > dg-hud__portrait + dg-hud__who (b+small) + dg-hud__spacer + 任意右侧组件
导航栏 · Nav Bar
底部主导航,图标+文字,--active 高亮当前。点击可切换。
dg-nav > dg-nav__tab ( --active ) > span.i + 文字
标签页 · Tabs
面板内分页,与 dg-panel 拼接使用。点击切换。
当前显示:装备面板内容。切换上方标签查看不同分页。
dg-tabs > dg-tabs__tab ( --active ) · 常与 dg-panel 上下拼接
✦ 扩展组件包 · Expansion Pack
15 个补充组件,与上方共用同一套令牌与 dg- 前缀。
输入框 · Input
内凹石槽风,聚焦时金光描边;可选前置图标 dg-field。
<input class="dg-input"> · 带图标:dg-field > dg-field__ic + dg-input
下拉选择 · Select
原生 select 定制外观 + 金色箭头,选项亦有暗色主题。
dg-select > <select> > <option>
徽章 · Badge
数字提示徽章,可独立使用或用 dg-badge-wrap 贴在图标右上。
dg-badge ( --gold ) · 贴角:dg-badge-wrap > 任意内容 + dg-badge
角标 · Ribbon
卡片左上折角丝带,标注"限时/新品/传奇"。放在 position:relative 容器内。
dg-ribbon ( --gold ) · 置于 position:relative 的容器(如 dg-card)内
标签 · Tag
属性/词条小标签,HP/MP/金色变体。
近战
🩸 +120 生命
💧 +45 法力
★ 传奇词条
dg-tag ( --hp / --mp / --gold )
提示 · Tooltip
悬停显示,内容取 data-tip 属性。悬停下方文字试试。
暴击
生命回复
寒冰抗性
<span class="dg-tooltip" data-tip="提示内容">
通知 · Toast
飘出式提示,普通/危险/成功三色左条。
dg-toast ( --danger / --success ) > dg-toast__ic + 内容(b 为标题)
对话气泡 · Bubble
NPC 对话框,带说话人名与尖角。
铁匠 · 哈拉甘
把你的破碎符文带来,我能为你重铸一件配得上英雄的武器。
dg-bubble > dg-bubble__who + 对话文字
加载 · Spinner
旋转加载圈,金色/血红两种。
dg-spinner ( --rune )
头像组 · Avatar Group
叠放头像 + 溢出计数,用于队伍/公会。
dg-avatars > 多个 dg-avatars__a + 末尾 dg-avatars__more
星级评分 · Stars
物品品质/难度评级,.on 为点亮。
★★★★★
★★★★★
dg-stars > 多个 <span>★,点亮加 .on
分隔线 · Divider
渐隐金线,可带中心符号或文字标签。
dg-divider > dg-divider__mark 或 dg-divider--label
空状态 · Empty
列表/背包为空时的占位,图标+标题+说明。
🕸️
背包空空如也
击败怪物或开启宝箱来获取战利品。
dg-empty > dg-empty__ic + dg-empty__tt + dg-empty__ds
✦ 进阶组件包 · Advanced Pack
16 个复杂交互组件,同样共用 dg- 令牌。表格、时间轴、翻牌、开宝箱等均可交互。
步进器 · Stepper
数量选择,− 值 + 三段,点击可增减。
dg-stepper > dg-stepper__btn(−) + dg-stepper__val + dg-stepper__btn(+)
面包屑 · Breadcrumb
层级导航路径,末项高亮为当前。
dg-breadcrumb > a + dg-breadcrumb__sep … + dg-breadcrumb__cur
手风琴 · Accordion
基于原生 <details>,无需 JS,点击展开/收起。
如何强化装备?
前往主城铁匠铺,消耗强化石与金币即可提升装备等级,失败有几率降级。
符文该如何镶嵌?
拥有符文孔的装备可镶嵌符文,不同符文组合可触发套装效果。
如何加入公会?
在社交界面搜索公会名称,或接受他人邀请。加入后可参与公会战。
dg-accordion > <details> ( <summary> + dg-accordion__bd )
侧边抽屉 · Drawer
从右滑入的面板,常用于设置/背包。点击预览。
dg-drawer-mask + dg-drawer ( dg-drawer__hd + dg-drawer__bd ) · 加 .open 类展开
数据表格 · Table
排行榜/属性表,斑马纹 + 悬停高亮。
| 排名 | 玩家 | 职业 | 战力 |
|---|
| ① | Nephalem | 死灵法师 | 18,420 |
| ② | Xul | 野蛮人 | 17,905 |
| ③ | Leah | 法师 | 16,733 |
| 4 | Tyrael | 圣教军 | 15,210 |
table.dg-table > thead th + tbody td · 名次:dg-table__rank
分页器 · Pagination
列表翻页,--active 当前页,--dis 禁用。点击可切换。
dg-pagination > dg-pagination__pg ( --active / --dis )
时间轴 · Timeline
竖向进度轴,--done 为已完成节点。
dg-timeline > dg-timeline__item ( --done ) ( __t + __d )
树形菜单 · Tree
嵌套分类,基于 <details> 折叠。
⚔️ 武器
🗡️ 单手剑 (24)
🏹 弓 (11)
🔨 双手武器
大剑 (7)
战锤 (5)
🛡️ 护甲
头盔 (9)
胸甲 (14)
dg-tree > 嵌套 <details>(<summary>) + dg-tree__leaf
能量条倒计时 · Energy
体力/门票,含实时倒计时(演示每秒递减)。
dg-energy > dg-energy__orb + dg-energy__body ( __top(含 __timer) + dg-bar )
签到日历 · Calendar
7 日签到,--done 已领,--today 当天。
dg-calendar > dg-calendar__day ( --done / --today )
任务链 · Quest Chain
连锁节点,--done 完成 / --now 当前 + 连接线。
dg-questchain > __node( --done/--now ) 与 __link( --done ) 交替
成就解锁 · Achievement
奖章 + 标题 + 描述,--locked 为未解锁灰化。
dg-achievement ( --locked ) > __medal + __tx(b+small)
翻牌 · Flip Card
CSS 3D 翻转,点击卡片揭晓正面。
dg-flipcard > __inner > __face __back + __face __front · 加 .flipped 翻面
开宝箱 · Chest
点击弹跳开启,揭示战利品。
dg-chest > __box + __label + __glow · 加 .opened 触发
背包网格 · Inventory Grid
格子背包,支持稀有度描边、数量角标、空格。
dg-invgrid > dg-invgrid__cell ( --rare/--legend/--empty ) + dg-invgrid__qty
装备对比 · Compare
已装备 vs 新装备,属性升降用绿/红标注。
dg-compare > __side + __vs + __side · 升降:dg-compare__up / __down