抽屉

为了测试下面的抽屉样式，我们添加了这样的 JS 脚本来动态控制类名

function toggleDrawer(name) {
  let element = document.getElementById(`drawer-${name}`);
  if (element.classList.contains('show')) {
    element.classList.remove('show');
  } else {
    element.classList.add('show');
  }
}

位置

左

<div>
  <label class="btn solid success w-fit" onclick="toggleDrawer('left')">点击打开左边的抽屉</label>
  <label class="drawer-overlay" onclick="toggleDrawer('left')"></label>
  <div class="drawer left" id="drawer-left">
    <div class="content flex flex-col h-full">
      <label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('left')">✕</label>
      <h2 class="text-xl">抽屉内容</h2>
    </div>
  </div>
</div>

点击打开左边的抽屉

抽屉内容

右

<div>
  <label class="btn solid success w-fit" onclick="toggleDrawer('right')">点击打开右边的抽屉</label>
  <label class="drawer-overlay" onclick="toggleDrawer('right')"></label>
  <div class="drawer right" id="drawer-right">
    <div class="content flex flex-col h-full">
      <label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('right')">✕</label>
      <h2 class="text-xl">抽屉内容</h2>
    </div>
  </div>
</div>

点击打开右边的抽屉

抽屉内容

上

<div>
  <label class="btn solid success w-fit" onclick="toggleDrawer('top')">点击打开上方的抽屉</label>
  <label class="drawer-overlay" onclick="toggleDrawer('top')"></label>
  <div class="drawer top" id="drawer-top">
    <div class="content flex flex-col h-full">
      <label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('top')">✕</label>
      <h2 class="text-xl">抽屉内容</h2>
    </div>
  </div>
</div>

点击打开上方的抽屉

抽屉内容

下

<div>
  <label class="btn solid success w-fit" onclick="toggleDrawer('bottom')">点击打开下方的抽屉</label>
  <label class="drawer-overlay" onclick="toggleDrawer('bottom')"></label>
  <div class="drawer bottom" id="drawer-bottom">
    <div class="content flex flex-col h-full">
      <label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('bottom')">✕</label>
      <h2 class="text-xl">抽屉内容</h2>
    </div>
  </div>
</div>

点击打开下方的抽屉

抽屉内容

增强功能

点击阴影层不关闭抽屉

<div>
  <label class="btn solid danger w-fit only-one-line" onclick="toggleDrawer('toggle-overlay-click-not-close')"
    >点击打开抽屉（点击打开后的阴影层不会关闭）</label
  >
  <label class="drawer-overlay"></label>
  <div class="drawer left" id="drawer-toggle-overlay-click-not-close">
    <div class="content flex flex-col h-full">
      <label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('toggle-overlay-click-not-close')"
        >✕</label
      >
      <h2 class="text-xl">抽屉内容</h2>
    </div>
  </div>
</div>

点击打开抽屉（点击打开后的阴影层不会关闭）

抽屉内容

不显示阴影层

<div>
  <label class="btn solid danger w-fit only-one-line" onclick="toggleDrawer('no-overlay')"
    >点击打开抽屉（点击打开后不显示阴影层）</label
  >
  <div class="drawer left" id="drawer-no-overlay">
    <div class="content flex flex-col h-full">
      <label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('no-overlay')">✕</label>
      <h2 class="text-xl">抽屉内容</h2>
    </div>
  </div>
</div>

点击打开抽屉（点击打开后不显示阴影层）

抽屉内容

暂停页面滚动

<div>
  <label class="btn solid danger w-fit only-one-line" onclick="toggleDrawer('pause-scroll')"
    >点击打开（打开后将暂停页面滚动）</label
  >
  <label class="drawer-overlay" onclick="toggleDrawer('pause-scroll')"></label>
  <div class="drawer left pause-scroll" id="drawer-pause-scroll">
    <div class="content flex flex-col h-full">
      <label class="btn sm circle ghost absolute right-2 top-2" onclick="toggleDrawer('pause-scroll')">✕</label>
      <h2 class="text-xl">试试滚动页面 🦎</h2>
    </div>
  </div>
</div>

点击打开（打开后将暂停页面滚动）

试试滚动页面 🦎

类名表

类名	描述
drawer	用于抽屉的包装
show	设置在 drawer 类名处，用于控制抽屉打开
drawer-overlay	用于抽屉打开后阴影部分的包装
pause-scroll	设置在 drawer 类名处，用于使抽屉打开时暂停页面滚动
left	设置抽屉打开位置为左
right	设置抽屉打开位置为右
top	设置抽屉打开位置为上
bottom	设置抽屉打开位置为下

分隔线下拉菜单