Οι προγραμματιστές θα βρουν το Chakra UI ως τον πιο χρήσιμο συνεργάτη τους. Ως εργαλειοθήκη στοιχείων για διαδικτυακές υπηρεσίες, το Chakra UI διευκολύνει τη δημιουργία περιεκτικών εφαρμογών με αποτελεσματικότητα.
Ως αποτέλεσμα της προσβασιμότητας και της συμμόρφωσης με το WAI-ARIA, τα στοιχεία του Chakra UI είναι απλά να προσαρμόζονται και να επανατοποθετούνται στο θέμα χρησιμοποιώντας το API του. Ωστόσο, αυτή είναι μόνο η κορυφή του παγόβουνου σχετικά με τα πλεονεκτήματα που προσφέρει στους προγραμματιστές.
Σε αυτήν την ανάρτηση, θα ρίξουμε μια πιο προσεκτική ματιά σε μερικές από τις πιο προηγμένες δυνατότητες του Chakra UI και πώς μπορεί να σας βοηθήσουν να γίνετε πιο παραγωγικοί ως προγραμματιστής.
Τι είναι το Chakra UI;
Το Chakra UI είναι μια εργαλειοθήκη στοιχείων που βοηθά τους προγραμματιστές να δημιουργήσουν γρήγορα προσβάσιμα και επαναχρησιμοποιήσιμα στοιχεία διεπαφής χρήστη για τις εφαρμογές web τους. Είναι χτισμένο πάνω από το React και χρησιμοποιεί το στυλ του συστήματος για τη μηχανή θεματοποίησης του.
Ο στόχος του Chakra UI είναι να διευκολύνει τους προγραμματιστές να δημιουργούν όμορφες, ανταποκρινόμενες και προσβάσιμες διεπαφές χρήστη με ελάχιστη προσπάθεια. Η εργαλειοθήκη περιλαμβάνει μια μεγάλη ποικιλία από έτοιμα προς χρήση εξαρτήματα που έχουν σχεδιαστεί για να είναι εύκολα συνθέσιμα και επεκτάσιμα.
Το Chakra UI είναι ανοιχτού κώδικα και η ανάπτυξή του χρηματοδοτείται από το Segment.
Πώς να εγκαταστήσετε το Chakra UI
Θα πρέπει να πληκτρολογήσετε τις ακόλουθες εντολές για να ενσωματώσετε το Τσάκρα στο Έργο σας:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Πρέπει να διαμορφώσετε το ChakraProvider στη ρίζα της εφαρμογής σας μετά την εγκατάσταση του Chakra UI. Ανάλογα με το πλαίσιο που χρησιμοποιείτε, αυτό μπορεί να βρίσκεται στο αρχείο index.jsx, index.tsx ή app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Προηγμένες τεχνικές στη διεπαφή χρήστη Chakra
Δημιουργία SVG σε πραγματικό χρόνο
Μπορεί να θέλετε να ενημερώσετε δυναμικά τα SVG σας ώστε να αντικατοπτρίζουν την τρέχουσα σχεδίαση, ενώ δημιουργείτε νέα θέματα για τον ιστότοπό σας. Αυτό απαιτεί τη δημιουργία ξεχωριστών SVG για καθένα από τα διάφορα θέματα.
Το Chakra UI, από την άλλη πλευρά, είναι μια πιο φιλική προς το χρήστη επιλογή. Χρησιμοποιώντας το useColorMode
αγκίστρια στο Chakra UI, μπορούμε να αλλάξουμε δυναμικά το χρώμα πλήρωσης των SVG μας.
Το UseColorMode μπορεί να χρησιμοποιηθεί μόνο όταν εφαρμοστεί η σκοτεινή λειτουργία. Χρησιμοποιείτε τη σκοτεινή λειτουργία με το Chakra UI για πρώτη φορά; Αυτό το άρθρο θα σας δείξει πώς να το κάνετε να λειτουργεί σωστά.
Η useColorMode
Η επιλογή είναι διαθέσιμη μετά την ενεργοποίηση της σκοτεινής λειτουργίας.
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>
);
}
Ο παραπάνω κώδικας ενσωματώνει το useColorMode
γάντζο και SVG για να γίνουν δυναμικά. Χρησιμοποιώντας useColorMode
μπορούμε να ανακτήσουμε και να αλλάξουμε τη λειτουργία χρώματος. Εάν θέλετε να αλλάξετε χρώματα, θα πρέπει να χρησιμοποιήσετε ένα από τα δύο colorMode
ή η toggleColor
Λειτουργία λειτουργίας.
Θέματα Τσάκρα
Τα θέματα του Chakra UI εφαρμόζονται χρησιμοποιώντας το Προδιαγραφή θέματος συστήματος με στυλ τεχνική. Τα θέματα στο Τσάκρα μπορούν να επηρεάσουν μια ποικιλία πτυχών που κυμαίνονται από την παλέτα χρωμάτων μέχρι την απόσταση.
Θα χρειαστεί απλώς να εισαγάγετε το extendTheme
λειτουργούν ενώ προσθέτετε τα πλήκτρα για την τροποποίηση των διακριτικών στην προεπιλογή. Ας ρίξουμε μια ματιά σε αυτό.
Απλά πρέπει να δημιουργήσετε ένα Theme.js
αρχείο για να ξεκινήσετε.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Προσθέτει δύο ακόμη χρώματα στο αντικείμενο θέματος για να το κάνει πιο ζωντανό και ελκυστικό. Σύμφωνα με τις προδιαγραφές του λογισμικού, μπορείτε να δημιουργήσετε δείκτες στυλ για γραμματοσειρές, σημεία διακοπής, μεγέθη γραμματοσειρών, πλάτη στηλών και άλλα.
Για να επωφεληθείτε από τις νέες προηγμένες δυνατότητες σε αυτό το αντικείμενο θέματος, πρέπει πρώτα να το εγκαταστήσετε ChakraProvider
στη ρίζα της εφαρμογής.
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;
Μετά από αυτό, σκηνοθετείς ChakraProvider
για να χρησιμοποιήσετε το αντικείμενο θέματος που δημιουργήσατε πριν. Όλα τα συστατικά του Τσάκρα μπορούν πλέον να χρησιμοποιούν χρώματα επωνυμίας.
Ορισμένα έργα μπορεί απλώς να χρειάζονται αλλαγή του βασικού στιλ των στοιχείων του Τσάκρα αντί να απαιτείται τροποποίηση στυλ με οποιονδήποτε τρόπο.
Ως παράδειγμα του αντικειμένου στυλ στοιχείου, εδώ είναι:
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: "",
},
}
Τώρα, απλώς θα τροποποιήσουμε το Button
και Heading
μέρη.
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;
Μπορούμε να απαλλαγούμε από την ακτίνα συνόρων που είχε οριστεί από προεπιλογή για το Button
με την αφαίρεσή του baseStyle
. Μπορείτε να αλλάξετε το μέγεθος γραμματοσειράς και τη διάταξη γραμματοσειράς για το Heading
. Χρησιμοποιώντας τα παραπάνω παραδείγματα, μπορείτε να καταλάβετε πώς μπορούμε να αλλάξουμε το τυπικό στυλ των στοιχείων του Τσάκρα.
Η βελτίωση ή η αλλαγή των στυλ των στοιχείων του Τσάκρα μας παρέχει ορατότητα και έλεγχο της εμφάνισης και της λειτουργίας των διεπαφών χρήστη μας.
Τσάκρα και εξαρτήματα τρίτων
Το τσάκρα επιτρέπει σε μονάδες τρίτων να επωφεληθούν από το στυλ τους. Ως αποτέλεσμα, ο συνδυασμός στοιχείων τρίτων με το Chakra UI απαιτεί λιγότερα ιδιόκτητα περιτυλίγματα στοιχείων.
Ακολουθεί μια λίστα με τα στοιχεία HTML που υποστηρίζονται από το εργοστάσιο των Τσάκρα:
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>
);
}
Ενσωματώνουμε το Next.js Image
στοιχείο με το Chakra UI στο παραπάνω απόσπασμα κώδικα. Στη συνέχεια, δημιουργήσαμε ένα ChakraNextImage
συστατικό, και μέσω αυτού, μπορούμε να περάσουμε τα στηρίγματα στυλ του Τσάκρα Image
.
κινούμενα σχέδια
Μπορείτε να ορίσετε κινούμενα σχέδια χρησιμοποιώντας το Chakra UI keyframes
βοηθός. Keyframes
λάβετε έναν ορισμό βασικού καρέ CSS και επιστρέψτε ένα αντικείμενο που μπορείτε να χρησιμοποιήσετε σε στυλ:
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>
);
}
Χρήση του keyframes
βοηθός, μπορείτε να δημιουργήσετε την κινούμενη εικόνα που βλέπετε εδώ. Το στήριγμα κινούμενων εικόνων μας επιτρέπει να κινούμε τα στοιχεία του Chakra UI.
Ως τελευταίο βήμα, περάστε spinAnimation
στο στοιχείο Box, ώστε να μπορούν να προστεθούν κινούμενα σχέδια στις εφαρμογές Chakra UI.
Μεταβάσεις σελίδας
Ενδέχεται να προστεθούν μεταβάσεις σελίδων στις εφαρμογές μας προκειμένου να βελτιωθεί η εμπειρία του χρήστη όταν μετακινείται μεταξύ σελίδων.
Το παρακάτω είναι ένα παράδειγμα για το πώς να το πετύχετε με το 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;
Για να εφαρμόσετε μεταβάσεις σελίδων, χρησιμοποιήστε τα στοιχεία μετάβασης από το Chakra UI. Η μετάβαση ScaleFade χρησιμοποιείται στην παραπάνω γραμμή κώδικα.
Παρακαλώ ειδοποιήστε ScaleFade
σχετικά με τη διαδρομή της εφαρμογής σας, έτσι ώστε η μετάβαση να μπορεί να λειτουργεί καθώς μετακινείστε στην οθόνη! Το αντικείμενο παρέχει δεδομένα σχετικά με την τρέχουσα διαδρομή, στην οποία μπορείτε στη συνέχεια να στείλετε ScaleFade
βασικό στήριγμα του. InitialScale
και in prop χρησιμοποιούνται για τον καθορισμό της αρχικής κλίμακας της μετάβασης και για να πραγματοποιηθεί κατά την απόδοση του στοιχείου.
Σε αυτό το κομμάτι, εξετάσαμε μερικές από τις δυνατότητες και τις δυνατότητες που προσφέρει το Chakra UI και πώς μας βοηθά στην τέλεια εμπειρία μας. Εξερευνήσαμε επίσης πώς η δημιουργία αντικειμένων θεμάτων και η ανάπτυξη καθολικών στυλ μπορεί να βοηθήσουν στη διατήρηση της επεκτασιμότητας του συστήματός μας.
Εάν δεν το έχετε κάνει ήδη, πιστεύουμε ότι αυτό το άρθρο σας έχει δώσει μερικές ιδέες για να βελτιώσετε τη διαδικασία ανάπτυξης της διεπαφής χρήστη Chakra.
Αφήστε μια απάντηση