Pangitaon sa mga developer ang Chakra UI nga ilang labing mapuslanon nga kauban. Ingon usa ka sangkap nga toolkit alang sa mga serbisyo sa online, gipasayon sa Chakra UI ang paghimo og mga inklusibo nga apps nga adunay kaarang.
Ingon usa ka sangputanan sa pagka-access niini ug pagsunod sa WAI-ARIA, ang mga elemento sa Chakra UI yano nga ipasadya ug gi-re-theme gamit ang API niini. Bisan pa, kini mao lamang ang tumoy sa iceberg bahin sa mga bentaha nga gitanyag niini sa mga developer.
Niini nga post, atong tan-awon pag-ayo ang pipila sa mga mas abante nga bahin sa Chakra UI ug sa unsang paagi kini makatabang kanimo nga mahimong mas produktibo isip usa ka programmer.
Unsa ang Chakra UI?
Ang Chakra UI usa ka component toolkit nga nagtabang sa mga developers nga dali nga makahimo og accessible ug magamit pag-usab nga mga component sa user interface para sa ilang mga web application. Gitukod kini sa ibabaw sa React ug gigamit ang gi-istilo nga sistema alang sa makina sa tema niini.
Ang tumong sa Chakra UI mao ang pagpasayon sa mga programmer sa paghimo og nindot, responsive, ug accessible nga user interface nga adunay gamay nga paningkamot. Ang toolkit naglakip sa usa ka halapad nga lainlain nga andam-gamiton nga mga sangkap nga gidisenyo aron dali nga ma-composable ug mapadako.
Ang Chakra UI bukas nga gigikanan, ug ang pag-uswag niini gi-sponsor sa Segment.
Giunsa ang Pag-install sa Chakra UI
Kinahanglan nimo nga i-type ang mosunod nga mga sugo aron ilakip ang Chakra sa Imong Proyekto:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Kinahanglan nimo nga i-configure ang ChakraProvider sa gamut sa imong aplikasyon pagkahuman ma-install ang Chakra UI. Depende sa balangkas nga imong gigamit, kini mahimong anaa sa imong 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 nga Teknik sa Chakra UI
Paghimo ug Real-time nga mga SVG
Mahimo nimong gusto nga dinamikong i-update ang imong mga SVG aron mapakita ang karon nga disenyo samtang nagtukod mga bag-ong tema alang sa imong website. Nagkinahanglan kini sa paghimo sa lahi nga mga SVG alang sa matag usa sa daghang mga tema.
Ang Chakra UI, sa laing bahin, usa ka mas user-friendly nga kapilian. Gamit ang useColorMode
hook sa Chakra UI, mahimo natong mabag-o ang kolor sa pagpuno sa atong mga SVG.
Ang UseColorMode magamit ra kung mapatuman na ang dark mode. Gigamit ang ngitngit nga mode sa Chakra UI sa unang higayon? Kini nga artikulo magpakita kanimo kung giunsa kini molihok sa husto.
ang useColorMode
magamit ang opsyon human 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 kodigo sa ibabaw naghiusa sa useColorMode
hook ug SVG aron mahimo silang dinamiko. Paggamit useColorMode
mahimo natong bawion ug usbon ang color mode. Kung gusto nimo magbag-o sa mga kolor, kinahanglan nimo gamiton ang bisan asa colorMode
o ang toggleColor
Mode function.
Mga Tema sa Chakra
Ang mga tema sa Chakra UI gipadapat gamit ang Gi-istilo nga Sistema nga Detalye sa Tema teknik. Ang mga tema sa Chakra mahimong makaapekto sa lainlaing mga aspeto gikan sa paletter sa kolor hangtod sa gilay-on.
Kinahanglan ra nimo nga i-import ang extendTheme
function samtang gidugang ang mga yawe aron usbon ang mga token sa preset. Atong tan-awon kini.
Kinahanglan ra nimo nga maghimo usa ka Theme.js
file aron makasugod.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Nagdugang kini og duha pa ka kolor sa tema nga butang aron mahimo kining mas lagsik ug madanihon. Sumala sa mga detalye sa software, mahimo kang maghimo ug mga marker sa estilo para sa mga typeface, breakpoints, gidak-on sa font, gilapdon sa column, ug uban pa.
Aron mapahimuslan ang bag-ong gipaila nga mga advanced nga bahin sa kini nga tema nga butang, kinahanglan nimo nga i-install una ChakraProvider
sa gamut sa 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;
Pagkahuman niana, direkta ka ChakraProvider
aron gamiton ang tema nga butang nga imong gibuhat kaniadto. Ang tanan nga mga sangkap sa Chakra mahimo nang mogamit mga kolor sa brand.
Ang pipila ka mga proyekto mahimo’g kinahanglan nga usbon ang sukaranan nga istilo sa sangkap sa Chakra kaysa magkinahanglan usa ka pagbag-o sa istilo sa bisan unsang paagi.
Ingon usa ka pananglitan sa butang nga istilo sa sangkap, ania kini:
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: "",
},
}
Karon, usbon lang nato ang Button
ug Heading
bahin.
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;
Mahimo natong tangtangon ang border-radius nga gitakda sa default para sa Button
pinaagi sa pagtangtang niini baseStyle
. Mahimo nimong usbon ang gidak-on sa font ug layout sa typeface alang sa Heading
. Gamit ang mga pananglitan sa ibabaw, mahibal-an nimo kung giunsa namon mabag-o ang sukaranan nga istilo sa mga sangkap sa Chakra.
Ang pagpauswag o pagbag-o sa mga istilo sa mga sangkap sa Chakra naghatag kanamo nga panan-aw ug kontrol sa hitsura ug paglihok sa among mga interface sa gumagamit.
Chakra ug Third-Party Components
Gitugotan sa Chakra ang mga module sa ikatulo nga partido nga makabenepisyo gikan sa ilang istilo. Ingon usa ka sangputanan, ang paghiusa sa mga elemento sa ikatulo nga partido sa Chakra UI nanginahanglan gamay nga proprietary component wrapper.
Ang mosunud usa ka lista sa mga elemento sa HTML nga gisuportahan sa pabrika sa 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>
);
}
Among gihiusa ang Next.js Image
component nga adunay Chakra UI sa code snippet sa ibabaw. Unya, nagbutang mi og ChakraNextImage
component, ug pinaagi niini, atong mapasa ang Chakra's style props sa Image
.
animation
Mahimo nimong ipasabut ang mga animation gamit ang Chakra UI's keyframes
magtatabang. Keyframes
pagkuha sa usa ka CSS keyframe kahulugan ug ibalik ang usa ka butang nga imong magamit sa mga estilo:
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>
);
}
sa paggamit sa mga keyframes
assistant, mahimo nimong himoon ang animation nga imong makita dinhi. Ang animation prop nagtugot kanamo sa pag-animate sa mga sangkap sa Chakra UI.
Isip katapusang lakang, ipasa spinAnimation
ngadto sa bahin sa Box aron ang mga animation mahimong idugang sa Chakra UI apps.
Mga Transisyon sa Panid
Ang mga transisyon sa panid mahimong idugang sa among mga app aron mapauswag ang kasinatian sa tiggamit kung sila molihok tali sa mga panid.
Ang mosunud usa ka pananglitan kung giunsa kini makab-ot sa 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;
Aron mapatuman ang mga transisyon sa panid, gamita ang mga sangkap sa transisyon gikan sa Chakra UI. Ang pagbalhin sa ScaleFade gigamit sa linya sa code sa taas.
Palihug ipahibalo ScaleFade
bahin sa agianan sa imong aplikasyon aron ang transisyon mahimo’g molihok samtang naglihok ka sa screen! Ang butang naghatag og datos mahitungod sa kasamtangan nga dalan, nga mahimo nimong ipadala ScaleFade
yawe prop. InitialScale
ug sa prop gigamit sa pag-establisar sa pagsugod nga sukdanan sa transisyon ug sa paghimo niini nga mahitabo sa diha nga ang component gihubad.
Niini nga piraso, among gitan-aw ang pipila sa mga bahin ug kapabilidad nga gitanyag sa Chakra UI ug kung giunsa kini pagtabang kanamo sa among hingpit nga kasinatian. Among gisuhid usab kon sa unsang paagi ang pag-establisar sa mga butang nga tema ug pagpalambo sa mga global nga estilo makatabang sa pagmintinar sa scalability sa among sistema.
Kung wala ka pa, Kami nagtuo nga kini nga artikulo naghatag kanimo pipila ka mga ideya aron mapahapsay ang imong proseso sa pagpalambo sa Chakra UI.
Leave sa usa ka Reply