Início / user-1336118

Dreamer64's questions

Martin Hope
Dreamer64
Asked: 2025-03-03 21:20:38 +0800 CST
  • 6

Usando (Vite + ReactJS + Tailwind CSS v3 + HeroUI)

Se aplicássemos isHeaderStickyprop em uma tabela HeroUI, ele adicionaria outro estilo, como algum tipo de sombra, contorno ou talvez algum tipo de borda. Como podemos remover isso?

insira a descrição da imagem aqui

Meu código para produzir a imagem acima é:

  <Table
    removeWrapper
    isHeaderSticky                    
    classNames={{ 
      th: ["!rounded-none", "!shadow-none", "!border-none"],          
    }}
    >
    <TableHeader>
      <TableColumn key="name">NAME</TableColumn>
      <TableColumn key="role">ROLE</TableColumn>
      <TableColumn key="status">STATUS</TableColumn>
    </TableHeader>
    <TableBody items={items} emptyContent={"No permits found"}>              
    </TableBody>
  </Table>

Tentei adicionar isto:

classNames={{
  th: ["!border-none", "!rounded-none", "!shadow-none"],
}}

mas não está funcionando, então alguma ideia, por favor?

reactjs
Martin Hope
Dreamer64
Asked: 2024-08-05 15:03:18 +0800 CST
  • 6

Estou usando vanilla-calendar.pro e aqui está meu código simples abaixo:

          document.addEventListener('DOMContentLoaded', () => {
            const calendar = new VanillaCalendar('#calendar', {
                // Settings
                input: true,
                actions: {
                    changeToInput(e, self) {
                    if (!self.HTMLInputElement) return;
                    if (self.selectedDates[0]) {
                        self.HTMLInputElement.innerHTML = self.selectedDates[0];
                        // if you want to hide the calendar after picking a date
                        self.hide();
                    } else {
                        self.HTMLInputElement.textContent = '';
                    }
                    },
                },
                settings: {
                    visibility: {
                    positionToInput: 'center',
                    },
                },

            });
            calendar.init();
          });
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/build/vanilla-calendar.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/build/vanilla-calendar.min.js" defer></script>
        <title>test page</title>
    </head>
    
    <body>
        <h1 style =" font-size: 40px;" >Test Project</h1>

        <div style="height: 50rem; background-color: rgb(182, 142, 215); overflow-y: scroll; display: flex; justify-content: center; flex-direction: column;">
            
            <div style="margin-bottom: 90rem;" > some components 1</div>
            
            <input id="calendar" type="text" placeholder="Choose date" readonly />
            
            <div style="margin-bottom: 90rem;" > some components 2</div>

        </div>
 
      </body>
</html>

Meu problema é que quando você clica na entrada para escolher uma data e o pop-up do calendário aparece, quando você tenta rolar a div interna o pop-up do calendário não rola corretamente com ele !

Tentei contê-lo dentro de uma div para ver se funciona mas não funciona, também tentei definir o estilo

position: absolute/ relative or z-indexaqui e ali também não está funcionando..

Alguma ajuda com isso, por favor?

javascript
Martin Hope
Dreamer64
Asked: 2024-01-31 00:31:44 +0800 CST
  • 5

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