Los desarrolladores encontrarán que Chakra UI es su socio más útil. Como un conjunto de herramientas de componentes para servicios en línea, Chakra UI facilita la construcción de aplicaciones inclusivas con eficiencia.
Como resultado de su accesibilidad y cumplimiento de WAI-ARIA, los elementos de la interfaz de usuario de Chakra son fáciles de personalizar y cambiar el tema utilizando su API. Sin embargo, esto es solo la punta del iceberg de las ventajas que ofrece a los desarrolladores.
En esta publicación, veremos más de cerca algunas de las características más avanzadas de la interfaz de usuario de Chakra y cómo pueden ayudarlo a ser más productivo como programador.
¿Qué es la interfaz de usuario de Chakra?
Chakra UI es un conjunto de herramientas de componentes que ayuda a los desarrolladores a crear rápidamente componentes de interfaz de usuario accesibles y reutilizables para sus aplicaciones web. Está construido sobre React y utiliza el sistema de estilo para su motor temático.
El objetivo de Chakra UI es facilitar a los programadores la creación de interfaces de usuario atractivas, receptivas y accesibles con un mínimo esfuerzo. El kit de herramientas incluye una amplia variedad de componentes listos para usar que están diseñados para ser fácilmente componibles y extensibles.
Chakra UI es de código abierto y su desarrollo está patrocinado por Segment.
Cómo instalar la interfaz de usuario de Chakra
Deberá escribir los siguientes comandos para incorporar Chakra en su proyecto:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Debe configurar ChakraProvider en la raíz de su aplicación después de instalar Chakra UI. Según el marco que use, esto puede estar en su archivo index.jsx, index.tsx o app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Técnicas Avanzadas en Chakra UI
Generación de SVG en tiempo real
Es posible que desee actualizar dinámicamente sus SVG para reflejar el diseño actual mientras establece nuevos temas para su sitio web. Esto requiere la creación de distintos SVG para cada uno de los varios temas.
Chakra UI, por otro lado, es una opción más fácil de usar. Utilizando el useColorMode
hook en Chakra UI, podemos alterar dinámicamente el color de relleno de nuestros SVG.
UseColorMode solo se puede usar una vez que se implementa el modo oscuro. ¿Usas el modo oscuro con Chakra UI por primera vez? Este artículo le mostrará cómo hacer que funcione correctamente.
El useColorMode
La opción está disponible después de habilitar el modo oscuro.
import { LightBulb, Moon, Sun, Vercel } from "../svgs";
import { Box, Button, Center, Stack, useColorMode } from "@chakra-ui/react";
export default function SVG() {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Center>
<Box>
<Center>
<Button onClick={toggleColorMode}>
Switch to {colorMode === "light" ? "Dark" : "Light"}
</Button>
</Center>
<Stack direction={["column", "row"]} spacing="24px" mt={14}>
<LightBulb colorMode={colorMode} />
<Moon colorMode={colorMode} />
<Sun colorMode={colorMode} />
<Vercel colorMode={colorMode} />
</Stack>
</Box>
</Center>
);
}
El código anterior integra el useColorMode
gancho y SVG para hacerlos dinámicos. Usando useColorMode
podemos recuperar y alterar el modo de color. Si desea cambiar de color, debe utilizar colorMode
o de toggleColor
Función de modo.
Temas de chakras
Los temas de Chakra UI se aplican usando el Especificación del tema del sistema con estilo técnica. Los temas en Chakra pueden afectar una variedad de aspectos que van desde la paleta de colores hasta el espaciado.
Solo tendrá que importar el extendTheme
función mientras agrega las teclas para modificar tokens en el preajuste. Echemos un vistazo a esto.
Solo necesitas crear un Theme.js
archivo para empezar.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Agrega dos colores más al objeto del tema para hacerlo más vibrante y atractivo. De acuerdo con las especificaciones del software, puede crear marcadores de estilo para tipos de letra, puntos de interrupción, tamaños de fuente, anchos de columna y más.
Para aprovechar las funciones avanzadas recientemente introducidas en este objeto de tema, primero debe instalar ChakraProvider
en la raíz de la aplicación.
import { ChakraProvider } from "@chakra-ui/react";
import theme from "theme";
import Nav from "Nav";
function MyApp({ Component, pageProps, router }) {
return (
<ChakraProvider theme={theme}>
<Nav />
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;
Después de eso, diriges ChakraProvider
para usar el objeto de tema que creó antes. Todos los componentes de Chakra ahora pueden usar colores de marca.
Es posible que algunos proyectos solo necesiten modificar el estilo de los componentes básicos de Chakra en lugar de requerir una modificación de estilo de alguna manera.
Como ejemplo del objeto de estilo de componente, aquí está:
const ComponentStyle = {
// style object for base or default style
baseStyle: {},
// styles for different sizes ("sm", "md", "lg")
sizes: {},
// styles for different visual variants ("outline", "solid")
variants: {},
// default values for `size` and `variant`
defaultProps: {
size: "",
variant: "",
},
}
Ahora, simplemente modificaremos el Button
y Heading
partes.
const overrides = {
components: {
Button: {
baseStyle: {
borderRadius: "none",
},
sizes: {
small: {
px: 5,
h: "50px",
fontSize: "20px",
},
medium: {
px: 7,
h: "60px",
fontSize: "25px",
},
large: {
px: 8,
h: "70px",
fontSize: "30px",
borderRadius: "10px",
},
},
variants: {
primary: {
bg: "primary",
color: "#fff",
},
secondary: {
bg: "secondary",
color: "#fff",
},
ghost: {
bg: "transparent",
border: "1px solid red",
},
primaryGhost: {
bg: "transparent",
border: "1px solid",
borderColor: "primary",
},
secondaryGhost: {
bg: "transparent",
border: "1px solid",
borderColor: "secondary",
_hover: {
color: "#fff",
bg: "#BB1415",
},
},
},
},
Heading: {
baseStyle: {
fontFamily: "Inter",
fontWeight: "600",
},
sizes: {
small: {
fontSize: "20px",
},
medium: { fontSize: "25px" },
large: { fontSize: "30px" },
},
},
},
};
const theme = extendTheme(overrides);
export default theme;
Podemos deshacernos del border-radius que se estableció por defecto para el Button
quitando su baseStyle
. Puede modificar el tamaño de la fuente y el diseño del tipo de letra para el Heading
. Usando los ejemplos anteriores, puede comprender cómo podemos alterar el estilo estándar de los componentes de Chakra.
Mejorar o alterar los estilos de los componentes de Chakra nos brinda visibilidad y control sobre la apariencia y el funcionamiento de nuestras interfaces de usuario.
Chakra y componentes de terceros
Chakra permite que los módulos de terceros se beneficien de su estilo. Como resultado, la combinación de elementos de terceros con la interfaz de usuario de Chakra requiere menos contenedores de componentes patentados.
La siguiente es una lista de los elementos HTML admitidos por la fábrica de Chakra:
import Image from "next/image";
import { Box, Center, chakra, HStack, VStack } from "@chakra-ui/react";
import woman from "../public/woman.jpg";
const ChakraNextImage = chakra(Image);
export default function factory() {
return (
<Center><HStack spacing={10}>
<Box width="400px" h="400px" position="relative">
<ChakraNextImage
src={woman}
alt="an img"
layout="fill"
objectFit="cover"
borderRadius="full"
/>
</Box>
</HStack>
</Center>
);
}
Integramos el Next.js Image
componente con Chakra UI en el fragmento de código anterior. Luego, configuramos un ChakraNextImage
componente, y a través de él, podemos pasar accesorios de estilo de Chakra a Image
.
Animaciones
Puede definir animaciones usando la interfaz de usuario de Chakra keyframes
ayudante. Keyframes
tome una definición de fotograma clave CSS y devuelva un objeto que puede usar en estilos:
import {
Box,
Button,
Center,
VStack,
keyframes,
} from "@chakra-ui/react";
import { LightBulb } from "svgs";
const spin = keyframes`
from {transform: rotate(0deg);}
to {transform: rotate(360deg)}
`;
export default function Transition() {
const spinAnimation = `${spin} infinite 2s linear`;
return (
<Center>
<VStack spacing={20}>
<Box animation={animation}>
<LightBulb />
</Box>
</VStack>
</Center>
);
}
Usando el keyframes
asistente, puede crear la animación que ve aquí. El accesorio de animación nos permite animar los componentes de la interfaz de usuario de Chakra.
Como último paso, pasar spinAnimation
en el componente Box para que se puedan agregar animaciones a las aplicaciones de la interfaz de usuario de Chakra.
Transiciones de página
Se pueden agregar transiciones de página a nuestras aplicaciones para mejorar la experiencia del usuario cuando se mueve entre páginas.
El siguiente es un ejemplo de cómo lograrlo con Chakra UI:
import { ChakraProvider, ScaleFade } from "@chakra-ui/react";
import theme from "theme";
import Nav from "Nav";
function MyApp({ Component, pageProps, router }) {
return (
<ChakraProvider theme={theme}>
<Nav />
<ScaleFade
key={router.route}
initialScale={0.9}
in="true"
>
<Component {...pageProps} />
</ScaleFade>
</ChakraProvider>
);
}
export default MyApp;
Para implementar transiciones de página, use los componentes de transición de Chakra UI. La transición ScaleFade se usa en la línea de código anterior.
Por favor notifique ScaleFade
sobre la ruta de su aplicación para que la transición pueda funcionar a medida que se mueve por la pantalla. El objeto proporciona datos sobre la ruta actual, que luego puede enviar a ScaleFade
El apoyo clave de . InitialScale
y en prop se utilizan para establecer la escala inicial de la transición y hacer que suceda cuando se renderiza el componente.
En este artículo, analizamos algunas de las características y capacidades que ofrece Chakra UI y cómo nos ayuda en nuestra experiencia perfecta. También hemos explorado cómo el establecimiento de objetos temáticos y el desarrollo de estilos globales pueden ayudar a mantener la escalabilidad de nuestro sistema.
Si aún no lo ha hecho, creemos que este artículo le ha dado algunas ideas para agilizar el proceso de desarrollo de la interfaz de usuario de Chakra.
Deje un comentario