<!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 · DensitySwitcher</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="./DensitySwitcher.css" />
</head>
<body>
  <div class="kole-page">
    <h2 class="kole-h2">DensitySwitcher 密度切换</h2>
    <p class="kole-desc">宽松 / 默认 / 紧凑，影响表格、表单间距，可局部独立设置并保存。</p>

    <div class="kole-demo">
      <div class="kole-densw" id="sw">
        <button class="kole-densw-opt" data-v="loose">宽松</button>
        <button class="kole-densw-opt" data-v="default">默认</button>
        <button class="kole-densw-opt" data-v="compact">紧凑</button>
      </div>
      <div class="kole-densw-demo default" id="demo">
        <div class="kole-densw-row"><span>用户管理</span><span class="muted">128 项</span></div>
        <div class="kole-densw-row"><span>角色管理</span><span class="muted">12 项</span></div>
        <div class="kole-densw-row"><span>菜单管理</span><span class="muted">36 项</span></div>
      </div>
    </div>
  </div>

  <script>
    var sw = document.getElementById('sw');
    var demo = document.getElementById('demo');
    sw.addEventListener('click', function (e) {
      var b = e.target.closest('.kole-densw-opt');
      if (!b) return;
      Array.prototype.forEach.call(sw.children, function (c) { c.classList.remove('is-active'); });
      b.classList.add('is-active');
      demo.className = 'kole-densw-demo ' + b.dataset.v;
    });
    sw.children[1].classList.add('is-active');
  </script>
</body>
</html>
