Hahanapin ng mga developer ang Chakra UI bilang kanilang pinakakapaki-pakinabang na kasosyo. Bilang isang component toolkit para sa mga online na serbisyo, ginagawang madali ng Chakra UI na bumuo ng mga inclusive na app nang may kahusayan.
Bilang resulta ng pagiging naa-access nito at pagsunod sa WAI-ARIA, ang mga elemento ng Chakra UI ay simpleng i-customize at muling i-theme gamit ang API nito. Gayunpaman, ito lamang ang dulo ng malaking bato ng yelo patungkol sa mga pakinabang na inaalok nito sa mga developer.
Sa post na ito, susuriin namin ang ilan sa mga mas advanced na feature ng Chakra UI at kung paano sila makakatulong sa iyong maging mas produktibo bilang isang programmer.
Ano ang Chakra UI?
Ang Chakra UI ay isang component toolkit na tumutulong sa mga developer na mabilis na bumuo ng naa-access at magagamit muli na mga bahagi ng user interface para sa kanilang mga web application. Ito ay binuo sa ibabaw ng React at ginagamit ang naka-istilong sistema para sa theming engine nito.
Ang layunin ng Chakra UI ay gawing madali para sa mga programmer na lumikha ng maganda, tumutugon, at naa-access na mga interface ng gumagamit na may kaunting pagsisikap. Kasama sa toolkit ang isang malawak na iba't ibang mga bahaging handa nang gamitin na idinisenyo upang madaling mabuo at mapalawak.
Ang Chakra UI ay open source, at ang pagbuo nito ay inisponsor ng Segment.
Paano Mag-install ng Chakra UI
Kakailanganin mong i-type ang sumusunod na mga utos upang maisama ang Chakra sa Iyong Proyekto:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Dapat mong i-configure ang ChakraProvider sa ugat ng iyong application pagkatapos i-install ang Chakra UI. Depende sa framework na iyong ginagamit, ito ay maaaring nasa iyong index.jsx, index.tsx, o app.jsx file.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Mga Advanced na Teknik sa Chakra UI
Bumubuo ng mga Real-time na SVG
Maaaring naisin mong dynamic na i-update ang iyong mga SVG upang ipakita ang kasalukuyang disenyo habang nagtatatag ng mga bagong tema para sa iyong website. Ito ay nangangailangan ng paglikha ng mga natatanging SVG para sa bawat isa sa ilang mga tema.
Ang Chakra UI, sa kabilang banda, ay isang mas madaling gamitin na opsyon. Gamit ang useColorMode
hook sa Chakra UI, maaari naming dynamic na baguhin ang fill color ng aming mga SVG.
Magagamit lang ang UseColorMode kapag naipatupad na ang dark mode. Gumagamit ng dark mode sa Chakra UI sa unang pagkakataon? Ipapakita sa iyo ng artikulong ito kung paano ito gagana nang maayos.
Ang useColorMode
ang opsyon ay magagamit pagkatapos ma-enable ang dark mode.
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>
);
}
Ang code sa itaas ay isinasama ang useColorMode
hook at SVG para gawing dynamic ang mga ito. Gamit useColorMode
maaari naming kunin at baguhin ang mode ng kulay. Kung gusto mong magpalit ng kulay, dapat mong gamitin ang alinman colorMode
o ang toggleColor
Pag-andar ng mode.
Mga Tema ng Chakra
Ang mga tema ng Chakra UI ay inilalapat gamit ang Detalye ng Tema ng Styled System pamamaraan. Ang mga tema sa Chakra ay maaaring makaapekto sa iba't ibang aspeto mula sa color paletter hanggang sa spacing.
Kakailanganin mo lamang na i-import ang extendTheme
function habang idinaragdag ang mga key upang baguhin ang mga token sa preset. Tingnan natin ito.
Kailangan mo lamang lumikha ng isang Theme.js
file para makapagsimula.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Nagdaragdag ito ng dalawa pang kulay sa object ng tema upang gawin itong mas masigla at kaakit-akit. Ayon sa mga detalye ng software, maaari kang lumikha ng mga style marker para sa mga typeface, breakpoint, laki ng font, lapad ng column, at higit pa.
Upang mapakinabangan ang mga bagong ipinakilala na advanced na tampok sa object na ito ng tema, kailangan mo munang i-install ChakraProvider
sa ugat ng aplikasyon.
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;
Pagkatapos nito, idirekta mo ChakraProvider
para gamitin ang theme object na ginawa mo dati. Ang lahat ng mga bahagi ng Chakra ay maaari na ngayong gumamit ng mga kulay ng tatak.
Ang ilang mga proyekto ay maaaring kailangan lang baguhin ang pangunahing bahagi ng estilo ng Chakra sa halip na nangangailangan ng pagbabago ng estilo sa anumang paraan.
Bilang isang halimbawa ng object style na sangkap, narito ito:
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: "",
},
}
Ngayon, babaguhin lang natin ang Button
at Heading
bahagi.
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;
Maaalis natin ang border-radius na itinakda bilang default para sa Button
sa pamamagitan ng pagtanggal nito baseStyle
. Maaari mong baguhin ang laki ng font at layout ng typeface para sa Heading
. Gamit ang mga halimbawa sa itaas, mauunawaan mo kung paano namin mababago ang karaniwang pag-istilo ng mga bahagi ng Chakra.
Ang pagpapahusay o pagbabago sa mga istilo ng mga bahagi ng Chakra ay nagbibigay sa amin ng visibility at kontrol sa hitsura at paggana ng aming mga user interface.
Chakra at Mga Bahagi ng Third-Party
Pinapayagan ng Chakra ang mga module ng third-party na makinabang mula sa kanilang istilo. Bilang resulta, ang pagsasama-sama ng mga elemento ng third-party sa Chakra UI ay nangangailangan ng mas kaunting proprietary component wrapper.
Ang sumusunod ay isang listahan ng mga elemento ng HTML na sinusuportahan ng pabrika ng 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>
);
}
Isinasama namin ang Next.js Image
component na may Chakra UI sa snippet ng code sa itaas. Pagkatapos, nag-set up kami ng ChakraNextImage
component, at sa pamamagitan nito, maipapasa natin ang mga style props ng Chakra Image
.
Animasyon
Maaari mong tukuyin ang mga animation gamit ang Chakra UI's keyframes
katulong. Keyframes
kumuha ng kahulugan ng CSS keyframe at ibalik ang isang bagay na magagamit mo sa mga istilo:
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>
);
}
Paggamit ng keyframes
assistant, maaari kang lumikha ng animation na nakikita mo dito. Nagbibigay-daan sa amin ang animation prop na i-animate ang mga bahagi ng Chakra UI.
Bilang huling hakbang, ipasa spinAnimation
sa bahagi ng Box para maidagdag ang mga animation sa mga Chakra UI app.
Mga Paglipat ng Pahina
Maaaring maidagdag ang mga transition ng page sa aming mga app upang mapahusay ang karanasan ng user kapag lumipat sila sa pagitan ng mga page.
Ang sumusunod ay isang halimbawa kung paano ito makamit gamit ang 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;
Upang maipatupad ang mga transition ng page, gamitin ang mga bahagi ng transition mula sa Chakra UI. Ang ScaleFade transition ay ginagamit sa itaas na linya ng code.
Mangyaring ipagbigay-alam ScaleFade
tungkol sa landas ng iyong application para gumana ang transition habang lumilipat ka sa screen! Ang object ay nagbibigay ng data tungkol sa kasalukuyang landas, na maaari mong ipadala sa ScaleFade
susi prop. InitialScale
at sa prop ay ginagamit upang itatag ang panimulang sukat ng paglipat at gawin itong mangyari kapag ang bahagi ay nai-render.
Sa bahaging ito, tiningnan namin ang ilan sa mga feature at kakayahan na inaalok ng Chakra UI at kung paano kami tinutulungan nito sa aming perpektong karanasan. Na-explore din namin kung paano makakatulong ang pagtatatag ng mga bagay na may tema at pagbuo ng mga pandaigdigang istilo sa pagpapanatili ng scalability ng aming system.
Kung hindi mo pa nagagawa, Naniniwala kami na ang artikulong ito ay nagbigay sa iyo ng ilang mga ideya upang i-streamline ang iyong proseso ng pagbuo ng Chakra UI.
Mag-iwan ng Sagot