Gli sviluppatori troveranno Chakra UI come il loro partner più utile. Come toolkit componente per servizi online, Chakra UI semplifica la creazione di app inclusive con efficienza.
Come risultato della sua accessibilità e conformità a WAI-ARIA, gli elementi dell'interfaccia utente di Chakra sono semplici da personalizzare e riadattare a tema utilizzando la sua API. Tuttavia, questa è solo la punta dell'iceberg per quanto riguarda i vantaggi che offre agli sviluppatori.
In questo post, daremo un'occhiata più da vicino ad alcune delle funzionalità più avanzate dell'interfaccia utente di Chakra e come possono aiutarti a diventare più produttivo come programmatore.
Cos'è l'interfaccia utente di Chakra?
Chakra UI è un toolkit per componenti che aiuta gli sviluppatori a creare rapidamente componenti dell'interfaccia utente accessibili e riutilizzabili per le loro applicazioni web. È costruito su React e utilizza il sistema in stile per il suo motore di temi.
L'obiettivo dell'interfaccia utente di Chakra è rendere facile per i programmatori creare interfacce utente belle, reattive e accessibili con il minimo sforzo. Il toolkit include un'ampia varietà di componenti pronti per l'uso progettati per essere facilmente componibili ed estensibili.
Chakra UI è open source e il suo sviluppo è sponsorizzato da Segment.
Come installare l'interfaccia utente di Chakra
Dovrai digitare i seguenti comandi per incorporare Chakra nel tuo progetto:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
È necessario configurare ChakraProvider nella radice dell'applicazione dopo aver installato l'interfaccia utente di Chakra. A seconda del framework che usi, questo potrebbe trovarsi nel tuo file index.jsx, index.tsx o app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Tecniche avanzate nell'interfaccia utente di Chakra
Generazione di SVG in tempo reale
Potresti voler aggiornare dinamicamente i tuoi SVG per riflettere il design attuale mentre stabilisci nuovi temi per il tuo sito web. Ciò richiede la creazione di SVG distinti per ciascuno dei vari temi.
Chakra UI, d'altra parte, è un'opzione più user-friendly. Usando il useColorMode
hook nell'interfaccia utente di Chakra, possiamo modificare dinamicamente il colore di riempimento dei nostri SVG.
UseColorMode può essere utilizzato solo una volta implementata la modalità oscura. Usare per la prima volta la modalità oscura con l'interfaccia utente di Chakra? Questo articolo ti mostrerà come farlo funzionare correttamente.
I useColorMode
l'opzione è disponibile dopo che la modalità oscura è stata abilitata.
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>
);
}
Il codice di cui sopra integra il useColorMode
hook e SVG per renderli dinamici. Usando useColorMode
possiamo recuperare e modificare la modalità colore. Se vuoi cambiare colore, dovresti usare entrambi colorMode
oppure toggleColor
Funzione modalità.
Temi Chakra
I temi dell'interfaccia utente di Chakra vengono applicati utilizzando il file Specifica del tema del sistema in stile tecnica. I temi in Chakra possono influire su una varietà di aspetti che vanno dalla tavolozza dei colori alla spaziatura.
Dovrai solo importare il file extendTheme
funzione aggiungendo i tasti per modificare i token nel preset. Diamo un'occhiata a questo.
Hai solo bisogno di creare un Theme.js
file per iniziare.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Aggiunge altri due colori all'oggetto tema per renderlo più vivace e accattivante. In base alle specifiche del software, puoi creare marcatori di stile per caratteri tipografici, punti di interruzione, dimensioni dei caratteri, larghezze delle colonne e altro.
Per sfruttare le funzionalità avanzate di recente introduzione in questo oggetto tema, devi prima installare ChakraProvider
alla radice dell'applicazione.
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;
Dopodiché, dirigi ChakraProvider
per utilizzare l'oggetto tema creato in precedenza. Tutti i componenti Chakra ora possono utilizzare i colori del marchio.
Alcuni progetti potrebbero semplicemente aver bisogno di modificare lo stile dei componenti di base di Chakra piuttosto che richiedere una modifica dello stile in alcun modo.
Come esempio dell'oggetto stile componente, eccolo qui:
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: "",
},
}
Ora, modificheremo semplicemente il Button
ed Heading
parti.
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;
Possiamo sbarazzarci del raggio di confine che è stato impostato di default per il Button
rimuovendo il suo baseStyle
. È possibile modificare la dimensione del carattere e il layout del carattere per il Heading
. Usando gli esempi sopra, puoi capire come possiamo alterare lo stile standard dei componenti Chakra.
Migliorare o alterare gli stili dei componenti Chakra ci fornisce visibilità e controllo sull'aspetto e sul funzionamento delle nostre interfacce utente.
Chakra e componenti di terze parti
Chakra consente ai moduli di terze parti di beneficiare del loro stile. Di conseguenza, la combinazione di elementi di terze parti con l'interfaccia utente di Chakra richiede un minor numero di wrapper di componenti proprietari.
Quello che segue è un elenco degli elementi HTML supportati dalla Chakra factory:
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>
);
}
Integriamo il Next.js Image
componente con l'interfaccia utente di Chakra nello snippet di codice sopra. Quindi, abbiamo impostato a ChakraNextImage
componente, e attraverso di esso, possiamo passare gli oggetti di scena dello stile di Chakra Image
.
animazioni
Puoi definire le animazioni usando l'interfaccia utente di Chakra keyframes
aiutante. Keyframes
prendi una definizione di fotogramma chiave CSS e restituisci un oggetto che puoi usare negli stili:
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 il keyframes
assistente, puoi creare l'animazione che vedi qui. Il prop di animazione ci consente di animare i componenti dell'interfaccia utente di Chakra.
Come ultimo passaggio, passa spinAnimation
nel componente Box in modo che le animazioni possano essere aggiunte alle app dell'interfaccia utente di Chakra.
Transizioni di pagina
Le transizioni di pagina possono essere aggiunte alle nostre app per migliorare l'esperienza dell'utente quando si sposta tra le pagine.
Quello che segue è un esempio di come ottenerlo con l'interfaccia utente di 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;
Per implementare le transizioni di pagina, usa i componenti di transizione dall'interfaccia utente di Chakra. La transizione ScaleFade viene utilizzata nella riga di codice precedente.
Si prega di avvisare ScaleFade
sul percorso della tua applicazione in modo che la transizione possa funzionare mentre ti muovi attraverso lo schermo! L'oggetto fornisce dati sul percorso corrente, a cui è quindi possibile inviare ScaleFade
's chiave prop. InitialScale
e in prop sono usati per stabilire la scala iniziale della transizione e per realizzarla quando il componente viene renderizzato.
In questo pezzo, abbiamo esaminato alcune delle caratteristiche e delle capacità offerte dall'interfaccia utente di Chakra e come ci aiuta nella nostra esperienza perfetta. Abbiamo anche esplorato come la creazione di oggetti tematici e lo sviluppo di stili globali potrebbero aiutare a mantenere la scalabilità del nostro sistema.
Se non l'hai già fatto, crediamo che questo articolo ti abbia dato alcune idee per semplificare il processo di sviluppo dell'interfaccia utente di Chakra.
Lascia un Commento