init

design/src-web/slider/index.html

@@ -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>