init
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
(() => {
|
||||
window.componentRegistry ||= {};
|
||||
window.componentRegistry["src-web/tabs/index.html"] = {"showcase":"<div class=\"panel\">\n <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>\n <div class=\"panel-body\">\n <div class=\"tabs-showcase\">\n <div>\n <div class=\"sample-label\">Tabs · Marker = Arrow · first tab selected</div>\n <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>\n </div>\n <div>\n <div class=\"sample-label\">Tabs · Marker = Line</div>\n <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>\n </div>\n </div>\n <div class=\"tabs-pager-row\">\n <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>\n <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>\n </div>\n </div>\n </div>"};
|
||||
})();
|
||||
@@ -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>
|
||||
@@ -0,0 +1,149 @@
|
||||
/* Source module: tabs.css */
|
||||
.component-stack { display: flex; flex-direction: column; gap: 12px; }
|
||||
.sample-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
|
||||
.sample-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
|
||||
.sample-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||
.sample-cell { min-width: 0; padding: 12px; border: 1px solid #202321; background: rgba(0,0,0,.22); }
|
||||
|
||||
.tabs-showcase { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
|
||||
.game-tabs {
|
||||
position:relative;
|
||||
width:100%;
|
||||
height:40px;
|
||||
display:flex;
|
||||
justify-content:flex-start;
|
||||
align-items:flex-start;
|
||||
padding:5px 7px;
|
||||
overflow:visible;
|
||||
border:0;
|
||||
border-radius:0;
|
||||
background:#090709;
|
||||
box-shadow:none;
|
||||
}
|
||||
.game-tabs::after {
|
||||
content:"";
|
||||
position:absolute;
|
||||
z-index:3;
|
||||
left:7px;
|
||||
right:7px;
|
||||
top:35px;
|
||||
height:1px;
|
||||
background:#584840;
|
||||
pointer-events:none;
|
||||
}
|
||||
.game-tab {
|
||||
--tab-126-glow:linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(48,24,8,.18) 10%,
|
||||
rgba(48,24,8,.72) 28%,
|
||||
#301808 50%,
|
||||
rgba(48,24,8,.72) 72%,
|
||||
rgba(48,24,8,.18) 90%,
|
||||
transparent 100%);
|
||||
--tab-667-glow:radial-gradient(ellipse 58% 46% at 50% 100%,
|
||||
rgba(114,97,30,.94) 0%,
|
||||
rgba(88,74,23,.74) 34%,
|
||||
rgba(52,44,14,.38) 66%,
|
||||
transparent 100%);
|
||||
appearance:none;
|
||||
position:relative;
|
||||
min-width:0;
|
||||
width:var(--tab-item-width,auto);
|
||||
flex:0 0 var(--tab-item-width,auto);
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
z-index:auto;
|
||||
height:30px;
|
||||
padding:0 12px;
|
||||
border:0;
|
||||
background:#080808;
|
||||
color:#9c815a;
|
||||
font:16px/1 "DCalc",SimSun,sans-serif;
|
||||
text-shadow:1px 1px 0 #000,0 0 2px #000;
|
||||
white-space:nowrap;
|
||||
cursor:pointer;
|
||||
}
|
||||
.game-tab:not(:last-of-type)::after {
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:5px;
|
||||
right:0;
|
||||
width:1px;
|
||||
height:19px;
|
||||
background:linear-gradient(180deg,
|
||||
rgba(52,47,42,.153) 0%,
|
||||
rgba(52,47,42,.376) 5.56%,
|
||||
rgba(52,47,42,.624) 11.11%,
|
||||
rgba(52,47,42,.847) 16.67%,
|
||||
#342f2a 22.22%,
|
||||
#342f2a 77.78%,
|
||||
rgba(52,47,42,.847) 83.33%,
|
||||
rgba(52,47,42,.624) 88.89%,
|
||||
rgba(52,47,42,.376) 94.44%,
|
||||
rgba(52,47,42,.153) 100%);
|
||||
pointer-events:none;
|
||||
}
|
||||
.game-tab:hover {
|
||||
color:#e4ca90;
|
||||
background-image:var(--tab-126-glow);
|
||||
}
|
||||
.game-tab.selected,
|
||||
.game-tab.selected:hover {
|
||||
color:#e4ca90;
|
||||
background-image:var(--tab-667-glow),var(--tab-126-glow);
|
||||
}
|
||||
.game-tab .tab-label { position:relative;z-index:1;display:inline-block; }
|
||||
.game-tab:active { transform:none; }
|
||||
.game-tab:active .tab-label,
|
||||
.game-tab.is-pressed .tab-label { transform:translateY(1px); }
|
||||
.game-tabs > .tab-marker { position:absolute;z-index:4;left:0;bottom:0;width:39px;height:5px;opacity:0;transform:translateX(-50%);pointer-events:none; }
|
||||
.game-tabs > .tab-marker::before {
|
||||
content:"";
|
||||
position:absolute;
|
||||
inset:0 0 auto;
|
||||
height:1px;
|
||||
background:linear-gradient(90deg,
|
||||
rgba(208,165,106,.024) 0%,
|
||||
rgba(208,165,106,.22) 10%,
|
||||
rgba(208,165,106,.49) 23%,
|
||||
rgba(208,165,106,.82) 36%,
|
||||
#9d7a35 44%,
|
||||
#9d7a35 56%,
|
||||
rgba(208,165,106,.82) 64%,
|
||||
rgba(208,165,106,.49) 77%,
|
||||
rgba(208,165,106,.22) 90%,
|
||||
rgba(208,165,106,.024) 100%);
|
||||
}
|
||||
.game-tabs > .tab-marker::after {
|
||||
content:"";
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:1px;
|
||||
width:9px;
|
||||
height:4px;
|
||||
background:linear-gradient(180deg,#9d7a35 0%,#a7823f 46%,#d0a56a 100%);
|
||||
clip-path:polygon(0 0,100% 0,50% 100%);
|
||||
transform:translateX(-50%);
|
||||
filter:drop-shadow(0 0 1px rgba(157,122,53,.22));
|
||||
}
|
||||
.game-tabs > .tab-marker.is-ready { opacity:1;transition:left 300ms cubic-bezier(.22,.61,.36,1); }
|
||||
.game-tabs > .tab-marker-line::before {
|
||||
background:linear-gradient(90deg,
|
||||
rgba(208,165,106,.024) 0%,
|
||||
rgba(208,165,106,.286) 15%,
|
||||
rgba(208,165,106,.631) 28%,
|
||||
rgba(208,165,106,.875) 38%,
|
||||
#d0a56a 50%,
|
||||
rgba(208,165,106,.875) 62%,
|
||||
rgba(208,165,106,.631) 72%,
|
||||
rgba(208,165,106,.286) 85%,
|
||||
rgba(208,165,106,.024) 100%);
|
||||
}
|
||||
.game-tabs > .tab-marker-line::after { display:none; }
|
||||
@media (prefers-reduced-motion:reduce) { .game-tabs > .tab-marker.is-ready { transition:none; } }
|
||||
.tabs-pager-row { display:flex;align-items:center;justify-content:space-between;margin-top:10px; }
|
||||
|
||||
.pager { height: 34px; display: flex; align-items: center; gap: 8px; color: var(--gold); }
|
||||
.pager-btn { width: 27px; height: 25px; display:flex;align-items:center;justify-content:center;border:1px solid #514125;background:#101211;color:#8b8778; }
|
||||
.pager-btn.active { background: #1b315c; color: #e3c977; }
|
||||
Reference in New Issue
Block a user