init

design/src-web/tabs/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=1920, initial-scale=1">
+  <base href="../../">
+  <title>tabs 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">Tabs / Pagination</div><div class="panel-note">CSS 126 hover base + CSS 667 selected overlay · CSS 127/128/180</div></div>
+          <div class="panel-body">
+            <div class="tabs-showcase">
+              <div>
+                <div class="sample-label">Tabs · Marker = Arrow · first tab selected</div>
+                <div class="game-tabs dnf-ui" data-tabs data-marker="arrow"><button class="game-tab selected"><span class="tab-label">角色</span></button><button class="game-tab"><span class="tab-label">誓约</span></button><button class="game-tab"><span class="tab-label">装扮/宠物</span></button><button class="game-tab"><span class="tab-label">徽章</span></button><span class="tab-marker" aria-hidden="true"></span></div>
+              </div>
+              <div>
+                <div class="sample-label">Tabs · Marker = Line</div>
+                <div class="game-tabs marker-line dnf-ui" data-tabs data-marker="line"><button class="game-tab selected"><span class="tab-label">装备</span></button><button class="game-tab"><span class="tab-label">消耗品</span></button><button class="game-tab"><span class="tab-label">材料</span></button><button class="game-tab"><span class="tab-label">副职业</span></button><button class="game-tab"><span class="tab-label">任务</span></button><span class="tab-marker tab-marker-line" aria-hidden="true"></span></div>
+              </div>
+            </div>
+            <div class="tabs-pager-row">
+              <div class="pager dnf-ui"><span class="pager-btn">◀</span><span>1 / 15</span><span class="pager-btn active">▶</span><span style="color:#8e7b45">搜索出 142 个</span></div>
+              <div class="spec-row"><span class="spec-chip">ITEM WIDTH = EQUALIZED MAX CONTENT</span><span class="spec-chip captured">DEFAULT / HOVER / CLICK CAPTURED</span></div>
+            </div>
+          </div>
+        </div>
+</template>
+  <script>
+    document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
+  </script>
+</body>
+</html>