init

2026-08-04 17:57:01 +08:00
parent 768fd4a3a9
commit f77034edd7
641 changed files with 26137 additions and 0 deletions
@@ -0,0 +1,4 @@
+(() => {
+  window.componentRegistry ||= {};
+  window.componentRegistry["src-web/slider/index.html"] = {"showcase":"<div class=\"panel\">\n          <div class=\"panel-heading\"><div class=\"panel-title\">SliderStandard / SliderCompact</div><div class=\"panel-note\">Gold range · graphite rail · blue/brass thumb</div></div>\n          <div class=\"panel-body\">\n            <div class=\"grid cols-3\" style=\"gap:12px\">\n              <div><div class=\"sample-label\">0% · Normal / CSS</div><div class=\"slider dnf-ui\" style=\"--value:0%;width:100%\"><div class=\"slider-track\"><span class=\"slider-range\"></span><i class=\"slider-thumb\"></i></div><span class=\"slider-value\">0%</span></div></div>\n              <div><div class=\"sample-label\">29% · Hover / CSS</div><div class=\"slider dnf-ui is-hover\" style=\"--value:29%;width:100%\"><div class=\"slider-track\"><span class=\"slider-range\"></span><i class=\"slider-thumb\"></i></div><span class=\"slider-value\">29%</span></div></div>\n              <div><div class=\"sample-label\">100% · Pressed / CSS</div><div class=\"slider dnf-ui is-pressed\" style=\"--value:100%;width:100%\"><div class=\"slider-track\"><span class=\"slider-range\"></span><i class=\"slider-thumb\"></i></div><span class=\"slider-value\">100%</span></div></div>\n            </div>\n            <div class=\"divider\"></div>\n            <div style=\"display:flex;gap:16px;align-items:center\">\n              <div class=\"slider compact dnf-ui\" data-slider role=\"slider\" tabindex=\"0\" aria-label=\"透明度\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"40\" style=\"--value:40%\"><div class=\"slider-track\"><span class=\"slider-range\"></span><i class=\"slider-thumb\"></i></div><span class=\"slider-value\">40%</span></div>\n              <div class=\"slider dnf-ui disabled\" style=\"--value:65%;width:220px\"><div class=\"slider-track\"><span class=\"slider-range\"></span><i class=\"slider-thumb\"></i></div><span class=\"slider-value\">禁用</span></div>\n            </div>\n            <div class=\"spec-row\" style=\"margin-top:15px\"><span class=\"spec-chip captured\">Percent / Seconds / Ticks captured</span><span class=\"spec-chip derived\">Drag / Focus derived</span></div>\n          </div>\n        </div>"};
+})();
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=1920, initial-scale=1">
+  <base href="../../">
+  <title>slider 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">SliderStandard / SliderCompact</div><div class="panel-note">Gold range · graphite rail · blue/brass thumb</div></div>
+          <div class="panel-body">
+            <div class="grid cols-3" style="gap:12px">
+              <div><div class="sample-label">0% · Normal / CSS</div><div class="slider dnf-ui" style="--value:0%;width:100%"><div class="slider-track"><span class="slider-range"></span><i class="slider-thumb"></i></div><span class="slider-value">0%</span></div></div>
+              <div><div class="sample-label">29% · Hover / CSS</div><div class="slider dnf-ui is-hover" style="--value:29%;width:100%"><div class="slider-track"><span class="slider-range"></span><i class="slider-thumb"></i></div><span class="slider-value">29%</span></div></div>
+              <div><div class="sample-label">100% · Pressed / CSS</div><div class="slider dnf-ui is-pressed" style="--value:100%;width:100%"><div class="slider-track"><span class="slider-range"></span><i class="slider-thumb"></i></div><span class="slider-value">100%</span></div></div>
+            </div>
+            <div class="divider"></div>
+            <div style="display:flex;gap:16px;align-items:center">
+              <div class="slider compact dnf-ui" data-slider role="slider" tabindex="0" aria-label="透明度" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40" style="--value:40%"><div class="slider-track"><span class="slider-range"></span><i class="slider-thumb"></i></div><span class="slider-value">40%</span></div>
+              <div class="slider dnf-ui disabled" style="--value:65%;width:220px"><div class="slider-track"><span class="slider-range"></span><i class="slider-thumb"></i></div><span class="slider-value">禁用</span></div>
+            </div>
+            <div class="spec-row" style="margin-top:15px"><span class="spec-chip captured">Percent / Seconds / Ticks captured</span><span class="spec-chip derived">Drag / Focus derived</span></div>
+          </div>
+        </div>
+</template>
+  <script>
+    document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
+  </script>
+</body>
+</html>
@@ -0,0 +1,64 @@
+/* Source module: slider.css */
+.slider {
+  width: 270px;
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.slider-track { position: relative; flex: 1; height: 3px; background: #515351; box-shadow: 0 1px 0 #020202; }
+.slider-range { position: absolute; inset: 0 auto 0 0; width: var(--value, 50%); background: #f3d367; box-shadow: 0 0 3px rgba(243,211,103,.25); }
+.slider-thumb {
+  --thumb-edge-top:#86693f;
+  --thumb-edge-bottom:#76593a;
+  --thumb-top:#21365e;
+  --thumb-bottom:#1b2b4d;
+  box-sizing:border-box;
+  position:absolute;
+  left:var(--value,50%);
+  top:50%;
+  width:17px;
+  height:17px;
+  transform:translate(-50%,-50%);
+  border:1px solid transparent;
+  border-radius:50%;
+  background:
+    radial-gradient(circle at 50% 28%,var(--thumb-top),var(--thumb-bottom) 78%) padding-box,
+    linear-gradient(180deg,var(--thumb-edge-top),var(--thumb-edge-bottom)) border-box;
+  box-shadow:0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.025);
+}
+.slider-value { min-width: 40px; color: var(--gold); font-size: 12px; text-align: right; }
+.slider.compact { width: 238px; }
+.slider.compact,
+.slider.surface { padding:0 12px;border-radius:17px; }
+.slider.disabled .slider-range { background:#686868;box-shadow:none; }
+.slider.disabled .slider-value { color:var(--disabled); }
+.slider[data-slider] { cursor:pointer;touch-action:none; }
+.slider[data-slider]:focus-visible { outline:1px solid var(--focus);outline-offset:2px; }
+.slider.is-hover .slider-thumb,
+.slider[data-slider]:hover .slider-thumb {
+  --thumb-edge-top:#907960;
+  --thumb-edge-bottom:#80695b;
+  --thumb-top:#2b467f;
+  --thumb-bottom:#253b6e;
+}
+.slider.is-pressed .slider-thumb,
+.slider[data-slider].is-dragging .slider-thumb,
+.slider[data-slider]:active .slider-thumb {
+  --thumb-edge-top:#907960;
+  --thumb-edge-bottom:#80695b;
+  --thumb-top:#2b467f;
+  --thumb-bottom:#253b6e;
+}
+.slider.disabled .slider-thumb {
+  --thumb-edge-top:#454545;
+  --thumb-edge-bottom:#3e3e3e;
+  --thumb-top:#2c2c2c;
+  --thumb-bottom:#242424;
+  box-shadow:0 0 0 1px rgba(0,0,0,.35);
+}