0.1.5 • Published 4 years ago
dplibrariesreact v0.1.5
DPLibrariesReact
Es un Librerias para componentes de React
instalación de la apilicación
npm i dplibrariesreact
Button's type
Puedes utilizar estos componentes como button o Link(a)
solamente utilizando href
.
import React from 'react'
import {
Button,
Container,
TitlePages,
PrimaryButton,
SecundaryButton,
DangerButton,
WarningButton,
InfoButton,
LightButton,
DarkButton } from 'dplibrariesreact'
export default function ButtonPage() {
return (
<Main>
<Button type='button'>Botón Por defecto</Button>
<PrimaryButton type='button'>Botón Primario</PrimaryButton>
<SecundaryButton type='button'>Botón Secundario</SecundaryButton>
<DangerButton type='button'>Botón Peligro</DangerButton>
<WarningButton type='button'>Botón Advertencia</WarningButton>
<InfoButton type='button'>Botón Información</InfoButton>
<LightButton type='button'>Botón Ligero</LightButton>
<DarkButton type='button'>Botón Oscuro</DarkButton>
<Button href='#'>Enlace Por defecto</Button>
<PrimaryButton href='#'>Enlace Primario</PrimaryButton>
<SecundaryButton href='#'>Enlace Secundario</SecundaryButton>
<DangerButton href='#'>Enlace Peligro</DangerButton>
<WarningButton href='#'>Enlace Advertencia</WarningButton>
<InfoButton href='#'>Enlace Información</InfoButton>
<LightButton href='#'>Enlace Ligero</LightButton>
<DarkButton href='#'>Enlace Oscuro</DarkButton>
</>
)
}
Headar
Utilizamos useState open para abrir panel de menu hacer la animación de burger botón transformadolo en X
,
import React, { useState} from 'react'
import { Header, Logo, Burger, PanelMenu, Menu, ItemMenu, LinkMenu} from 'dplibrariesreact'
export default HeaderLayout = () => {
const [open, setOpen] = useState(false)
return (
<Header>
<Logo><h1>logo</h1></Logo>
<Burger open={open} setOpen={setOpen} />
<PanelMenu open={open} setOpen={setOpen}>
<Menu>
<ItemMenu>
<LinkMenu href='/' open={open} setOpen={setOpen}>Inicio</LinkMenu>
<LinkMenu href='/buttons' open={open} setOpen={setOpen}>Botones</LinkMenu>
</ItemMenu>
</Menu>
</PanelMenu>
</Header>
)
}
export default HeaderLayout