44 lines
3.5 KiB
HTML
44 lines
3.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>input 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">TextInput / CommandInput / NumberField</div><div class="panel-note">Native field grammar, normalized anatomy</div></div>
|
|
<div class="panel-body">
|
|
<div class="sample-grid cols-2 input-state-grid">
|
|
<div><div class="sample-label">TextInput · Empty</div><div class="field dnf-ui"><span class="field-label"></span></div></div>
|
|
<div><div class="sample-label">TextInput · Placeholder</div><div class="field placeholder dnf-ui"><span class="field-label">请输入卡片/宝珠名称。</span></div></div>
|
|
<div><div class="sample-label">TextInput · Focus</div><div class="field focus dnf-ui"><span class="field-label">关键词<span class="caret-line" style="display:inline-block;vertical-align:middle"></span></span></div></div>
|
|
<div><div class="sample-label">TextInput · Disabled</div><div class="field disabled dnf-ui"><span class="field-label">不可编辑</span></div></div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="command-grid">
|
|
<div>
|
|
<div class="sample-label">CommandInput · Rest</div>
|
|
<div class="field command-field dnf-ui"><span class="command-prefix">普通</span><span class="command-query"></span></div>
|
|
</div>
|
|
<div class="command-open-demo">
|
|
<div class="sample-label">CommandInput · Suggestions open</div>
|
|
<div class="field command-field dnf-ui"><span class="command-prefix">普通</span><span class="command-query">/fa</span></div>
|
|
<div class="command-suggestions dnf-ui"><div><span class="command-prefix mini">普通</span><span>/fa</span></div><div><span class="command-prefix mini green">建筑</span><span>/fs</span></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="number-inline" data-number-input><div class="sample-label">NumberField + FastStep</div><div style="display:flex"><div class="field dnf-ui" style="min-width:210px"><span class="field-label">数量：<span data-number-value>1</span></span><div class="spinner"><button type="button" class="spin-half" data-step="1" aria-label="增加 1"><i class="tri-up"></i></button><button type="button" class="spin-half" data-step="-1" aria-label="减少 1"><i class="tri-down"></i></button></div></div><div class="fast-step dnf-ui"><button type="button" class="fast-step-button" data-step="10" aria-label="增加 10"><span class="fast-step-label">+10</span></button><button type="button" class="fast-step-button" data-step="-10" aria-label="减少 10"><span class="fast-step-label">-10</span></button></div></div></div>
|
|
<div class="spec-row input-specs"><span class="spec-chip captured">Placeholder / Command captured</span><span class="spec-chip derived">Invalid / Readonly derived</span><span class="spec-chip">Prefix = nested anatomy</span></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
|
|
</script>
|
|
</body>
|
|
</html>
|