如何让Daisy UI的Drawer组件与Swap组件协同工作？

问题说明 #

我尝试用Daisy UI实现点击带切换动画的按钮打开Drawer组件，但目前两者无法同时正常工作：要么Swap按钮的切换动画生效，但Drawer无法打开；要么Drawer能打开，但Swap按钮没有切换动画。

我曾尝试将for="my-drawer"属性在Swap组件和Drawer组件之间移动，但每次都只能实现其中一个功能。如何在不使用jQuery的前提下让两者同时正常工作？

解决方案 #

问题核心是Swap组件和Drawer组件原本使用两个独立的checkbox控制状态，导致状态无法同步。只需让它们共用同一个checkbox，就能实现动画与Drawer开关的联动。

具体操作：

• 移除Swap组件内部独立的<input type="checkbox" />
• 确保Drawer的drawer-toggle checkbox的id="my-drawer"与Swap的label标签for属性正确关联
• Swap的swap-on/swap-off样式会自动依赖这个共用checkbox的状态，实现动画切换

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Ui</title>

    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.1/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>

</head>
<body>
    <!-- 绑定到Drawer的toggle checkbox -->
    <label class="btn btn-circle swap swap-rotate z-10" for="my-drawer">
        <!-- 移除原内部独立checkbox -->
        <!-- hamburger icon -->
        <svg class="swap-off fill-current" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"/></svg>
        <!-- close icon -->
        <svg class="swap-on fill-current" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><polygon points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"/></svg>
    </label>

    <div class="drawer">
        <!-- 此checkbox同时控制Drawer和Swap状态 -->
        <input id="my-drawer" type="checkbox" class="drawer-toggle" />
        <div class="drawer-content">
          <!-- Page content here -->
        </div>
        <div class="drawer-side">
          <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
          <ul class="menu p-4 w-80 min-h-full bg-base-200 text-base-content mt-10">
            <!-- Sidebar content here -->
            <li><a>Sidebar Item 1</a></li>
            <li><a>Sidebar Item 2</a></li>
          </ul>
        </div>
      </div>

</body>
</html>

原理说明 #

Daisy UI的Swap组件通过checkbox的:checked伪类控制swap-on/swap-off元素的显示切换，Drawer组件同样依赖自身toggle checkbox的状态。当两者共用同一个checkbox时，点击label触发的状态变化会同时作用于Swap动画和Drawer开关，实现同步效果。

内容的提问来源于stack exchange，提问作者Dreamer64