Inhoudsopgave[Zich verstoppen][Laten zien]
Ontwikkelaars zullen Chakra UI als hun nuttigste partner ervaren. Als componenttoolkit voor online services maakt Chakra UI het gemakkelijk om inclusieve apps efficiënt te bouwen.
Als gevolg van de toegankelijkheid en WAI-ARIA-compliance, zijn de elementen van Chakra UI eenvoudig aan te passen en opnieuw te thematiseren met behulp van de API. Dit is echter slechts het topje van de ijsberg met betrekking tot de voordelen die het ontwikkelaars biedt.
In dit bericht zullen we enkele van de meer geavanceerde functies van Chakra UI nader bekijken en hoe ze u kunnen helpen productiever te worden als programmeur.
Wat is Chakra UI?
Chakra UI is een toolkit voor componenten waarmee ontwikkelaars snel toegankelijke en herbruikbare gebruikersinterfacecomponenten voor hun webapplicaties kunnen bouwen. Het is bovenop React gebouwd en gebruikt het gestileerde systeem voor zijn thema-engine.
Het doel van Chakra UI is om het voor programmeurs gemakkelijk te maken om met minimale inspanning mooie, responsieve en toegankelijke gebruikersinterfaces te maken. De toolkit bevat een breed scala aan kant-en-klare componenten die zijn ontworpen om gemakkelijk samen te stellen en uit te breiden.
Chakra UI is open source en de ontwikkeling ervan wordt gesponsord door Segment.
Hoe Chakra UI te installeren
U moet de volgende opdrachten typen om Chakra in uw project op te nemen:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
U moet de ChakraProvider configureren in de hoofdmap van uw applicatie na het installeren van Chakra UI. Afhankelijk van het framework dat u gebruikt, kan dit in uw index.jsx-, index.tsx- of app.jsx-bestand staan.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Geavanceerde technieken in Chakra UI
Realtime SVG's genereren
Misschien wilt u uw SVG's dynamisch bijwerken om het huidige ontwerp weer te geven, terwijl u nieuwe thema's voor uw website maakt. Dit vereist het maken van verschillende SVG's voor elk van de verschillende thema's.
Chakra UI is daarentegen een gebruiksvriendelijkere optie. De ... gebruiken useColorMode
hook in Chakra UI, kunnen we de vulkleur van onze SVG's dynamisch wijzigen.
UseColorMode kan alleen worden gebruikt als de donkere modus is geïmplementeerd. Voor het eerst de donkere modus met Chakra UI gebruiken? In dit artikel wordt uitgelegd hoe u het goed kunt laten werken.
De useColorMode
optie is beschikbaar nadat de donkere modus is ingeschakeld.
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>
);
}
De bovenstaande code integreert de useColorMode
hook en SVG om ze dynamisch te maken. Gebruik makend van useColorMode
we kunnen de kleurmodus ophalen en wijzigen. Als u van kleur wilt wisselen, moet u een van beide gebruiken: colorMode
of de toggleColor
Modus functie.
Chakra-thema's
De thema's van Chakra UI worden toegepast met behulp van de Gestileerde systeemthema-specificatie techniek. Thema's in Chakra kunnen van invloed zijn op verschillende aspecten, variërend van kleurenpaletten tot spatiëring.
U hoeft alleen de extendTheme
functie terwijl u de toetsen toevoegt om tokens in de voorinstelling te wijzigen. Laten we hier eens naar kijken.
Je hoeft alleen maar een te maken Theme.js
bestand om aan de slag te gaan.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Het voegt nog twee kleuren toe aan het thema-object om het levendiger en aantrekkelijker te maken. Volgens de softwarespecificaties kunt u stijlmarkeringen maken voor lettertypen, breekpunten, lettergroottes, kolombreedtes en meer.
Om te profiteren van de nieuw geïntroduceerde geavanceerde functies in dit thema-object, moet u eerst installeren ChakraProvider
in de root van de applicatie.
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;
Daarna regisseer je ChakraProvider
om het thema-object te gebruiken dat u eerder hebt gemaakt. Alle Chakra-componenten mogen nu merkkleuren gebruiken.
Bij sommige projecten is het misschien nodig om de styling van de basiscomponenten van Chakra te wijzigen in plaats van op welke manier dan ook een stijlaanpassing te vereisen.
Als voorbeeld van het componentstijlobject is dit het volgende:
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: "",
},
}
Nu zullen we alleen de Button
en Heading
delen.
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;
We kunnen de grensradius verwijderen die standaard was ingesteld voor de Button
door het verwijderen ervan baseStyle
. U kunt de lettergrootte en de lettertypelay-out wijzigen voor de Heading
. Met behulp van de bovenstaande voorbeelden kunt u begrijpen hoe we de standaardstijl van Chakra-componenten kunnen wijzigen.
Het verbeteren of wijzigen van de stijlen van Chakra-componenten geeft ons zichtbaarheid en controle over het uiterlijk en de werking van onze gebruikersinterfaces.
Chakra en componenten van derden
Met Chakra kunnen modules van derden profiteren van hun stijl. Als gevolg hiervan vereist het combineren van elementen van derden met Chakra UI minder eigen componentwrappers.
Het volgende is een lijst van de HTML-elementen die door de Chakra-fabriek worden ondersteund:
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>
);
}
We integreren de Next.js Image
component met Chakra UI in het bovenstaande codefragment. Dan zetten we een ChakraNextImage
component, en hierdoor kunnen we Chakra's stijlrekwisieten doorgeven aan: Image
.
Vermaak
U kunt animaties definiëren met behulp van Chakra UI's keyframes
helper. Keyframes
neem een CSS-sleutelframedefinitie in en retourneer een object dat u in stijlen kunt gebruiken:
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>
);
}
De keyframes
assistent, kunt u de animatie maken die u hier ziet. Met de animatie-prop kunnen we Chakra UI-componenten animeren.
Als laatste stap, pass spinAnimation
in de Box-component zodat animaties kunnen worden toegevoegd aan de Chakra UI-apps.
Pagina-overgangen
Paginaovergangen kunnen aan onze apps worden toegevoegd om de gebruikerservaring te verbeteren wanneer ze tussen pagina's bewegen.
Het volgende is een voorbeeld van hoe je dit kunt bereiken met 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;
Gebruik de overgangscomponenten van Chakra UI om paginaovergangen te implementeren. De ScaleFade-overgang wordt gebruikt in de bovenstaande regel code.
Geef alstublieft aan ScaleFade
over het pad van uw toepassing, zodat de overgang kan functioneren terwijl u over het scherm beweegt! Het object levert gegevens over het huidige pad, dat u vervolgens kunt verzenden naar ScaleFade
's belangrijkste steun. InitialScale
en in prop worden gebruikt om de startschaal van de overgang vast te stellen en om deze te laten gebeuren wanneer de component wordt weergegeven.
In dit stuk hebben we gekeken naar enkele van de functies en mogelijkheden die Chakra UI biedt en hoe het ons helpt bij onze perfecte ervaring. We hebben ook onderzocht hoe het opzetten van thema-objecten en het ontwikkelen van globale stijlen kunnen helpen bij het handhaven van de schaalbaarheid van ons systeem.
Als je dat nog niet hebt gedaan, denken we dat dit artikel je enkele ideeën heeft gegeven om je Chakra UI-ontwikkelingsproces te stroomlijnen.
Laat een reactie achter