init
This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=1920, initial-scale=1">
|
||||
<base href="../../">
|
||||
<title>button 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="construction">
|
||||
<div class="panel">
|
||||
<div class="panel-heading"><div class="panel-title">3-slice control surface</div><div class="spec-chip asset">SOURCE ASSET</div></div>
|
||||
<div class="panel-body">
|
||||
<div class="anatomy">
|
||||
<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>
|
||||
<div class="anatomy-list">
|
||||
<div class="anatomy-line"><strong>Left cap</strong><span>固定像素，不横向拉伸</span></div>
|
||||
<div class="anatomy-line"><strong>Center</strong><span>仅中段伸缩，承载文字</span></div>
|
||||
<div class="anatomy-line"><strong>Right cap</strong><span>保留边角和金属高光</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="rule-label">Responsive reconstruction</div>
|
||||
<div class="slice-demo">
|
||||
<span class="cut left"></span><span class="cut right"></span>
|
||||
<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>
|
||||
</div>
|
||||
<div style="height:28px"></div>
|
||||
<div class="btn-shell"><div class="dnf-btn large normal dnf-ui"><span class="btn-icon">＋</span>创建预设</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template id="showcase">
|
||||
<div class="panel button-showcase-panel" style="height:292px;margin-bottom:18px;">
|
||||
<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>
|
||||
<div class="panel-body">
|
||||
<div class="sample-grid button-state-grid" style="grid-template-columns:repeat(5,1fr);">
|
||||
<div class="button-implementation-label">Implementation / CSS<small>原生渐变与描边 · 可编辑</small></div>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<div class="sample-cell"><div class="sample-label">Disabled</div><div class="btn-shell"><div class="dnf-btn disabled dnf-ui">购买</div></div></div>
|
||||
|
||||
<div class="button-implementation-label">Implementation / CSS Replica<small>CSS gradient + inner glow · primary</small></div>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<div class="button-implementation-label">CSS / Tone family<small>derived states · hover / press interactive</small></div>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user