5 lines
5.5 KiB
JavaScript
5 lines
5.5 KiB
JavaScript
(() => {
|
||
window.componentRegistry ||= {};
|
||
window.componentRegistry["src-web/button/index.html"] = {"construction":"<div class=\"panel\">\n <div class=\"panel-heading\"><div class=\"panel-title\">3-slice control surface</div><div class=\"spec-chip asset\">SOURCE ASSET</div></div>\n <div class=\"panel-body\">\n <div class=\"anatomy\">\n <div class=\"asset-tile\"><img src=\"src-web/button/img/sprite_interface_ninepatch_resource.NPK/ninepatch_resource.img/24.PNG\" width=\"102\" alt=\"button source asset\"></div>\n <div class=\"anatomy-list\">\n <div class=\"anatomy-line\"><strong>Left cap</strong><span>固定像素，不横向拉伸</span></div>\n <div class=\"anatomy-line\"><strong>Center</strong><span>仅中段伸缩，承载文字</span></div>\n <div class=\"anatomy-line\"><strong>Right cap</strong><span>保留边角和金属高光</span></div>\n </div>\n </div>\n <div class=\"divider\"></div>\n <div class=\"rule-label\">Responsive reconstruction</div>\n <div class=\"slice-demo\">\n <span class=\"cut left\"></span><span class=\"cut right\"></span>\n <span class=\"slice-label\" style=\"left:0\">CAP</span><span class=\"slice-label\" style=\"left:46%\">STRETCHABLE FILL</span><span class=\"slice-label\" style=\"right:0\">CAP</span>\n </div>\n <div style=\"height:28px\"></div>\n <div class=\"btn-shell\"><div class=\"dnf-btn large normal dnf-ui\"><span class=\"btn-icon\">＋</span>创建预设</div></div>\n </div>\n </div>","showcase":"<div class=\"panel button-showcase-panel\" style=\"height:292px;margin-bottom:18px;\">\n <div class=\"panel-heading\"><div class=\"panel-title\">TextButton / IconButton</div><div class=\"spec-row\"><span class=\"spec-chip captured\">CSS + NINE-PATCH PRIMARY</span><span class=\"spec-chip asset\">ninepatch_resource.img</span></div></div>\n <div class=\"panel-body\">\n <div class=\"sample-grid button-state-grid\" style=\"grid-template-columns:repeat(5,1fr);\">\n <div class=\"button-implementation-label\">Implementation / CSS<small>原生渐变与描边 · 可编辑</small></div>\n <div class=\"sample-cell\"><div class=\"sample-label\">Rest</div><div class=\"btn-shell\"><div class=\"dnf-btn normal dnf-ui\"><span class=\"btn-icon\">＋</span>创建角色</div></div></div>\n <div class=\"sample-cell\"><div class=\"sample-label\">Hover</div><div class=\"btn-shell\"><div class=\"dnf-btn hover dnf-ui\"><span class=\"btn-icon\">＋</span>创建角色</div></div></div>\n <div class=\"sample-cell\"><div class=\"sample-label\">Pressed</div><div class=\"btn-shell\"><div class=\"dnf-btn pressed dnf-ui\"><span class=\"btn-icon\">＋</span>创建角色</div></div></div>\n <div class=\"sample-cell\"><div class=\"sample-label\">Disabled</div><div class=\"btn-shell\"><div class=\"dnf-btn disabled dnf-ui\">购买</div></div></div>\n\n <div class=\"button-implementation-label\">Implementation / CSS Replica<small>CSS gradient + inner glow · primary</small></div>\n <div class=\"sample-cell\"><div class=\"sample-label\">Rest</div><div class=\"btn-shell\"><div class=\"dnf-btn image normal dnf-ui\"><span class=\"btn-icon\">＋</span>创建角色</div></div></div>\n <div class=\"sample-cell\"><div class=\"sample-label\">Hover</div><div class=\"btn-shell\"><div class=\"dnf-btn image hover dnf-ui\"><span class=\"btn-icon\">＋</span>创建角色</div></div></div>\n <div class=\"sample-cell\"><div class=\"sample-label\">Pressed</div><div class=\"btn-shell\"><div class=\"dnf-btn image pressed dnf-ui\"><span class=\"btn-icon\">＋</span>创建角色</div></div></div>\n <div class=\"sample-cell\"><div class=\"sample-label\">Disabled</div><div class=\"btn-shell\"><div class=\"dnf-btn image disabled dnf-ui\">购买</div></div></div>\n\n <div class=\"button-implementation-label\">CSS / Tone family<small>derived states · hover / press interactive</small></div>\n <div class=\"sample-cell\"><div class=\"sample-label\">Default · 4–7</div><div class=\"btn-shell\"><button type=\"button\" class=\"dnf-btn raster-tone normal dnf-ui\">确认</button></div></div>\n <div class=\"sample-cell\"><div class=\"sample-label\">Green · 12–15</div><div class=\"btn-shell\"><button type=\"button\" class=\"dnf-btn raster-tone tone-green normal dnf-ui\">应用</button></div></div>\n <div class=\"sample-cell\"><div class=\"sample-label\">Orange Red · 20–23</div><div class=\"btn-shell\"><button type=\"button\" class=\"dnf-btn raster-tone tone-orange normal dnf-ui\">取消</button></div></div>\n <div class=\"sample-cell\"><div class=\"sample-label\">Disabled · captured</div><div class=\"btn-shell\"><button type=\"button\" class=\"dnf-btn raster-tone disabled dnf-ui\" disabled>确认</button></div></div>\n </div>\n <div class=\"spec-row\" style=\"margin-top:14px\"><span class=\"spec-chip\">Corner Radius = 0</span><span class=\"spec-chip\">Shadow = None</span><span class=\"spec-chip\">Size = Compact · Default · Large</span><span class=\"spec-chip\">LeadingIcon = Boolean</span><span class=\"spec-chip\">Label = Text</span><span class=\"spec-chip captured\">Hover = Lighter 1 Tone</span><span class=\"spec-chip captured\">Pressed = Hover Tone + Y 1px</span></div>\n </div>\n </div>"};
|
||
})();
|