主页 / coding / 问题 / 77907933
Accepted
Dreamer64
Asked: 2024-01-31 00:31:44 +0800 CST

如何使 Daisy UI Drawer 组件与 Swap 组件配合使用？

  • 772

我正在尝试使用 Daisy UI 用动画按钮打开抽屉。

目标是通过简单地单击交换按钮组件来打开抽屉组件，但是其中任何一个都可以！交换动画有效，但抽屉没有打开，或者抽屉打开没有交换组件动画！...

<!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/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>

</head>
<body>

    <label class="btn btn-circle swap swap-rotate z-10" for="my-drawer"> <!-- my confusing here --> 
        <!-- this hidden checkbox controls the state -->
        <input type="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">
        <input id="my-drawer" type="checkbox" class="drawer-toggle" />
        <div class="drawer-content">
          <!-- Page content here -->
          <!--label for="my-drawer" class="btn btn-primary drawer-button">Open drawer</label-->          
        </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>

我尝试将for="my-drawer"抽屉组件移动到交换组件，但发现抽屉打开但没有交换动画，如果我将其返回，则交换动画有效，但抽屉无法打开。

请问我怎样才能同时做这两件事？（没有JQ）

html

1 个回答

  1. Best Answer

    您可以通过应用适用于选中的 inside 的 CSS 来模拟.swap-on/的功能，但改为使用抽屉复选框：.swap-off<input>

    <!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/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div class="drawer">
    <input id="my-drawer" type="checkbox" class="drawer-toggle" />

    <label class="btn btn-circle swap swap-rotate z-10" for="my-drawer">
      <!-- hamburger icon -->
      <svg class="swap-off fill-current [:checked~*_&]:!-rotate-45 [:checked~*_&]:!opacity-0" 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 [:checked~*_&]:!rotate-0 [:checked~*_&]:!opacity-100" 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-content">
      <!-- Page content here -->
      <!--label for="my-drawer" class="btn btn-primary drawer-button">Open drawer</label-->
    </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>

    • 0

相关问题