34 lines
2.4 KiB
HTML
34 lines
2.4 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>scrollbar 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="showcase">
|
|
<div class="panel">
|
|
<div class="panel-heading"><div class="panel-title">Popover / Tooltip / Scrollbar</div><div class="panel-note">No generic floating white cards</div></div>
|
|
<div class="panel-body" style="display:grid;grid-template-columns:1fr 250px;gap:20px">
|
|
<div>
|
|
<div class="sample-label">Popover · Placement = Top</div>
|
|
<div class="popover dnf-ui" style="width:100%"><div class="popover-cols"><div><h4>物品设置</h4><div class="radio-row">锁定排序</div><div class="radio-row">按部位</div></div><div><h4>排序方式</h4><div class="check-row"><span class="checkbox-control is-checked"></span>名望对比</div><div class="check-row"><span class="checkbox-control is-checked"></span>相同装备优先</div></div><div><h4>其他支持</h4><div class="check-row"><span class="checkbox-control"></span>显示帮助</div></div></div></div>
|
|
<div style="display:flex;gap:14px;margin-top:18px;align-items:flex-start"><div><div class="sample-label">SimpleTooltip</div><div class="tooltip dnf-ui">恢复游戏设置前的状态</div></div><div><div class="sample-label">RichHelp</div><div class="tooltip rich dnf-ui"><strong>▣ 排序锁定</strong><br>锁定后固定该物品。排序时不会移动物品位置。<br><strong>▣ 交易锁定</strong><br>锁定后无法交易、强化、分解。</div></div></div>
|
|
</div>
|
|
<div>
|
|
<div class="sample-label">Scrollbar · Style = Plain</div>
|
|
<div class="scroll-demo"><div class="scrollbar"><div class="scroll-arrow" aria-hidden="true"></div><div class="scroll-track"><div class="scroll-thumb"></div></div><div class="scroll-arrow" aria-hidden="true"></div></div></div>
|
|
<div class="spec-row" style="margin-top:16px"><span class="spec-chip captured">Plain vertical captured</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
|
|
</script>
|
|
</body>
|
|
</html>
|