<!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 · LayoutSwitcher</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="./LayoutSwitcher.css" />
</head>
<body>
  <div class="kole-page">
    <h2 class="kole-h2">LayoutSwitcher 布局切换</h2>
    <p class="kole-desc">侧边 / 顶部 / 混合导航布局切换，保存偏好。</p>

    <div class="kole-demo">
      <div class="kole-layoutsw" id="sw">
        <div class="kole-layoutsw-opt" role="radio" tabindex="0" data-v="side">
          <div class="kole-layoutsw-mini" role="radio" tabindex="0"><div class="s-body"><div class="s-side"></div><div class="s-main"></div></div></div>
          <div class="kole-layoutsw-label">侧边布局</div>
        </div>
        <div class="kole-layoutsw-opt" role="radio" tabindex="0" data-v="top">
          <div class="kole-layoutsw-mini" role="radio" tabindex="0"><div class="s-top"></div><div class="s-body"><div class="s-main"></div></div></div>
          <div class="kole-layoutsw-label">顶部布局</div>
        </div>
        <div class="kole-layoutsw-opt" role="radio" tabindex="0" data-v="mixed">
          <div class="kole-layoutsw-mini" role="radio" tabindex="0"><div class="s-top"></div><div class="s-body"><div class="s-side"></div><div class="s-main"></div></div></div>
          <div class="kole-layoutsw-label">混合布局</div>
        </div>
      </div>
      <p class="kole-code-tip" id="out"></p>
    </div>
  </div>

  <script>
    var sel = document.getElementById('sw');
    var out = document.getElementById('out');
    sel.addEventListener('click', function (e) {
      var opt = e.target.closest('.kole-layoutsw-opt');
      if (!opt) return;
      Array.prototype.forEach.call(sel.children, function (c) { c.classList.remove('is-active'); });
      opt.classList.add('is-active');
      out.textContent = '当前布局：' + opt.querySelector('.kole-layoutsw-label').textContent;
    });
    sel.children[0].classList.add('is-active');
    out.textContent = '当前布局：侧边布局';
  </script>
</body>
</html>
