40 lines
1.6 KiB
Plaintext
40 lines
1.6 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Kole UI · Segmented (H5)</title>
|
||
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
|
||
<link rel="stylesheet" href="./Segmented.css">
|
||
<style>
|
||
/* 演示页布局脚手架 —— 组件样式已并入 Segmented.css（S9-P7 单一样式真源） */
|
||
.demo { padding: 24px; background: var(--kole-color-page-bg); color: var(--kole-color-text-body); font-family: var(--font-family); }
|
||
h1 { font-size: 20px; margin: 0 0 4px; }
|
||
.sub { color: var(--kole-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="demo">
|
||
<h1>Kole UI · Segmented 组件（纯 H5）</h1>
|
||
<p class="sub">对齐 Segmented 规范：高32px、选项内边距8px 16px、容器 #F5F7FA、圆角4px、选中白底、禁用 #BFBFBF</p>
|
||
|
||
<div class="kole-segmented" id="seg">
|
||
<button class="kole-segmented-item is-active" data-val="list"><span class="ico">☰</span>列表</button>
|
||
<button class="kole-segmented-item" data-val="kanban">看板</button>
|
||
<button class="kole-segmented-item" data-val="gantt">甘特图</button>
|
||
<button class="kole-segmented-item is-disabled" data-val="cal" disabled>日历</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const seg = document.getElementById('seg');
|
||
seg.addEventListener('click', (e) => {
|
||
const btn = e.target.closest('.kole-segmented-item');
|
||
if (!btn || btn.disabled) return;
|
||
seg.querySelectorAll('.kole-segmented-item').forEach(b => b.classList.remove('is-active'));
|
||
btn.classList.add('is-active');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|