Os desenvolvedores atoparán que Chakra UI é o seu socio máis útil. Como conxunto de ferramentas de compoñentes para servizos en liña, Chakra UI facilita a construción de aplicacións inclusivas con eficiencia.
Como resultado da súa accesibilidade e do cumprimento de WAI-ARIA, os elementos da IU de Chakra son sinxelos de personalizar e re-temáticas usando a súa API. Non obstante, esta é só a punta do iceberg en canto ás vantaxes que ofrece aos desenvolvedores.
Nesta publicación, analizaremos con máis detalle algunhas das funcións máis avanzadas da IU de Chakra e como poden axudarche a ser máis produtivo como programador.
Que é Chakra UI?
Chakra UI é un conxunto de ferramentas de compoñentes que axuda aos desenvolvedores a construír rapidamente compoñentes de interface de usuario accesibles e reutilizables para as súas aplicacións web. Está construído sobre React e usa o sistema de estilo para o seu motor de temática.
O obxectivo de Chakra UI é facilitar aos programadores a creación de interfaces de usuario fermosas, sensibles e accesibles cun mínimo esforzo. O conxunto de ferramentas inclúe unha gran variedade de compoñentes listos para o seu uso que están deseñados para ser facilmente compoñebles e extensibles.
Chakra UI é de código aberto e o seu desenvolvemento está patrocinado por Segment.
Como instalar Chakra UI
Terás que escribir os seguintes comandos para incorporar Chakra no teu proxecto:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Debes configurar o ChakraProvider na raíz da túa aplicación despois de instalar Chakra UI. Dependendo do cadro que utilices, pode estar no teu ficheiro index.jsx, index.tsx ou 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
Xeración de SVG en tempo real
Quizais queiras actualizar dinámicamente os teus SVG para reflectir o deseño actual mentres estableces novos temas para o teu sitio web. Isto require a creación de SVG distintos para cada un dos varios temas.
Chakra UI, por outra banda, é unha opción máis fácil de usar. Usando o useColorMode
gancho na IU de Chakra, podemos modificar dinámicamente a cor de recheo dos nosos SVG.
UseColorMode só se pode usar unha vez que se implemente o modo escuro. Usas o modo escuro coa interface de usuario de Chakra por primeira vez? Este artigo amosarache como facelo funcionar correctamente.
o useColorMode
a opción está dispoñible despois de activar o modo escuro.
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>
);
}
O código anterior integra o useColorMode
gancho e SVG para facelos dinámicos. Usando useColorMode
podemos recuperar e modificar o modo de cor. Se queres cambiar de cores, debes usar calquera das dúas colorMode
ou o toggleColor
Función de modo.
Temas de chakra
Os temas da interface de usuario de Chakra aplícanse mediante o Especificación do tema do sistema de estilo técnica. Os temas en Chakra poden afectar unha variedade de aspectos que van desde a paleta de cores ata o espazamento.
Só terás que importar o extendTheme
función mentres engade as claves para modificar fichas no preset. Imos botarlle unha ollada a isto.
Só tes que crear un Theme.js
ficheiro para comezar.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Engade dúas cores máis ao obxecto do tema para facelo máis vibrante e atractivo. Segundo as especificacións do software, pode crear marcadores de estilo para tipos de letra, puntos de interrupción, tamaños de fonte, ancho de columna e moito máis.
Para aproveitar as funcións avanzadas recentemente introducidas neste obxecto tema, primeiro debes instalar ChakraProvider
na raíz da 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;
Despois diso, dirixe ChakraProvider
para usar o obxecto do tema que creou antes. Agora todos os compoñentes de Chakra poden usar cores de marca.
Algúns proxectos poden necesitar só alterar o estilo dos compoñentes básicos de Chakra en lugar de requirir unha modificación de estilo de ningún xeito.
Como exemplo do obxecto de estilo compoñente, 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: "",
},
}
Agora, só modificaremos o Button
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 desfacernos do radio de bordo que se estableceu por defecto para o Button
eliminando o seu baseStyle
. Podes modificar o tamaño do tipo de letra e o deseño do tipo de letra Heading
. Usando os exemplos anteriores, pode entender como podemos alterar o estilo estándar dos compoñentes de Chakra.
Mellorar ou alterar os estilos dos compoñentes de Chakra ofrécenos visibilidade e control sobre a aparencia e o funcionamento das nosas interfaces de usuario.
Chakra e compoñentes de terceiros
Chakra permite que os módulos de terceiros se beneficien do seu estilo. Como resultado, a combinación de elementos de terceiros con Chakra UI require menos envoltorios de compoñentes propietarios.
A seguinte é unha lista dos elementos HTML admitidos pola fábrica 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 o Next.js Image
compoñente con Chakra UI no fragmento de código anterior. Despois, configuramos un ChakraNextImage
compoñente e, a través del, podemos pasarlle os accesorios de estilo de Chakra Image
.
Entretemento
Podes definir animacións usando Chakra UI keyframes
axudante. Keyframes
toma unha definición de fotograma clave CSS e devolve un obxecto que podes usar nos 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 o keyframes
asistente, podes crear a animación que ves aquí. O accesorio de animación permítenos animar os compoñentes da interface de usuario de Chakra.
Como último paso, pasa spinAnimation
no compoñente Box para que se poidan engadir animacións ás aplicacións da IU de Chakra.
Transicións de páxina
As transicións de páxina pódense engadir ás nosas aplicacións para mellorar a experiencia do usuario cando se move entre páxinas.
O seguinte é un exemplo de como conseguilo coa interface de usuario de Chakra:
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 transicións de páxina, use os compoñentes de transición da IU de Chakra. A transición ScaleFade úsase na liña de código anterior.
Aviso ScaleFade
sobre o camiño da súa aplicación para que a transición poida funcionar mentres se move pola pantalla! O obxecto fornece datos sobre a ruta actual, que logo pode enviar ScaleFade
a clave de acceso. InitialScale
e en prop utilízanse para establecer a escala de inicio da transición e para facelo acontecer cando se renderiza o compoñente.
Nesta peza, analizamos algunhas das funcións e capacidades que ofrece Chakra UI e como nos axuda na nosa experiencia perfecta. Tamén exploramos como o establecemento de obxectos temáticos e o desenvolvemento de estilos globais poden axudar a manter a escalabilidade do noso sistema.
Se aínda non o fixeches, cremos que este artigo deulle algunhas ideas para axilizar o proceso de desenvolvemento da IU de Chakra.
Deixe unha resposta