按钮 · Button
切角霓虹钮,青(默认)/洋红(exec)/幽灵/危险,支持 sm/lg/block/disabled。
cy-btn ( --exec / --danger / --ghost / --sm / --lg / --block )
面板 · Panel
切角容器 + 可选四角括号 cy-bracket + 副标代码。
合约简报 // CONTRACT
潜入荒坂塔 42 层,提取加密数据核心。警戒等级:极高。奖励:12,000 ₡。
cy-panel > cy-panel__hd (含 .k) + cy-panel__bd · 四角:cy-bracket tl/tr/bl/br
弹窗 · Modal
遮罩 + 面板 + 切角关闭钮。点击预览。
cy-modal-mask > cy-modal ( cy-modal__close + cy-panel )
进度条 · Bar
切角发光条,青/洋红/黄/绿四色,可加 cy-bar__cap 标题。
cy-bar__cap + cy-bar > cy-bar__fill --cy/--mg/--yl/--gr
货币条 · Currency
欧元币/数据分/经验,青/洋红/黄三色。
₡48,120
◈320
⌁18
cy-currency ( --mag / --yl ) > cy-currency__sym + 数值
状态计量表 · Gauge
环形 SVG 计量表(替代液体球),stroke-dashoffset 控制百分比。
cy-gauge > svg(cy-gauge__track + cy-gauge__val --cy/--mg) + __num + __lbl
图标底座 · Icon Slot
技能/义体槽,普通/稀有/传说描边 + 冷却遮罩。
cy-icon ( --rare / --legend ) · 冷却:cy-icon__cd
卡片 · Card
义体/程序卡,含类型标签、名称、底部插槽。
cy-card > cy-card__art ( cy-card__tag ) + cy-card__name + cy-card__foot
列表项 · List
物品/日志通用行,左图标 + 主副标题 + 右值。
💉
MaxDoc 医疗针RESTORE 40% HP
×12
cy-list > cy-list__item ( __ic + __tx(b+small) + __val )
顶部 HUD · HUD Bar
六边形头像 + 代号/ID + 右侧信用点。
🤖
V_RUNNERID://0xF3A9
₡48,120
cy-hud > cy-hud__hex + cy-hud__who(b+small) + cy-hud__spacer + 右侧组件
导航栏 · Nav Bar
底部主导航,--active 高亮。点击切换。
cy-nav > cy-nav__tab ( --active ) > span.i + 文字
标签页 · Tabs
面板分页,与 cy-panel 拼接。点击切换。
STATS // 身体 8 · 智力 12 · 反应 10 · 冷静 9 · 技术 11
cy-tabs > cy-tabs__tab ( --active )
输入框 · Input
切角石槽,聚焦青光;可选前置图标 cy-field。
<input class="cy-input"> · 带图标:cy-field > cy-field__ic + cy-input
下拉选择 · Select
定制外观 + 青色箭头。
cy-select > <select> > <option>
徽章 · Badge
洋红/青发光徽章,可贴图标右上。
cy-badge ( --cy ) · 贴角:cy-badge-wrap > 内容 + cy-badge
角标 · Ribbon
卡片左上箭头丝带。放 position:relative 容器内。
cy-ribbon ( --cy ) · 置于 relative 容器内
标签 · Tag
属性/词条,青/洋红/黄变体。
近战
◈ 穿甲 +30
⌁ 电击 DoT
◆ 稀有
cy-tag ( --mg / --yl )
提示 · Tooltip
悬停显示,内容取 data-tip。悬停试试。
暴击
护盾回复
防火墙
<span class="cy-tooltip" data-tip="内容">
通知 · Toast
切角提示,普通/危险/成功三色边框辉光。
cy-toast ( --danger / --success ) > cy-toast__ic + 内容(b 标题)
对话气泡 · Bubble
NPC 对话框,含发话人代号与尖角。
FIXER · 罗格
有个大活儿等着你,报酬够你换套新义体。感兴趣就来阿夫特生活找我。
cy-bubble > cy-bubble__who + 对话文字
加载 · Spinner
双环反向旋转,青 + 洋红。
cy-spinner
头像组 · Avatar Group
六边形叠放 + 溢出计数。
cy-avatars > 多个 cy-avatars__a + cy-avatars__more
评级 · Rating
方块 pip 评级(替代星星),.on 点亮。
cy-rating > 多个 cy-rating__pip,点亮加 .on
分隔线 · Divider
渐隐线,可带中心标签。
cy-divider > cy-divider__mark
空状态 · Empty
列表为空占位,图标+标题+说明。
📭
NO SIGNAL
暂无可用合约,稍后重新连接网络。
cy-empty > cy-empty__ic + cy-empty__tt + cy-empty__ds
▘▖ 进阶组件 · Advanced
复杂交互组件,均可操作。
步进器 · Stepper
数量选择,可点增减。
cy-stepper > cy-stepper__btn(−) + cy-stepper__val + cy-stepper__btn(+)
面包屑 · Breadcrumb
层级路径,末项高亮。
cy-breadcrumb > a + __sep … + __cur
手风琴 · Accordion
原生 details,无需 JS。
如何安装义体?
前往任意夜城的滑板医生处,消耗欧元币安装。安装量受身体属性限制。
什么是超梦?
超梦(Braindance)是可回放他人感官体验的记录,侦探常用于分析犯罪现场。
ICE 是什么?
入侵对抗电子设备(ICE)是保护网络的防御程序,黑入时需用破解程序击穿。
cy-accordion > <details> ( <summary> + cy-accordion__bd )
侧边抽屉 · Drawer
右滑面板。点击预览。
cy-drawer-mask + cy-drawer ( __hd + __bd ) · 加 .open 展开
数据表格 · Table
排行榜/数据,斑马纹 + 悬停高亮。
| # | RUNNER | ROLE | STREET CRED |
|---|
| 01 | V | NETRUNNER | 9,840 |
| 02 | Rogue | FIXER | 9,120 |
| 03 | Judy | TECHIE | 8,510 |
| 04 | River | SOLO | 7,930 |
table.cy-table > thead th + tbody td · 名次:cy-table__rank
分页器 · Pagination
翻页,--active 当前 / --dis 禁用。点击切换。
cy-pagination > cy-pagination__pg ( --active / --dis )
时间轴 · Timeline
竖向进度,--done 已完成。菱形节点。
cy-timeline > cy-timeline__item ( --done ) ( __t + __d )
树形菜单 · Tree
嵌套分类,details 折叠。
🔫 武器
手枪 (18)
步枪 (9)
近战
武士刀 (4)
螳螂刀 (2)
🦾 义体
神经系统 (6)
骨骼 (5)
cy-tree > 嵌套 <details> + cy-tree__leaf
能量条倒计时 · Energy
体力/门票,含实时倒计时。
cy-energy > __orb + __body ( __top(含 __timer) + cy-bar )
签到日历 · Calendar
7 日签到,--done 已领 / --today 当天。
cy-calendar > cy-calendar__day ( --done / --today )
任务链 · Quest Chain
连锁节点,--done/--now + 连接线。
cy-questchain > __node( --done/--now ) 与 __link( --done ) 交替
成就解锁 · Achievement
奖章+标题+描述,--locked 灰化。
cy-achievement ( --locked ) > __medal + __tx(b+small)
翻牌 · Flip Card
CSS 3D 翻转,点击揭晓。
cy-flipcard > __inner > __face __back + __face __front · 加 .flipped
解密缓存 · Cache
点击解密开启,揭示战利品。
cy-chest > __box + __label + __glow · 加 .opened
背包网格 · Inventory Grid
格子背包,稀有度描边、数量角标、空格。
cy-invgrid > cy-invgrid__cell ( --rare/--legend/--empty ) + cy-invgrid__qty
装备对比 · Compare
当前 vs 新装,属性升降绿/红标注。
cy-compare > __side + __vs + __side · 升降:cy-compare__up / __down