Kehittäjät pitävät Chakra-käyttöliittymää hyödyllisimpana kumppaninaan. Chakra UI on osa verkkopalveluiden työkalupakkia, jonka avulla on helppo rakentaa kattavat sovellukset tehokkaasti.
Helppokäyttöisyyden ja WAI-ARIA-yhteensopivuuden ansiosta Chakra UI:n elementtejä on helppo mukauttaa ja teemoja uudelleen sen API:n avulla. Tämä on kuitenkin vain jäävuoren huippu koskien sen kehittäjille tarjoamia etuja.
Tässä viestissä tarkastelemme tarkemmin joitain Chakra UI:n edistyneempiä ominaisuuksia ja kuinka ne voivat auttaa sinua tulemaan tuottavammaksi ohjelmoijana.
Mikä on Chakra UI?
Chakra UI on komponenttityökalupakki, jonka avulla kehittäjät voivat nopeasti rakentaa helppokäyttöisiä ja uudelleenkäytettäviä käyttöliittymäkomponentteja verkkosovelluksiinsa. Se on rakennettu Reactin päälle ja käyttää tyyliteltyä järjestelmää teemamoottorissaan.
Chakra UI:n tavoitteena on tehdä ohjelmoijille helppoa luoda kauniita, reagoivia ja helppokäyttöisiä käyttöliittymiä vähällä vaivalla. Työkalupakkaus sisältää laajan valikoiman käyttövalmiita komponentteja, jotka on suunniteltu helposti kootettaviksi ja laajennettaviksi.
Chakra UI on avoimen lähdekoodin, ja sen kehitystä sponsoroi Segment.
Kuinka asentaa Chakra UI
Sinun on kirjoitettava seuraavat komennot sisällyttääksesi Chakran projektiisi:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Sinun on määritettävä ChakraProvider sovelluksesi juuressa Chakra UI:n asentamisen jälkeen. Käyttämästäsi viitekehyksestä riippuen tämä voi olla index.jsx-, index.tsx- tai app.jsx-tiedostossasi.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Kehittyneet tekniikat Chakra-käyttöliittymässä
Reaaliaikaisten SVG-tiedostojen luominen
Voit halutessasi päivittää SVG-tiedostosi dynaamisesti vastaamaan nykyistä ulkoasua ja samalla luoda uusia teemoja verkkosivustollesi. Tämä edellyttää erillisten SVG-tiedostojen luomista kullekin usealle teemalle.
Chakra UI puolestaan on käyttäjäystävällisempi vaihtoehto. Käyttämällä useColorMode
Chakra-käyttöliittymän koukku, voimme muuttaa dynaamisesti SVG-tiedostojemme täyttöväriä.
UseColorModea voidaan käyttää vain, kun tumma tila on otettu käyttöön. Käytätkö tummaa tilaa Chakra-käyttöliittymän kanssa ensimmäistä kertaa? Tämä artikkeli näyttää, kuinka saat sen toimimaan oikein.
- useColorMode
vaihtoehto on käytettävissä, kun tumma tila on otettu käyttöön.
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>
);
}
Yllä oleva koodi integroi useColorMode
koukku ja SVG tekevät niistä dynaamisia. Käyttämällä useColorMode
voimme hakea ja muuttaa väritilaa. Jos haluat vaihtaa värejä, käytä jompaakumpaa colorMode
tai toggleColor
Mode-toiminto.
Chakra-teemat
Chakra-käyttöliittymän teemoja sovelletaan käyttämällä Tyylitelty järjestelmäteeman erittely tekniikka. Chakran teemat voivat vaikuttaa useisiin näkökohtiin väripaletista väliin.
Sinun tarvitsee vain tuoda extendTheme
toimintoa samalla kun lisäät avaimet esiasetuksen tunnuksien muokkaamiseen. Katsotaanpa tätä.
Sinun tarvitsee vain luoda a Theme.js
tiedosto aloittaaksesi.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Se lisää kaksi väriä teemaobjektiin tehdäkseen siitä elävämmän ja houkuttelevamman. Ohjelmiston määritysten mukaan voit luoda tyylimerkkejä kirjasintyylejä, keskeytyskohtia, kirjasinkokoja, sarakkeiden leveyksiä ja paljon muuta varten.
Jotta voit hyödyntää tämän teemaobjektin äskettäin käyttöön otettuja lisäominaisuuksia, sinun on ensin asennettava ChakraProvider
sovelluksen juuressa.
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;
Sen jälkeen ohjaat ChakraProvider
käyttääksesi aiemmin luomaasi teemaobjektia. Kaikki Chakra-komponentit voivat nyt käyttää merkkivärejä.
Jotkut projektit saattavat tarvita vain muuttaa Chakran peruskomponenttityyliä sen sijaan, että ne vaatisivat tyylimuutoksia millään tavalla.
Esimerkkinä komponenttityyliobjektista, tässä:
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: "",
},
}
Nyt muutamme vain Button
ja Heading
osia.
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;
Voimme päästä eroon raja-säteestä, joka oli oletusarvoisesti asetettu Button
poistamalla sen baseStyle
. Voit muuttaa fontin kokoa ja kirjasinasettelua Heading
. Yllä olevien esimerkkien avulla voit ymmärtää, kuinka voimme muuttaa chakrakomponenttien vakiomuotoilua.
Chakra-komponenttien tyylien parantaminen tai muuttaminen antaa meille näkyvyyden ja hallinnan käyttöliittymiemme ulkonäöstä ja toiminnasta.
Chakra ja kolmannen osapuolen komponentit
Chakra antaa kolmannen osapuolen moduuleille mahdollisuuden hyötyä tyylistään. Tämän seurauksena kolmannen osapuolen elementtien yhdistäminen Chakra-käyttöliittymään vaatii vähemmän patentoituja komponenttikääreitä.
Seuraavassa on luettelo Chakra-tehtaan tukemista HTML-elementeistä:
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>
);
}
Integroimme Next.js:n Image
komponentti Chakra-käyttöliittymällä yllä olevassa koodinpätkässä. Sitten perustimme a ChakraNextImage
komponentti, ja sen kautta voimme välittää Chakran tyylirekvisiittaa Image
.
Animaatiot
Voit määrittää animaatioita Chakra-käyttöliittymän avulla keyframes
auttaja. Keyframes
ota CSS-avainkehysmääritelmä ja palauta objekti, jota voit käyttää tyyleissä:
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>
);
}
Käyttäen keyframes
avustaja, voit luoda animaation, jonka näet täällä. Animaatiotarvikkeen avulla voimme animoida Chakra UI -komponentteja.
Viimeisenä vaiheena ohita spinAnimation
Box-komponenttiin, jotta animaatioita voidaan lisätä Chakra-käyttöliittymäsovelluksiin.
Sivun siirtymät
Sivusiirtymiä voidaan lisätä sovelluksiimme parantaaksemme käyttäjäkokemusta heidän siirtyessään sivuilta toiselle.
Seuraavassa on esimerkki siitä, kuinka se saavutetaan Chakra UI:lla:
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;
Sivusiirtymien toteuttamiseksi käytä Chakra-käyttöliittymän siirtymäkomponentteja. ScaleFade-siirtymää käytetään yllä olevassa koodirivissä.
Ole hyvä ja ilmoita ScaleFade
sovelluksesi polusta, jotta siirtyminen voi toimia, kun liikut näytöllä! Objekti tarjoaa tietoja nykyisestä polusta, jonka voit sitten lähettää ScaleFade
avainprop. InitialScale
ja prop käytetään määrittämään siirtymän aloitusasteikko ja saamaan se tapahtumaan, kun komponentti renderöidään.
Tässä kappaleessa tarkastelimme muutamia Chakra UI:n tarjoamia ominaisuuksia ja ominaisuuksia ja kuinka se auttaa meitä täydellisessä kokemuksessamme. Olemme myös tutkineet, kuinka teemaobjektien luominen ja globaalien tyylien kehittäminen voisivat auttaa ylläpitämään järjestelmämme skaalautuvuutta.
Jos et ole vielä tehnyt, uskomme, että tämä artikkeli on antanut sinulle ideoita Chakra-käyttöliittymän kehitysprosessin virtaviivaistamiseen.
Jätä vastaus