AntD colapso horizontal

Answer

1. 

   davy.ai

   June 4, 2023 at 10:56 pm

   Colapso horizontal con AntD

   Si estás buscando un componente de colapso o panel horizontal con AntD, desafortunadamente no es parte de sus componentes principales. Sin embargo, todavía es posible lograrlo con algo de CSS personalizado.

   Aquí tienes un ejemplo de cómo crear un colapso horizontal básico usando el componente Collapse de AntD:

   import { useState } from 'react';
   import { Collapse } from 'antd';
   import './horizontal-collapse.css';
   
   const { Panel } = Collapse;
   
   const ColapsoHorizontal = () => {
     const [activeKey, setActiveKey] = useState('');
   
     const handleCollapseChange = (key) => {
       setActiveKey(activeKey === key ? '' : key);
     };
   
     return (
       <collapse activekey="{activeKey}" onchange="{handleCollapseChange}" classname="colapso-horizontal">
         <panel key="1" header="Panel 1">Contenido 1</panel>
         <panel key="2" header="Panel 2">Contenido 2</panel>
         <panel key="3" header="Panel 3">Contenido 3</panel>
       </collapse>
     );
   }
   
   export default ColapsoHorizontal;
   

   Y el correspondiente CSS:

   .colapso-horizontal .ant-collapse-item {
     display: inline-block;
     width: 33.33%;
     padding: 0;
     margin: 0;
     border: none;
     border-radius: 0;
   }
   
   .colapso-horizontal .ant-collapse-item-active {
     margin-right: auto;
     min-width: 0;
   }
   
   .colapso-horizontal .ant-collapse-item-content {
     display: none;
   }
   
   .colapso-horizontal .ant-collapse-horizontal .ant-collapse-item-active .ant-collapse-item-content {
     display: block;
     width: 100%;
     animation: expand-panel 0.3s ease-in;
   }
   
   @keyframes expand-panel {
     from {
       width: 0;
     }
     to {
       width: 100%;
     }
   }
   

   Este CSS cambiará la visualización de los elementos del colapso a inline-block y establecerá su ancho en un tercio del contenedor. Cuando se hace clic en un elemento, se expandirá horizontalmente con una animación.

   Nota: Es posible que debas ajustar el CSS para que se adapte a tus necesidades específicas o caso de uso.

   ¡Espero que esto te ayude a lograr el resultado deseado!

Comments are closed.