Els desenvolupadors trobaran que Chakra UI és el seu soci més útil. Com a conjunt d'eines de components per als serveis en línia, la interfície d'usuari de Chakra facilita la construcció d'aplicacions inclusives amb eficàcia.
Com a resultat de la seva accessibilitat i el compliment de WAI-ARIA, els elements de la interfície d'usuari de Chakra són senzills de personalitzar i tornar a tema mitjançant la seva API. Tanmateix, aquesta és només la punta de l'iceberg pel que fa als avantatges que ofereix als desenvolupadors.
En aquesta publicació, veurem més de prop algunes de les funcions més avançades de la interfície d'usuari de Chakra i com us poden ajudar a ser més productiu com a programador.
Què és Chakra UI?
Chakra UI és un conjunt d'eines de components que ajuda els desenvolupadors a crear ràpidament components d'interfície d'usuari accessibles i reutilitzables per a les seves aplicacions web. Està construït a sobre de React i utilitza el sistema d'estil per al seu motor de temàtica.
L'objectiu de Chakra UI és facilitar als programadors la creació d'interfícies d'usuari boniques, sensibles i accessibles amb el mínim esforç. El conjunt d'eines inclou una gran varietat de components preparats per a utilitzar que estan dissenyats per ser fàcilment componibles i extensibles.
Chakra UI és de codi obert i el seu desenvolupament està patrocinat per Segment.
Com instal·lar Chakra UI
Haureu d'escriure les ordres següents per incorporar Chakra al vostre projecte:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Heu de configurar el ChakraProvider a l'arrel de la vostra aplicació després d'instal·lar Chakra UI. Depenent del marc que utilitzeu, pot estar al vostre fitxer 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ècniques avançades en la interfície d'usuari de Chakra
Generació de SVG en temps real
És possible que vulgueu actualitzar dinàmicament els vostres SVG per reflectir el disseny actual mentre establiu temes nous per al vostre lloc web. Això requereix la creació de diferents SVG per a cadascun dels diversos temes.
La interfície d'usuari de Chakra, d'altra banda, és una opció més fàcil d'utilitzar. Utilitzant el useColorMode
ganxo a la interfície d'usuari de Chakra, podem alterar dinàmicament el color d'ompliment dels nostres SVG.
UseColorMode només es pot utilitzar un cop implementat el mode fosc. Utilitzeu el mode fosc amb la interfície d'usuari de Chakra per primera vegada? Aquest article us mostrarà com fer que funcioni correctament.
El useColorMode
L'opció està disponible després d'haver activat el mode fosc.
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 codi anterior integra el useColorMode
ganxo i SVG per fer-los dinàmics. Utilitzant useColorMode
podem recuperar i modificar el mode de color. Si voleu canviar de color, hauríeu d'utilitzar qualsevol colorMode
o el toggleColor
Funció de mode.
Temes de Chakra
Els temes de la interfície d'usuari de Chakra s'apliquen mitjançant el Especificació del tema del sistema d'estil tècnica. Els temes de Chakra poden afectar una varietat d'aspectes que van des de la paleta de colors fins a l'espaiat.
Només hauràs d'importar el extendTheme
funció mentre s'afegeixen les claus per modificar fitxes al preajust. Fem una ullada a això.
Només has de crear un Theme.js
fitxer per començar.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Afegeix dos colors més a l'objecte temàtic per fer-lo més vibrant i atractiu. Segons les especificacions del programari, podeu crear marcadors d'estil per a tipus de lletra, punts d'interrupció, mides de lletra, amplades de columnes i molt més.
Per aprofitar les funcions avançades recentment introduïdes en aquest objecte tema, primer heu d'instal·lar-lo ChakraProvider
a l'arrel de l'aplicació.
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;
Després d'això, dirigeixes ChakraProvider
per utilitzar l'objecte tema que heu creat abans. Ara tots els components de Chakra poden utilitzar colors de marca.
Alguns projectes només necessiten alterar l'estil dels components bàsics de Chakra en lloc de requerir una modificació d'estil de cap manera.
Com a exemple de l'objecte d'estil component, 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: "",
},
}
Ara, només modificarem el Button
i Heading
parts.
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;
Podem desfer-nos del radi de la vora que es va establir per defecte per a Button
eliminant-ne baseStyle
. Podeu modificar la mida del tipus de lletra i la disposició del tipus de lletra Heading
. Utilitzant els exemples anteriors, podeu entendre com podem alterar l'estil estàndard dels components de Chakra.
Millorar o alterar els estils dels components de Chakra ens proporciona visibilitat i control sobre l'aparença i el funcionament de les nostres interfícies d'usuari.
Chakra i components de tercers
Chakra permet que els mòduls de tercers es beneficiïn del seu estil. Com a resultat, la combinació d'elements de tercers amb la interfície d'usuari de Chakra requereix menys embolcalls de components propietaris.
La següent és una llista dels elements HTML suportats per la 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>
);
}
Integrem el Next.js Image
component amb la interfície d'usuari de Chakra al fragment de codi anterior. Aleshores, vam configurar a ChakraNextImage
component, i a través d'ell, podem passar els accessoris d'estil de Chakra Image
.
animacions
Podeu definir animacions mitjançant la interfície d'usuari de Chakra keyframes
ajudant. Keyframes
agafeu una definició de fotograma clau CSS i retorneu un objecte que podeu utilitzar en estils:
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>
);
}
Utilitzant el keyframes
assistent, podeu crear l'animació que veieu aquí. El suport d'animació ens permet animar components de la interfície d'usuari de Chakra.
Com a darrer pas, passa spinAnimation
al component Box perquè es puguin afegir animacions a les aplicacions d'IU de Chakra.
Transicions de pàgina
Es poden afegir transicions de pàgina a les nostres aplicacions per tal de millorar l'experiència de l'usuari quan es mou entre les pàgines.
El següent és un exemple de com aconseguir-ho amb 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;
Per implementar transicions de pàgina, utilitzeu els components de transició de la interfície d'usuari de Chakra. La transició ScaleFade s'utilitza a la línia de codi anterior.
Si us plau notifiqueu-ho ScaleFade
sobre el camí de la vostra aplicació perquè la transició pugui funcionar mentre us moveu per la pantalla! L'objecte proporciona dades sobre el camí actual, que després podeu enviar ScaleFade
la clau de suport. InitialScale
i en prop s'utilitzen per establir l'escala inicial de la transició i per fer-la passar quan es representa el component.
En aquesta peça, vam analitzar algunes de les característiques i capacitats que ofereix Chakra UI i com ens ajuda en la nostra experiència perfecta. També hem explorat com l'establiment d'objectes temàtics i el desenvolupament d'estils globals poden ajudar a mantenir l'escalabilitat del nostre sistema.
Si encara no ho heu fet, creiem que aquest article us ha donat algunes idees per agilitzar el vostre procés de desenvolupament de la interfície d'usuari de Chakra.
Deixa un comentari