Para realizar la instalación de la librería amelia-ux puedes utilizar npm. Abre tu terminal y ejecuta el siguiente comando:
npm install amelia-ux
El componente Theme ofrece la posibilidad de aplicar un tema a la interfaz. Puede ser 'dark' o 'light'.
El proveedor recibe las siguientes propiedades:
Este componente envuelve el contenido de la aplicación y permite aplicar un tema específico a todos los componentes hijos.
import { ThemeProvider } from 'amelia-ux'
<ThemeProvider theme="dark">
<App />
</ThemeProvider>
El hook useTheme() proporciona acceso al tema actual de la aplicación y a una función para alternar entre los temas.
Proporciona dos datos:
Este hook es útil para componentes que necesitan adaptarse al tema actual de la aplicación o para proporcionar a los usuarios la capacidad de cambiar entre temas claros y oscuros, por ejemplo.
import { useTheme, Button } from 'amelia-ux'
export default App = () => {
const {theme, toggleTheme} = useTheme()
return <div style={{backgroundColor: `${theme} === "dark ? #000 : #fff`}}>
<Button
type="accent"
width="large"
onClick={toggleTheme}>
Toggle theme
</Button>
</div>
}
El componente Toast permite mostrar alertas en la interfaz.
El proveedor recibe las siguientes propiedades:
Este componente envuelve el contenido de la aplicación y permite mostrar alertas en diferentes posiciones de la interfaz.
import { Toast } from 'amelia-ux'
<Toast position="top-right">
<App />
</Toast>
El hook useToast() proporciona una función para crear alertas en la aplicación. Recibe un objeto con dos propiedades:
Este hook devuelve una función que permite crear una alerta con el tipo y el mensaje especificados.
import { useToast, Button, useTheme } from 'amelia-ux'
export default App = () => {
const { theme } = useTheme()
const { toast } = useToast()
return <div style={{ backgroundColor:`${theme === "dark" ? '#000' : '#fff'}`}}>
<Button
type="accent"
width="large"
onClick={() =>
toast(
{
type: "info",
message: "My first toast with amelia-ux"
})
}>
Toggle theme
</Button>
</div>
}
El componente Typography estandariza los textos de la aplicación.
Recibe las siguientes propiedades:
import { Typography } from 'amelia-ux'
export default App = () => {
const { theme } = useTheme()
return <div style={{ backgroundColor:`${theme === "dark" ? '#000' : '#fff'}`}}>
<Typography as="h1" fontSize="xl" fontWeight="bold"> Welcome to amelia-ux !!!</Typography>
</div>
}
El componente Navbar permite agregar una barra de navegación a la interfaz.
El componente consta de:
Todos los componentes, Navbar, NavbarLeft y NavbarRight, deben recibir un "children". Esto significa que cualquier contenido que se desee mostrar dentro de la barra de navegación debe ser proporcionado como children de estos componentes.
import { Navbar, NavbarLeft, NavbarRight } from 'amelia-ux'
export default App = () => {
const { theme } = useTheme()
return <div style={{ backgroundColor: theme === "dark" ? '#000' : '#fff' }}>
<Navbar>
<NavbarLeft>
Este contenido se muestra a la izquierda
</NavbarLeft>
<NavbarRight>
Este contenido se muestra a la derecha
</NavbarRight>
</Navbar>
</div>
}
El componente Sidebar permite agregar una barra lateral a la interfaz.
El componente consta de:
Todos los componentes, Sidebar, SidebarTop y SidebarBottom, deben recibir un "children". Esto significa que cualquier contenido que se desee mostrar dentro de la barra lateral debe ser proporcionado como children de estos componentes.
import { Sidebar, SidebarTop, SidebarBottom } from 'amelia-ux'
export default App = () => {
const { theme } = useTheme()
return <div style={{ backgroundColor:`${theme === "dark" ? '#000' : '#fff'}`}}>
<Sidebar>
<SidebarTop>
Este contenido se muestra en la parte superior
</SidebarTop>
<SidebarBottom>
Este contenido se muestra en la parte inferior
</SidebarBottom>
</Sidebar>
</div>
}
El componente Input permite agregar campos de entrada a la aplicación.
El componente Input hereda todas las props de la etiqueta input de HTML, lo que significa que puede aceptar cualquier prop válida de un input estándar, como value, onChange, placeholder, etc.
Además, el componente Input puede recibir opcionalmente la siguiente propiedad:
import { useState } from 'react'
import { Input } from 'amelia-ux'
export default App = () => {
const { theme } = useTheme()
const [name, setName] = useState<string>("")
return <div style={{ backgroundColor:`${theme === "dark" ? '#000' : '#fff'}`}}>
<Input type="text" placeholder="Write your name !!!" value={name} onChange={(e) => setName(e.target.name)} />
</div>
}
El componente Button permite agregar botones a la aplicación.
El componente Button hereda todas las props de la etiqueta div, lo que significa que puede aceptar cualquier prop válida de un div estándar de HTML, como className, style, onClick, etc.
Además, el componente Button recibe de forma obligatoria las siguientes propiedades:
import { useState } from 'react'
import { Input, Button } from 'amelia-ux'
export default App = () => {
const { theme } = useTheme()
const [name, setName] = useState<string>("")
const greeting = () => {
alert(`Welcome ${name}`)
}
return <div style={{ backgroundColor:`${theme === "dark" ? '#000' : '#fff'}`}}>
<Input type="text" placeholder="Write your name !!!" value={name} onChange={(e) => setName(e.target.name)} />
<Button type="accent" size="w-full" onClick={greeting}> Greeting {name} </Button>
</div>
}
El componente Icon permite renderizar imágenes de manera estandarizada en la aplicación.
Recibe las siguientes propiedades:
Es importante tener en cuenta que si se utiliza la propiedad "image", no se puede utilizar la propiedad "defaultImage", y viceversa.
import { Navbar, NavbarLeft, NavbarRight, Icon } from 'amelia-ux'
// Images
import Logo from 'assets/logo.png'
import Logout from 'assets/logo.png'
export default App = () => {
const { theme } = useTheme()
return <div style={{ backgroundColor:`${theme === "dark" ? '#000' : '#fff'}`}}>
<Navbar>
<NavbarLeft>
<Icon width={100} image={Logo} />
</NavbarLeft>
<NavbarRight>
<Icon width={35} image={Logout} />
</NavbarRight>
</Navbar>
</div>
}
El componente Tag proporciona una interfaz para representar etiquetas en una aplicación. Estas etiquetas pueden ser utilizadas para categorizar o identificar elementos dentro de la interfaz.
El componente Tag acepta las siguientes propiedades:
import { useState } from 'react'
import { Tag } from 'amelia-ux'
const App = () => {
const [selectedTag, setSelectedTag] = useState<string>("")
const handleTagClick = (tag: string) => {
setSelectedTag(tag)
}
return (
<div>
<Tag tag="Tag 1" selected={selectedTag === "Tag 1"} onClick={() => handleTagClick("Tag 1")} />
<Tag tag="Tag 2" selected={selectedTag === "Tag 2"} onClick={() => handleTagClick("Tag 2")} />
<Tag tag="Tag 3" selected={selectedTag === "Tag 3"} onClick={() => handleTagClick("Tag 3")} />
</div>
)
}
El componente Modal permite mostrar ventanas modales en la interfaz de usuario.
El componente consta de tres partes principales:
Cada uno de estos componentes es opcional y puede ser utilizado según las necesidades de la aplicación. Además, el componente Modal puede aceptar propiedades adicionales para controlar su comportamiento, como la visibilidad (isOpen), el cierre (onClose), la superposición (overlay), la clase (className) y los estilos (style).
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'amelia-ux'
const App = () => {
return (
<Modal isOpen={true} onClose={() => console.log("Cerrar ventana modal")} overlay={true}>
<ModalHeader>
<h2>Título de la ventana modal</h2>
</ModalHeader>
<ModalBody>
<p>Contenido principal de la ventana modal.</p>
</ModalBody>
<ModalFooter>
<button onClick={() => console.log("Aceptar")}>Aceptar</button>
<button onClick={() => console.log("Cancelar")}>Cancelar</button>
</ModalFooter>
</Modal>
)
}
El componente Table permite crear contenedores en forma de tabla.
El componente consta de tres partes principales:
Los componentes internos TableHeader, TableBody y TableFooter ocupan respectivamente el 10%, 60% y 30% del espacio disponible dentro de TableUpContent o TableDownContent. Estos son los valores por defecto y se pueden modificar utilizando la propiedad flex-basis en los estilos.
import { Table, TableUpContent, TableDownContent, TableHeader, TableBody, TableFooter } from 'amelia-ux'
const App = () => {
return (
<Table position="fixed">
<TableUpContent style={{ maxHeight: '70%' }}>
<TableHeader> Encabezado </TableHeader>
<TableBody> Cuerpo </TableBody>
<TableFooter> Pie de página </TableFooter>
</TableUpContent>
<TableDownContent style={{ maxHeight: '30%' }}>
<TableHeader style={{ flexBasis: '20%' }}> Encabezado </TableHeader>
<TableBody style={{ flexBasis: '50%' }}> Cuerpo </TableBody>
<TableFooter style={{ flexBasis: '30%' }}> Pie de página </TableFooter>
</TableDownContent>
</Table>
)
}
FAQs
UI component library for OctoCam Maps enterprise
The npm package amelia-ux receives a total of 0 weekly downloads. As such, amelia-ux popularity was classified as not popular.
We found that amelia-ux demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.