63 lines
4.5 KiB
HTML
63 lines
4.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>select 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">Select / TreeSelect / CascaderFilter</div><div class="spec-row"><span class="spec-chip captured">OPEN + FOCUS ROW</span></div></div>
|
|
<div class="panel-body" style="display:grid;grid-template-columns:1fr 1.1fr;gap:18px;">
|
|
<div>
|
|
<div class="sample-label">Select · Closed</div>
|
|
<div class="field select-field has-select-icon dnf-ui" style="width:100%"><span class="field-label">所有部位</span></div>
|
|
<div class="sample-label" style="margin-top:14px">Select · Open</div>
|
|
<div class="select-demo is-open" data-select-demo>
|
|
<div class="field select-field has-select-icon focus dnf-ui" style="width:100%" role="combobox" tabindex="0" aria-expanded="true" aria-controls="select-demo-menu"><span class="field-label" data-select-value>名称</span></div>
|
|
<div class="select-menu dnf-ui" id="select-demo-menu" role="listbox" style="width:100%"><div class="select-item selected" role="option" tabindex="0" aria-selected="true">名称</div><div class="select-item focused" role="option" tabindex="0" aria-selected="false">关键词</div><div class="select-item" role="option" tabindex="0" aria-selected="false">更新时间</div></div>
|
|
</div>
|
|
<div class="sample-label" style="margin-top:10px">CascaderFilter · Open + focused row</div>
|
|
<div class="cascader-filter is-open dnf-ui" data-cascader>
|
|
<div class="cascader-fields">
|
|
<button type="button" class="cascader-trigger primary"><span class="cascader-value">天界</span></button>
|
|
<button type="button" class="cascader-trigger secondary"><span>黄昏之海（寂静城）</span></button>
|
|
</div>
|
|
<div class="cascader-menu" role="listbox">
|
|
<button type="button" class="cascader-option focused" role="option">阿拉德大陆</button>
|
|
<button type="button" class="cascader-option" role="option">天界</button>
|
|
<button type="button" class="cascader-option" role="option">魔界</button>
|
|
<button type="button" class="cascader-option" role="option">神界</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="sample-label">TreeSelect · Single-column rarity tree</div>
|
|
<div class="tree-select-demo is-open" data-tree-select>
|
|
<div class="field select-field has-select-icon dnf-ui" style="width:100%" role="combobox" tabindex="0" aria-expanded="true" aria-controls="tree-select-demo-menu"><span class="field-label" data-tree-select-value>稀有</span></div>
|
|
<div class="select-menu tree-select-menu dnf-ui" id="tree-select-demo-menu" role="tree" style="width:100%">
|
|
<div class="tree-select-item tree-parent" role="treeitem" tabindex="0" aria-expanded="true" style="--depth:0">所有稀有度</div>
|
|
<div class="tree-select-item q-normal" role="treeitem" tabindex="0" style="--depth:1">普通</div>
|
|
<div class="tree-select-item q-advanced" role="treeitem" tabindex="0" style="--depth:1">高级</div>
|
|
<div class="tree-select-item q-rare is-selected" role="treeitem" tabindex="0" aria-selected="true" style="--depth:1">稀有</div>
|
|
<div class="tree-select-item q-artifact" role="treeitem" tabindex="0" style="--depth:1">神器</div>
|
|
<div class="tree-select-item q-legend" role="treeitem" tabindex="0" style="--depth:1">传说</div>
|
|
<div class="tree-select-item q-epic" role="treeitem" tabindex="0" style="--depth:1">史诗</div>
|
|
<div class="tree-select-item q-myth" role="treeitem" tabindex="0" style="--depth:1">神话</div>
|
|
<div class="tree-select-item q-primeval" role="treeitem" tabindex="0" style="--depth:1">太初</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
|
|
</script>
|
|
</body>
|
|
</html>
|