componentes-dengel
v1.3.66
Published
=== **PARA UTILIZAR ESTE PAQUETE ES NECESARIO QUE PARA EMPEZAR CREE UN SU PROYECTO RAIZ LA CARPETA types y en dentro crear el archivo componentes-dengel.d.ts y añada el nombre de sus componentes** ```tsx declare module 'componentes-dengel' { export const
Downloads
102
Readme
BIENVENIDOS A LOS COMPONENTES DE DENGEL
=== PARA UTILIZAR ESTE PAQUETE ES NECESARIO QUE PARA EMPEZAR CREE UN SU PROYECTO RAIZ LA CARPETA types y en dentro crear el archivo componentes-dengel.d.ts y añada el nombre de sus componentes
declare module 'componentes-dengel' {
export const HeaderMobileTypeOne: any;
export const NavMobileTypeOne: any;
}
===
COMPONENTES NAV
NavMobileTypeOne
- openMenu: Es para abrir el menú del responsive y mejorar la accesesibilidad de el responsive mobile
- children: Puedes agregar cualquier elemento como por ejemplo en next js Link
<NavMobileTypeOne openMenu={openMenu}> </NavMobileTypeOne>
COMPONENTES HEADER
HeaderMobileTypeOne
openMenu: Es para abrir el menú del responsive mobile
setOpenMenu: Obtiene el estado si es false o true de la constante openMenu
children: Puedes agregar cualquier elemento
colorHeader: No es obligatorio añadir color de fondo de tu elemento header.
logo: Añada elemento img o en caso de next js Image.
<HeaderMobileTypeOne logo={<img alt="img" src="#" className='text-white'/>} colorHeader='bg-sky-800' openMenu={openMenu} setOpenMenu={()=>setOpenMenu(!openMenu)}> </HeaderMobileTypeOne>
HeaderTwo (header principal responsive)
openMenu: Es para abrir el menú del responsive mobile
logo: Añada elemento img o en caso de next js Image.
colorHeader: No es obligatorio añadir color de fondo de tu elemento header.
setOpenMenu: Obtiene el estado si es false o true de la constante openMenu
children: Puedes agregar cualquier elemento
openMenuDesktop: Es para abrir el menú pequeño de desktop desktop 1024px, 1280px en general
setOpenMenuDesktop: Obtiene el estado si es false o true de la constante openMenuDesktop -navDesktopLittle: El menú pequeño de desktop -LinksNavDesktop La lista del menú pequeño. -navMobileContent Nav mobile. -colorSubNav Solo se permite color configurado en tailwindcss -linksSubNav Se permite elementos, componentes -openSubNav Abre el sub menu | booleano -setOpenSubNav Guarda booleano EJEMPLO GENERAL
<HeaderTwo navMobileContent={ <NavMobileTypeTwo colorSubNav='bg-sky-600' linksSubNav={<section><h2 className='text-white'>contactos</h2>
Componente questions
- colorIconActive : Solo acepta colores en hexadecimal
- colorIconDefault : Solo acepta colores en hexadecimal
- colorTextoActive : Solo acepta colores configurados en tailwindcss
- colorTextoDefault : Solo acepta colores configurados en tailwindcss
- questions : Poner array como el siguiente ejemplo:
const questions=[ { id:1, question:"¿Qué caracteriza a Elon Musk?", state:false, answer:"Elon Musk es cofundador y líder de Tesla, SpaceX, Neuralink y The Boring Company. Como cofundador y director general de Tesla, Elon lidera el diseño de productos, ingeniería y fabricación de los vehículos eléctricos, productos de batería y productos" }, { id:2, question:"¿Quién es Elon Musk y cuáles inventos?", state:false, answer:"En 2002, Musk fundó SpaceX, fabricante aeroespacial y empresa de servicios de transporte espacial, de la que es CEO e ingeniero jefe." }, { id:3, question:"¿Cuántos idiomas habla Elon Musk?", state:false, answer:"Según sus datos, Musk genera ¡más de 22.500 dólares en un minuto! Unos 375 dólares en un segundo. En euros, gana casi 330 " } ]
- idd y setIdd:
const [idd,setIdd]=useState<any|undefined>({id:0,state:false});
<Question colorTextAnswer="text-black" colorIconActive="#FE9800" colorIconDefault="#A599EF" colorTextoActive="text-orange-500" colorTextoDefault="tex-black" questions={questions} idd={idd} setIdd={setIdd} />