99 lines
15 KiB
HTML
99 lines
15 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>data-table 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="composition">
|
|
<div class="panel">
|
|
<div class="panel-heading"><div class="panel-title">DataTable / StatTable composition</div><div class="panel-note">Dense rows, semantic text, real raster icon slots</div></div>
|
|
<div class="panel-body">
|
|
<div class="table-toolbar dnf-ui"><span>Selection</span><button type="button" class="table-mode-button is-active" data-selection-theme="gold">Gold</button><button type="button" class="table-mode-button" data-selection-theme="blue">Blue</button></div>
|
|
<div class="data-table data-table-core selection-gold dnf-ui" data-data-table data-sortable-table>
|
|
<div class="table-row header"><div>图标</div><button type="button" class="sortable-header">名称<span class="sort-glyph">△</span></button><button type="button" class="sortable-header is-sorted" aria-sort="ascending">强化<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">状态<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">区域<span class="sort-glyph">△</span></button></div>
|
|
<div class="table-row data-row is-selected" tabindex="0" data-selectable-row><div class="table-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/0.PNG"></div><div class="rare-text">魔剑共鸣核心</div><div>+12</div><div class="success">出售完成</div><div>湖北 4</div></div>
|
|
<div class="table-row data-row" tabindex="0" data-selectable-row><div class="table-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/1.PNG"></div><div class="epic-text">史诗灵魂结晶</div><div>+10</div><div class="status">购买完成</div><div>跨区</div></div>
|
|
<div class="table-row table-note-row"><div><strong>养猪</strong><span>备注：团队共享养成角色</span><span class="table-note-actions"><img src="src-web/data-table/img/sprite_interface2_option.NPK/option.img/88.PNG" alt="编辑"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon.chn.img/42.PNG" alt="删除"></span></div></div>
|
|
<div class="table-row data-row" tabindex="0" data-selectable-row><div class="table-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/2.PNG"></div><div class="rare-text">稀有装备增幅券</div><div>+0</div><div class="danger">购买失败</div><div>西北 1</div></div>
|
|
<div class="table-row data-row" tabindex="0" data-selectable-row><div class="table-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/3.PNG"></div><div class="epic-text">太初之光碎片</div><div>+13</div><div class="success">已完成</div><div>华东</div></div>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px"><div class="spec-row"><span class="spec-chip">Density = Compact · Default</span><span class="spec-chip">ContentState = Populated · Empty</span></div><div class="pager dnf-ui"><span class="pager-btn">◀</span><span>1 / 2</span><span class="pager-btn active">▶</span></div></div>
|
|
<div class="divider"></div>
|
|
<div class="sample-label">LinearProgress · milestones</div>
|
|
<div class="progress" style="--value:68%"><div class="progress-fill"></div><i class="progress-marker" style="--left:25%"></i><i class="progress-marker" style="--left:68%"></i><i class="progress-marker" style="--left:90%"></i></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template id="skill">
|
|
<div class="panel skill-table-panel">
|
|
<div class="panel-heading"><div class="panel-title">DataTable / SkillDamageDetail</div><div class="panel-note">No zebra striping · fixed summary · bottom utility row</div></div>
|
|
<div class="panel-body">
|
|
<div class="data-table skill-damage-table dnf-ui">
|
|
<div class="skill-table-row header"><div>技能</div><div>使用次数</div><div>总伤害</div><div>平均伤害</div><div>伤害占比</div><div></div></div>
|
|
<div class="skill-table-body">
|
|
<div class="skill-table-row"><div class="skill-name-cell"><b>1.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/0.PNG" alt="技能 1"></div><div>34</div><div>953,379,872,000</div><div>28,040,584,470</div><div>25.9%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
|
<div class="skill-table-row"><div class="skill-name-cell"><b>2.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/1.PNG" alt="技能 2"></div><div>1</div><div>615,930,416,128</div><div>615,930,416,128</div><div>16.7%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
|
<div class="skill-table-row"><div class="skill-name-cell"><b>3.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/2.PNG" alt="技能 3"></div><div>1</div><div>367,626,199,040</div><div>367,626,199,040</div><div>10.0%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
|
<div class="skill-table-row"><div class="skill-name-cell"><b>4.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/3.PNG" alt="技能 4"></div><div>1</div><div>335,615,315,968</div><div>335,615,315,968</div><div>9.1%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
|
<div class="skill-table-row"><div class="skill-name-cell"><b>5.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/4.PNG" alt="技能 5"></div><div>1</div><div>238,860,883,968</div><div>238,860,883,968</div><div>6.5%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
|
<div class="skill-table-row"><div class="skill-name-cell"><b>6.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/5.PNG" alt="技能 6"></div><div>10</div><div>164,943,300,413</div><div>16,494,330,041</div><div>4.5%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
|
<div class="skill-table-row"><div class="skill-name-cell"><b>7.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/6.PNG" alt="技能 7"></div><div>4</div><div>163,055,895,552</div><div>40,763,973,888</div><div>4.4%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
|
<div class="skill-table-row"><div class="skill-name-cell"><b>8.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/7.PNG" alt="技能 8"></div><div>2</div><div>155,930,977,504</div><div>77,965,488,752</div><div>4.2%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
|
<div class="skill-table-row"><div class="skill-name-cell"><b>9.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/8.PNG" alt="技能 9"></div><div>2</div><div>148,375,164,928</div><div>74,187,582,464</div><div>4.0%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
|
</div>
|
|
<div class="skill-table-row skill-summary"><div>总和</div><div>—</div><div>3,678,555,852,653</div><div>—</div><div></div><button type="button" class="table-action-button" aria-label="查看总伤害详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
|
<div class="skill-table-footer"><button type="button">使用设置</button></div>
|
|
<div class="skill-table-scrollbar" aria-hidden="true"><div class="skill-scroll-arrow"></div><div class="skill-scroll-track"><div class="skill-scroll-thumb"></div></div><div class="skill-scroll-arrow"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template id="compact">
|
|
<div class="panel compact-table-panel">
|
|
<div class="panel-heading"><div class="panel-title">DataTable / CompactGradientRow</div><div class="panel-note">30px unified header · 20px row · square corners</div></div>
|
|
<div class="panel-body">
|
|
<div class="data-table compact-data-table dnf-ui" data-sortable-table>
|
|
<div class="compact-table-row header"><button type="button" class="sortable-header">日期<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">大区名称<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">角色名<span class="sort-glyph">△</span></button></div>
|
|
<div class="compact-table-body">
|
|
<div class="compact-table-row"><div>07/31</div><div>跨五</div><div>绝唱</div></div>
|
|
<div class="compact-table-row"><div>07/30</div><div>湖北 4</div><div>西瓜°</div></div>
|
|
<div class="compact-table-row"><div>07/29</div><div>跨一</div><div>Mikiyla</div></div>
|
|
<div class="compact-table-row"><div>07/28</div><div>华东</div><div>浅笑ツ</div></div>
|
|
<div class="compact-table-row"><div>07/27</div><div>跨六</div><div>武神四月</div></div>
|
|
<div class="compact-table-row"><div>07/26</div><div>湖北 4</div><div>蛋猪超人</div></div>
|
|
</div>
|
|
<div class="compact-table-scrollbar" aria-hidden="true"><div class="skill-scroll-arrow"></div><div class="skill-scroll-track"><div class="skill-scroll-thumb"></div></div><div class="skill-scroll-arrow"></div></div>
|
|
</div>
|
|
<div class="spec-row table-variant-spec"><span class="spec-chip">Density = Compact</span><span class="spec-chip">Radius = 0</span><span class="spec-chip">Gap = 5</span></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template id="item">
|
|
<div class="panel item-table-panel">
|
|
<div class="panel-heading"><div class="panel-title">DataTable / ItemRow</div><div class="panel-note">CSS 43 rest · 44 hover · 46 selected</div></div>
|
|
<div class="panel-body">
|
|
<div class="data-table item-data-table dnf-ui" data-sortable-table>
|
|
<div class="item-table-row header"><button type="button" class="sortable-header">强化<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">锻造<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">名称<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">拍卖信息<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">状态<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">大区 / 角色名<span class="sort-glyph">△</span></button></div>
|
|
<div class="item-table-body">
|
|
<div class="item-table-row" tabindex="0" data-selectable-row><i class="item-row-frame" aria-hidden="true"></i><div class="item-row-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/7.PNG"></div><div>+0</div><div>+0</div><div class="q-artifact">人造神 3 号纳波尔宝珠</div><div><button type="button" class="inspect-button"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="status">购买完成</div><div>湖北 4<br>绝唱</div></div>
|
|
<div class="item-table-row" tabindex="0" data-selectable-row><i class="item-row-frame" aria-hidden="true"></i><div class="item-row-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/8.PNG"></div><div>+0</div><div>+0</div><div class="q-epic">果味整夏收集箱宝珠自选</div><div><button type="button" class="inspect-button"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="success">出售完成</div><div>湖北 4<br>绝唱</div></div>
|
|
<div class="item-table-row is-selected" tabindex="0" data-selectable-row><i class="item-row-frame" aria-hidden="true"></i><div class="item-row-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/9.PNG"></div><div>+2</div><div>+0</div><div class="q-rare">魔法封印转换灵魂</div><div><button type="button" class="inspect-button"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="status">购买完成</div><div>湖北 4<br>蛋猪超人</div></div>
|
|
<div class="item-table-row" tabindex="0" data-selectable-row><i class="item-row-frame" aria-hidden="true"></i><div class="item-row-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/3.PNG"></div><div>+0</div><div>+0</div><div class="q-epic">史诗灵魂结晶</div><div><button type="button" class="inspect-button"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="status">购买完成</div><div>湖北 4<br>蛋猪超人</div></div>
|
|
<div class="item-table-row" tabindex="0" data-selectable-row><i class="item-row-frame" aria-hidden="true"></i><div class="item-row-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/4.PNG"></div><div>+0</div><div>+0</div><div class="q-epic">史诗灵魂结晶</div><div><button type="button" class="inspect-button"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="status">购买完成</div><div>湖北 4<br>蛋猪超人</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="spec-row table-variant-spec"><span class="spec-chip captured">Rest / Hover / Selected = CSS</span><span class="spec-chip">Height = 38</span><span class="spec-chip">Header = Sortable</span></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
|
|
</script>
|
|
</body>
|
|
</html>
|