Awọn olupilẹṣẹ yoo rii Chakra UI lati jẹ alabaṣepọ wọn ti o wulo julọ. Gẹgẹbi ohun elo paati fun awọn iṣẹ ori ayelujara, Chakra UI jẹ ki o rọrun lati kọ awọn ohun elo ifisi pẹlu ṣiṣe.
Bi abajade iraye si ati ibamu WAI-ARIA, awọn eroja Chakra UI rọrun lati ṣe akanṣe ati tun-akọle nipa lilo API rẹ. Sibẹsibẹ, eyi nikan ni sample ti yinyin yinyin nipa awọn anfani ti o funni ni awọn idagbasoke.
Ninu ifiweranṣẹ yii, a yoo wo diẹ ninu awọn ẹya ilọsiwaju diẹ sii ti Chakra UI ati bii wọn ṣe le ṣe iranlọwọ fun ọ lati ni iṣelọpọ diẹ sii bi pirogirama kan.
Kini Chakra UI?
Chakra UI jẹ ohun elo irinṣẹ paati ti o ṣe iranlọwọ fun awọn olupolowo ni iyara lati kọ wiwọle ati awọn paati wiwo olumulo atunlo fun awọn ohun elo wẹẹbu wọn. O ti wa ni itumọ ti lori oke ti React ati ki o nlo awọn styled eto fun awọn oniwe-tiwon engine.
Ibi-afẹde Chakra UI ni lati jẹ ki o rọrun fun awọn olupilẹṣẹ lati ṣẹda ẹlẹwa, idahun, ati awọn atọkun olumulo wiwọle pẹlu ipa diẹ. Ohun elo irinṣẹ pẹlu ọpọlọpọ awọn ohun elo ti o ṣetan-lati-lilo ti o jẹ apẹrẹ lati ni irọrun composable ati extensible.
Chakra UI jẹ orisun ṣiṣi, ati idagbasoke rẹ ni atilẹyin nipasẹ Apa.
Bii o ṣe le fi Chakra UI sori ẹrọ
Iwọ yoo ni lati tẹ awọn aṣẹ wọnyi lati ṣafikun Chakra ninu Ise agbese Rẹ:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
O gbọdọ tunto Olupese Chakra ni gbongbo ohun elo rẹ lẹhin fifi sori ẹrọ Chakra UI. Da lori ilana ti o lo, eyi le wa ninu index.jsx, index.tsx, tabi app.jsx faili.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Awọn ilana ilọsiwaju ni Chakra UI
Ti o npese Real-akoko SVGs
O le fẹ lati ṣe imudojuiwọn awọn SVG rẹ ni agbara lati ṣe afihan apẹrẹ lọwọlọwọ lakoko ti o n ṣe agbekalẹ awọn akori tuntun fun oju opo wẹẹbu rẹ. Eyi ṣe dandan lati ṣẹda awọn SVGs ọtọtọ fun ọkọọkan awọn akori pupọ.
Chakra UI, ni apa keji, jẹ aṣayan ore-olumulo diẹ sii. Lilo awọn useColorMode
kio ni Chakra UI, a le yi iyipada awọ kikun ti awọn SVG wa pada.
UseColorMode le ṣee lo ni kete ti ipo dudu ba ti ni imuse. Lilo ipo dudu pẹlu Chakra UI fun igba akọkọ? Nkan yii yoo fihan ọ bi o ṣe le jẹ ki o ṣiṣẹ daradara.
awọn useColorMode
aṣayan wa lẹhin ti o ti mu ipo dudu ṣiṣẹ.
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>
);
}
Awọn loke koodu integrates awọn useColorMode
kio ati SVG lati jẹ ki wọn ni agbara. Lilo useColorMode
a le gba ati paarọ ipo awọ. Ti o ba fẹ yi awọn awọ pada, o yẹ ki o lo boya colorMode
tabi awọn toggleColor
Ipo iṣẹ.
Awọn akori Chakra
Awọn akori Chakra UI ni a lo nipa lilo awọn Sipesifikesonu Akori Eto Style ilana. Awọn akori ni Chakra le ni ipa lori ọpọlọpọ awọn aaye ti o wa lati paletter awọ si aye.
Iwọ yoo kan nilo lati gbe wọle wọle extendTheme
iṣẹ lakoko fifi awọn bọtini kun lati yipada awọn ami ninu tito tẹlẹ. Jẹ ki a wo eyi.
O kan nilo lati ṣẹda kan Theme.js
faili lati bẹrẹ.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
O ṣafikun awọn awọ meji si nkan akori lati jẹ ki o larinrin ati itara. Ni ibamu si awọn pato sọfitiwia, o le ṣẹda awọn asami ara fun awọn oju iru, awọn aaye fifọ, awọn iwọn fonti, awọn iwọn ọwọn, ati diẹ sii.
Lati le ni anfani ti awọn ẹya ilọsiwaju tuntun ti a ṣe afihan ni nkan akori yii, o gbọdọ kọkọ fi sii ChakraProvider
ni root ti awọn ohun elo.
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;
Lẹhin iyẹn, o darí ChakraProvider
lati lo nkan akori ti o ṣẹda tẹlẹ. Gbogbo awọn paati Chakra le lo awọn awọ iyasọtọ bayi.
Diẹ ninu awọn iṣẹ akanṣe le nilo iyipada iselona paati ipilẹ ti Chakra ju ki o nilo iyipada ara ni ọna eyikeyi.
Gẹgẹbi apẹẹrẹ ti nkan ara paati, eyi ni:
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: "",
},
}
Bayi, a kan yoo yi awọn Button
ati Heading
awọn ẹya.
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;
A le xo aala-rediosi ti a ti ṣeto nipasẹ aiyipada fun awọn Button
nipa yiyọ awọn oniwe- baseStyle
. O le paarọ iwọn fonti ati ipilẹ iru oju-iwe fun Heading
. Lilo awọn apẹẹrẹ ti o wa loke, o le loye bii a ṣe le paarọ aṣa aṣa ti awọn paati Chakra.
Ilọsiwaju tabi yiyipada awọn aza ti awọn paati Chakra n pese wa pẹlu hihan ati iṣakoso lori hihan ati iṣẹ ṣiṣe ti awọn atọkun olumulo wa.
Chakra ati Awọn ẹya ara ẹni-kẹta
Chakra ngbanilaaye awọn modulu ẹni-kẹta lati ni anfani lati ara wọn. Bi abajade, apapọ awọn eroja ẹni-kẹta pẹlu Chakra UI nilo awọn murasilẹ paati ohun-ini diẹ.
Atẹle ni atokọ ti awọn eroja HTML ti o ni atilẹyin nipasẹ ile-iṣẹ 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>
);
}
A ṣepọ Next.js Image
paati pẹlu Chakra UI ni snippet koodu loke. Lẹhinna, a ṣeto a ChakraNextImage
paati, ati nipasẹ rẹ, a le ṣe awọn atilẹyin ara Chakra si Image
.
awọn ohun idanilaraya
O le ṣalaye awọn ohun idanilaraya nipa lilo Chakra UI's keyframes
oluranlọwọ. Keyframes
mu itumọ bọtini fireemu CSS kan ki o da ohun kan pada ti o le lo ni awọn aṣa:
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>
);
}
lilo awọn keyframes
oluranlọwọ, o le ṣẹda awọn iwara ti o ri nibi. Ohun elo ere idaraya gba wa laaye lati ṣe ere awọn paati UI Chakra.
Gẹgẹbi igbesẹ ti o kẹhin, kọja spinAnimation
sinu paati Apoti ki awọn ohun idanilaraya le ṣafikun si awọn ohun elo Chakra UI.
Awọn iyipada oju-iwe
Awọn iyipada oju-iwe le ṣe afikun si awọn ohun elo wa lati le ni ilọsiwaju iriri olumulo nigbati wọn ba lọ laarin awọn oju-iwe.
Atẹle jẹ apẹẹrẹ ti bii o ṣe le ṣaṣeyọri rẹ pẹlu 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;
Lati le ṣe awọn iyipada oju-iwe, lo awọn paati iyipada lati Chakra UI. Iyipada ScaleFade ni a lo ni laini koodu loke.
Jọwọ leti ScaleFade
nipa ọna ohun elo rẹ ki iyipada le ṣiṣẹ bi o ṣe nlọ kọja iboju naa! Ohun naa n pese data nipa ọna lọwọlọwọ, eyiti o le firanṣẹ si ScaleFade
's bọtini prop. InitialScale
ati ni ategun ti wa ni lo lati fi idi awọn ibẹrẹ asekale ti awọn orilede ati lati ṣe awọn ti o ṣẹlẹ nigbati awọn paati ti wa ni jigbe.
Ninu nkan yii, a wo diẹ ninu awọn ẹya ati awọn agbara ti Chakra UI nfunni ati bii o ṣe ṣe iranlọwọ fun wa ni iriri pipe wa. A tun ti ṣawari bawo ni idasile awọn nkan akori ati idagbasoke awọn aṣa agbaye le ṣe iranlọwọ ni mimu iwọn iwọn eto wa.
Ti o ko ba ti tẹlẹ, A gbagbọ pe nkan yii ti fun ọ ni diẹ ninu awọn imọran lati ṣe ilana ilana idagbasoke Chakra UI rẹ.
Fi a Reply