dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

init

Browse Source
This commit is contained in:
imelon
2026-08-04 17:57:01 +08:00
parent 768fd4a3a9
commit f77034edd7
641 changed files with 26137 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/src-web/form-controls/index.html
+59
View File
@@ -0,0 +1,59 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1920, initial-scale=1">
<base href="../../">
<title>form-controls component catalog</title>
<link rel="stylesheet" href="src-web/index.css">
</head>
<body>
<!-- Root pages load individual templates through index.html#fragment references. -->
<template id="showcase">
<div class="panel">
<div class="panel-heading"><div class="panel-title">Checkbox / RadioGroup / Switch / Rate</div><div class="panel-note">Value state is independent from interaction</div></div>
<div class="panel-body">
<div class="grid cols-4" style="gap:18px">
<div>
<div class="rule-label">Checkbox</div>
<div class="check-row dnf-ui" data-checkbox role="checkbox" tabindex="0" aria-checked="false"><span class="checkbox-control"></span><span data-control-label>交互示例 · 未选择</span></div>
<div class="check-row dnf-ui is-emphasized"><span class="checkbox-control"></span> Emphasized</div>
<div class="check-row dnf-ui"><span class="checkbox-control is-checked"></span> 已选择</div>
<div class="check-row dnf-ui control-disabled"><span class="checkbox-control"></span> 已禁用</div>
</div>
<div data-radio-group role="radiogroup" aria-label="效果强度">
<div class="rule-label">RadioGroup</div>
<div class="radio-row dnf-ui" data-radio role="radio" tabindex="0" aria-checked="true">关闭</div>
<div class="radio-row dnf-ui" data-radio role="radio" tabindex="-1" aria-checked="false">弱</div>
<div class="radio-row dnf-ui" data-radio role="radio" tabindex="-1" aria-checked="false">强</div>
<div class="radio-row dnf-ui control-disabled">禁用</div>
</div>
<div>
<div class="rule-label">Switch</div>
<div class="switch-row dnf-ui" data-switch role="switch" tabindex="0" aria-checked="false"><span data-control-label>Interactive · Off</span></div>
<div class="switch-row dnf-ui is-hover">Hover</div>
<div class="switch-row dnf-ui is-on">On</div>
<div class="switch-row dnf-ui control-disabled">Disabled</div>
</div>
<div>
<div class="rule-label">Rate · Value = 1 / 5</div>
<div class="rate dnf-ui" data-rate role="slider" tabindex="0" aria-label="评分" aria-valuemin="0" aria-valuemax="5" aria-valuenow="1">
<img data-rate-item src="src-web/form-controls/img/sprite_interface2_popup_menu.NPK/popup_icon_npc.img/126.PNG" alt="第 1 星">
<img data-rate-item src="src-web/form-controls/img/sprite_interface2_popup_menu.NPK/popup_icon_npc.img/149.PNG" alt="第 2 星">
<img data-rate-item src="src-web/form-controls/img/sprite_interface2_popup_menu.NPK/popup_icon_npc.img/149.PNG" alt="第 3 星">
<img data-rate-item src="src-web/form-controls/img/sprite_interface2_popup_menu.NPK/popup_icon_npc.img/149.PNG" alt="第 4 星">
<img data-rate-item src="src-web/form-controls/img/sprite_interface2_popup_menu.NPK/popup_icon_npc.img/149.PNG" alt="第 5 星">
</div>
<div class="token-label" style="margin-top:12px">Value = Number 0–5<br>Readonly = Boolean<br>Star = raster asset</div>
</div>
</div>
<div class="divider"></div>
<div class="spec-row"><span class="spec-chip">Checked = Off · On · Mixed</span><span class="spec-chip">Interaction = Rest · Hover · Focus · Disabled</span></div>
</div>
</div>
</template>
<script>
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
</script>
</body>
</html>