Início / coding / Perguntas / 77907933
Accepted
Dreamer64
Asked: 2024-01-31 00:31:44 +0800 CST

Como fazer o componente Daisy UI Drawer funcionar com o componente Swap?

  • 772

Estou tentando abrir uma gaveta com botão animado usando Daisy UI.

O objetivo é abrir o componente gaveta simplesmente clicando em um componente do botão de troca, porém qualquer um deles funciona! a animação de troca funciona, mas nenhuma gaveta aberta ou a gaveta aberta funciona sem a animação do componente de troca!...

<!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>

Tentei mover do for="my-drawer"componente de gaveta para o componente de troca e descobri que a gaveta está aberta, mas não há animação de troca. Se eu devolvê-la, a animação de troca funciona, mas a gaveta não abre.

Como posso fazer as duas coisas juntas, por favor? (Sem JQ)

html

1 respostas

  1. Best Answer

    Você pode emular a funcionalidade do .swap-on/ .swap-offaplicando o CSS que se aplicaria ao inner marcado <input>, mas usando a caixa de seleção da gaveta:

    <!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

relate perguntas