dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

update

Browse Source
This commit is contained in:
imelon
2026-08-19 19:45:04 +08:00
parent 4de893ca94
commit cd24d68481
37 changed files with 1937 additions and 746 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/index-web.html
+7 -3
View File
@@ -221,9 +221,11 @@
const groupPadding = parseFloat(tabsStyle.paddingLeft) + parseFloat(tabsStyle.paddingRight);
const itemPadding = parseFloat(buttonStyle.paddingLeft) + parseFloat(buttonStyle.paddingRight);
const contentWidth = Math.ceil(widestLabel + itemPadding);
const availableWidth = Math.max(0, tabs.clientWidth - groupPadding);
const parentWidth = tabs.parentElement?.clientWidth ?? tabs.clientWidth;
const availableWidth = Math.max(0, parentWidth - groupPadding);
const itemWidth = Math.min(contentWidth, availableWidth / labels.length);
tabs.style.setProperty('--tab-item-width', `${itemWidth}px`);
tabs.style.setProperty('--tab-group-width', `${itemWidth * labels.length + groupPadding}px`);
};
const positionMarker = (tab, animate = true) => {
if (!marker || !tab) return;
@@ -251,10 +253,12 @@
});
});
if ('ResizeObserver' in window) {
new ResizeObserver(() => {
const resizeObserver = new ResizeObserver(() => {
equalizeItems();
positionMarker(tabs.querySelector('.game-tab.selected'), false);
}).observe(tabs);
});
resizeObserver.observe(tabs);
if (tabs.parentElement) resizeObserver.observe(tabs.parentElement);
}
});
design/src-web/tabs/component.js
+1 -1
View File
@@ -1,4 +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>"};
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 · Compact 32/24 · Marker = Arrow</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\">GROUP = CONTENT WIDTH · ITEMS = EQUALIZED MAX CONTENT</span><span class=\"spec-chip captured\">LIST 32 · ITEM 24 · TEXT 14</span></div>\n </div>\n </div>\n </div>"};
})();
design/src-web/tabs/index.html
+2 -2
View File
@@ -15,7 +15,7 @@
<div class="panel-body">
<div class="tabs-showcase">
<div>
<div class="sample-label">Tabs · Marker = Arrow · first tab selected</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>
@@ -25,7 +25,7 @@
</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 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>
design/src-web/tabs/style/index.css
+15 -14
View File
@@ -8,12 +8,13 @@
.tabs-showcase { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.game-tabs {
position:relative;
width:100%;
height:40px;
width:var(--tab-group-width,max-content);
max-width:100%;
height:32px;
display:flex;
justify-content:flex-start;
align-items:flex-start;
padding:5px 7px;
padding:4px 6px;
overflow:visible;
border:0;
border-radius:0;
@@ -24,9 +25,9 @@
content:"";
position:absolute;
z-index:3;
left:7px;
right:7px;
top:35px;
left:6px;
right:6px;
top:28px;
height:1px;
background:#584840;
pointer-events:none;
@@ -54,12 +55,12 @@
align-items:center;
justify-content:center;
z-index:auto;
height:30px;
padding:0 12px;
height:24px;
padding:0 10px;
border:0;
background:#080808;
color:#9c815a;
font:16px/1 "DCalc",SimSun,sans-serif;
font:14px/1 "DCalc",SimSun,sans-serif;
text-shadow:1px 1px 0 #000,0 0 2px #000;
white-space:nowrap;
cursor:pointer;
@@ -67,10 +68,10 @@
.game-tab:not(:last-of-type)::after {
content:"";
position:absolute;
top:5px;
top:4px;
right:0;
width:1px;
height:19px;
height:15px;
background:linear-gradient(180deg,
rgba(52,47,42,.153) 0%,
rgba(52,47,42,.376) 5.56%,
@@ -97,7 +98,7 @@
.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 { position:absolute;z-index:4;left:0;bottom:0;width:33px;height:4px;opacity:0;transform:translateX(-50%);pointer-events:none; }
.game-tabs > .tab-marker::before {
content:"";
position:absolute;
@@ -120,8 +121,8 @@
position:absolute;
left:50%;
top:1px;
width:9px;
height:4px;
width:7px;
height:3px;
background:linear-gradient(180deg,#9d7a35 0%,#a7823f 46%,#d0a56a 100%);
clip-path:polygon(0 0,100% 0,50% 100%);
transform:translateX(-50%);