Dezvoltatorii vor găsi că Chakra UI este partenerul lor cel mai util. Ca un set de instrumente component pentru serviciile online, Chakra UI facilitează construirea de aplicații inclusive cu eficiență.
Ca rezultat al accesibilității și conformității cu WAI-ARIA, elementele Chakra UI sunt ușor de personalizat și re-temat folosind API-ul său. Totuși, acesta este doar vârful aisbergului în ceea ce privește avantajele pe care le oferă dezvoltatorilor.
În această postare, vom arunca o privire mai atentă asupra unora dintre funcțiile mai avansate ale Chakra UI și asupra modului în care acestea vă pot ajuta să deveniți mai productiv ca programator.
Ce este Chakra UI?
Chakra UI este un set de instrumente pentru componente care ajută dezvoltatorii să construiască rapid componente de interfață utilizator accesibile și reutilizabile pentru aplicațiile lor web. Este construit pe React și folosește sistemul de stil pentru motorul său de tematică.
Scopul Chakra UI este de a facilita programatorilor să creeze interfețe de utilizator frumoase, receptive și accesibile cu un efort minim. Setul de instrumente include o mare varietate de componente gata de utilizare care sunt concepute pentru a fi ușor de compus și extensibil.
Chakra UI este open source, iar dezvoltarea sa este sponsorizată de Segment.
Cum se instalează Chakra UI
Va trebui să tastați următoarele comenzi pentru a încorpora Chakra în proiectul dvs.:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Trebuie să configurați ChakraProvider la rădăcina aplicației după instalarea Chakra UI. În funcție de cadrul pe care îl utilizați, acesta poate fi în fișierul dvs. index.jsx, index.tsx sau app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Tehnici avansate în Chakra UI
Generarea de SVG-uri în timp real
Este posibil să doriți să actualizați dinamic SVG-urile pentru a reflecta designul actual, în timp ce stabiliți noi teme pentru site-ul dvs. web. Acest lucru necesită crearea de SVG-uri distincte pentru fiecare dintre cele mai multe teme.
Chakra UI, pe de altă parte, este o opțiune mai ușor de utilizat. Folosind useColorMode
cârlig în Chakra UI, putem modifica dinamic culoarea de umplere a SVG-urilor noastre.
UseColorMode poate fi utilizat numai după implementarea modului întunecat. Utilizați modul întunecat cu Chakra UI pentru prima dată? Acest articol vă va arăta cum să-l faceți să funcționeze corect.
useColorMode
opțiunea este disponibilă după ce modul întunecat a fost activat.
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>
);
}
Codul de mai sus integrează useColorMode
cârlig și SVG pentru a le face dinamice. Folosind useColorMode
putem prelua și modifica modul de culoare. Dacă doriți să schimbați culorile, ar trebui să utilizați oricare colorMode
sau toggleColor
Funcția de mod.
Teme de chakre
Temele Chakra UI sunt aplicate folosind Specificația temei sistemului stilizat tehnică. Temele din Chakra pot afecta o varietate de aspecte, de la paleta de culori la spațiere.
Va trebui doar să importați extendTheme
funcția în timp ce adăugați cheile pentru modificarea jetoanelor din presetare. Să aruncăm o privire la asta.
Trebuie doar să creezi un Theme.js
fișier pentru a începe.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Adaugă încă două culori obiectului temă pentru a-l face mai vibrant și mai atrăgător. În conformitate cu specificațiile software, puteți crea marcatori de stil pentru fonturi, puncte de întrerupere, dimensiuni de font, lățimi de coloane și multe altele.
Pentru a profita de caracteristicile avansate recent introduse în acest obiect temă, trebuie mai întâi să instalați ChakraProvider
la rădăcina aplicației.
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;
După aceea, regi ChakraProvider
pentru a utiliza obiectul temă creat anterior. Toate componentele Chakra pot folosi acum culori de marcă.
Unele proiecte pot avea nevoie doar de modificarea stilului componentei de bază ale Chakrei, mai degrabă decât de a necesita o modificare a stilului în vreun fel.
Ca exemplu de obiect de stil component, iată-l:
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: "",
},
}
Acum, vom modifica doar Button
și Heading
părţi.
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;
Putem scăpa de raza de frontieră care a fost setată implicit pentru Button
prin eliminarea acestuia baseStyle
. Puteți modifica dimensiunea fontului și aspectul fontului pentru Heading
. Folosind exemplele de mai sus, puteți înțelege cum putem modifica stilul standard al componentelor Chakra.
Îmbunătățirea sau modificarea stilurilor componentelor Chakra ne oferă vizibilitate și control asupra aspectului și funcționării interfețelor noastre cu utilizatorul.
Chakra și componentele terțelor părți
Chakra permite modulelor terțe să beneficieze de stilul lor. Ca rezultat, combinarea elementelor terțe cu interfața de utilizare Chakra necesită mai puține wrapper-uri de componente proprietare.
Următoarea este o listă a elementelor HTML acceptate de fabrica 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>
);
}
Integram Next.js Image
componentă cu Chakra UI în fragmentul de cod de mai sus. Apoi, am înființat un ChakraNextImage
componentă, și prin ea, putem transmite recuzita stilului Chakrei Image
.
Animații
Puteți defini animații folosind interfața de utilizare Chakra keyframes
ajutor. Keyframes
luați o definiție de cadru cheie CSS și returnați un obiect pe care îl puteți utiliza în stiluri:
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>
);
}
Utilizarea keyframes
asistent, puteți crea animația pe care o vedeți aici. Elementul de recuzită de animație ne permite să animam componentele Chakra UI.
Ca ultim pas, trece spinAnimation
în componenta Box, astfel încât animațiile să poată fi adăugate la aplicațiile Chakra UI.
Tranziții de pagină
Tranzițiile de pagină pot fi adăugate în aplicațiile noastre pentru a îmbunătăți experiența utilizatorului atunci când se deplasează între pagini.
Următorul este un exemplu despre cum se poate realiza cu 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;
Pentru a implementa tranzițiile de pagină, utilizați componentele de tranziție din Chakra UI. Tranziția ScaleFade este utilizată în linia de cod de mai sus.
Vă rugăm să anunțați ScaleFade
despre calea aplicației dvs., astfel încât tranziția să poată funcționa pe măsură ce vă deplasați pe ecran! Obiectul oferă date despre calea curentă, pe care apoi le puteți trimite ScaleFade
cheia prop. InitialScale
și în prop sunt folosite pentru a stabili scara de pornire a tranziției și pentru a face ca aceasta să se întâmple atunci când componenta este redată.
În această piesă, am analizat câteva dintre caracteristicile și capacitățile pe care Chakra UI le oferă și modul în care ne ajută în experiența noastră perfectă. De asemenea, am explorat modul în care stabilirea obiectelor tematice și dezvoltarea stilurilor globale ar putea ajuta la menținerea scalabilității sistemului nostru.
Dacă nu ați făcut-o deja, credem că acest articol v-a oferit câteva idei pentru a vă simplifica procesul de dezvoltare Chakra UI.
Lasă un comentariu