38 lines
2.5 KiB
HTML
38 lines
2.5 KiB
HTML
<!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 · Compact 32/24 · Marker = Arrow</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">GROUP = CONTENT WIDTH · ITEMS = EQUALIZED MAX CONTENT</span><span class="spec-chip captured">LIST 32 · ITEM 24 · TEXT 14</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
|
|
</script>
|
|
</body>
|
|
</html>
|