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>shared 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="glyphs">
|
||
<div class="panel">
|
||
<div class="panel-heading"><div class="panel-title">Native glyph assets</div><div class="spec-chip asset">1× / 2× RASTER</div></div>
|
||
<div class="panel-body">
|
||
<div class="sample-grid cols-3">
|
||
<div class="sample-cell" style="text-align:center"><img class="pixel asset-2x glyph-select-2x" src="src-web/shared/img/sprite_interface.NPK/windowcommon_2x.img/0.PNG"><div class="sample-label" style="margin:7px 0 0">Select arrow · 2x</div></div>
|
||
<div class="sample-cell" style="text-align:center"><img class="pixel asset-2x glyph-check-2x" src="src-web/shared/img/sprite_interface.NPK/windowcommon_2x.img/4.PNG" alt="Check"><div class="sample-label" style="margin:7px 0 0">Check</div></div>
|
||
<div class="sample-cell" style="text-align:center"><img class="pixel asset-2x glyph-close-2x" src="src-web/shared/img/sprite_interface.NPK/windowcommon_2x.img/6.PNG"><div class="sample-label" style="margin:7px 0 0">Close · 2x</div></div>
|
||
<div class="sample-cell" style="text-align:center"><img class="pixel" src="src-web/shared/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG"><div class="sample-label" style="margin:7px 0 0">Expand</div></div>
|
||
<div class="sample-cell" style="text-align:center"><img class="pixel" src="src-web/shared/img/sprite_interface.NPK/windowcommon.chn.img/301.PNG"><div class="sample-label" style="margin:7px 0 0">Notice</div></div>
|
||
<div class="sample-cell" style="text-align:center"><img class="pixel" src="src-web/shared/img/sprite_interface2_option.NPK/option.img/88.PNG"><div class="sample-label" style="margin:7px 0 0">Settings</div></div>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<ul class="callout-list">
|
||
<li>图标保持像素网格和原生比例</li>
|
||
<li>颜色状态不通过 CSS 滤镜伪造</li>
|
||
<li>对应状态素材缺失时才使用 Derived 规则</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
|
||
</script>
|
||
</body>
|
||
</html>
|