Ka kitea e nga kaiwhakawhanake a Chakra UI hei hoa pai mo ratou. Hei kete taputapu mo nga ratonga ipurangi, ka ngawari te hanga a Chakra UI ki te hanga tono whakauru me te whai hua.
Ko te hua o tana urunga me te hanganga ture WAI-ARIA, he maamaa nga huānga a Chakra UI ki te whakarite me te whakahou i te kaupapa ma te whakamahi i tana API. Heoi, koinei anake te pito o te hukapapa mo nga painga e tukuna ana e nga kaihanga.
I roto i tenei pou, ka ata tirohia e matou etahi o nga ahuatanga matatau ake o Chakra UI me pehea e awhina ai koe kia whai hua ake hei kaiwhakaputa.
He aha te Chakra UI?
Ko te Chakra UI he kete taputapu e awhina ana i nga kaiwhakawhanake ki te hanga i nga waahanga atanga kaiwhakamahi e waatea ana me te whakamahi ano mo o raatau tono paetukutuku. He mea hanga ki runga ake o React me te whakamahi i te punaha taatai mo tana miihini kaupapa.
Ko te whainga a Chakra UI kia ngawari ki te hanga hötaka ki te hanga i nga atanga kaiwhakamahi ataahua, aro, me te uru me te iti o te kaha. Kei roto i te kete taputapu he maha nga momo waahanga kua reri ki te whakamahi i hangaia kia ngawari te tito me te whakawhanui.
Ko te Chakra UI he puna tuwhera, a ko tana whanaketanga kei te tautokohia e te Waahanga.
Me pehea te whakauru i te Chakra UI
Me pato koe i nga whakahau e whai ake nei hei whakauru i te Chakra ki to Kaupapa:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Me whirihora e koe te ChakraProvider i te pakiaka o to tono i muri i te whakauru i te Chakra UI. I runga i te anga e whakamahia ana e koe, kei roto pea tenei i to index.jsx, index.tsx, app.jsx ranei.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Nga Tikanga Ake i roto i te Chakra UI
Te whakaputa i nga SVG Wā-tūturu
Ka hiahia pea koe ki te whakahou i o SVG kia whakaata i te hoahoa o naianei i te wa e whakatuu kaupapa hou mo to paetukutuku. Me hanga he SVG motuhake mo ia kaupapa maha.
Ko te Chakra UI, i tetahi atu ringa, he pai ake te whiriwhiringa-kaiwhakamahi. Te whakamahi i te useColorMode
matau i roto i te Chakra UI, ka taea e taatau te whakarereke i te tae whakakii o a maatau SVG.
Ka taea anake te whakamahi UseColorMode ina whakatinanahia te aratau pouri. Te whakamahi i te aratau pouri me te Chakra UI mo te wa tuatahi? Ma tenei tuhinga e whakaatu ki a koe me pehea te mahi tika.
te useColorMode
Kei te waatea te whiringa i muri i te whakahohea o te aratau pouri.
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>
);
}
Ko te waehere o runga e whakauru ana i te useColorMode
matau me te SVG kia hihiri ai. Te whakamahi useColorMode
ka taea e tatou te tiki me te whakarereke i te aratau tae. Mena kei te hiahia koe ki te huri i nga tae, me whakamahi koe colorMode
te ranei toggleColor
Mahi Aratau.
Kaupapa Chakra
Ka whakamahia nga kaupapa Chakra UI ma te whakamahi i te Whakatakotoranga Kaupapa Kaupapa Whakaahua tikanga. Ko nga kaupapa i roto i te Chakra ka pa ki nga momo ahuatanga mai i te papanga tae ki te mokowhiti.
Me kawemai noa koe i te extendTheme
mahi i te taapiri i nga taviri ki te whakarereke i nga tohu i te tatūkē. Kia titiro tatou ki tenei.
Me hanga noa e koe he Theme.js
kōnae ki te timata.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Ka taapirihia etahi atu tae e rua ki te ahanoa kaupapa kia pai ake ai te hihiri me te whakahihiri. E ai ki nga whakaritenga raupaparorohiko, ka taea e koe te hanga tohu ahua mo nga momo ahua, nga waahi pakaru, te rahi momotuhi, te whanui pou, me etahi atu.
Kia taea ai e koe te whakamahi i nga ahuatanga hou hou i whakauruhia ki tenei kaupapa kaupapa, me whakauru tuatahi koe ChakraProvider
i te putake o te tono.
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;
I muri i tera, ka whakatika koe ChakraProvider
hei whakamahi i te ahanoa kaupapa i hanga e koe i mua. Ka taea e nga waahanga Chakra te whakamahi i nga tae waitohu.
Ko etahi o nga kaupapa me whakarereke i te ahua o nga waahanga taketake o Chakra, kaua ki te hiahia ki te whakarereke i te ahua.
Hei tauira o te ahanoa momo waahanga, koinei:
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: "",
},
}
Inaianei, ka whakarereke noa tatou i te Button
a Heading
waahanga.
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;
Ka taea e tatou te whakakore i te radius taitapa i tautuhia e te taunoa mo te Button
ma te tango i ona baseStyle
. Ka taea e koe te whakarereke i te rahi momotuhi me te whakatakotoranga momotuhi mo te Heading
. Ma te whakamahi i nga tauira o runga ake nei, ka mohio koe me pehea e taea ai e matou te whakarereke i te ahua paerewa o nga waahanga Chakra.
Ko te whakarei ake, te whakarereke ranei i nga momo o nga waahanga Chakra ka whakawhiwhia ki a maatau te tirohanga me te mana whakahaere mo te ahua me te mahi o a maatau atanga kaiwhakamahi.
Chakra me nga Waahanga Tuatoru
Ka taea e Chakra nga waahanga tuatoru-tuatoru ki te whai hua mai i o raatau ahua. Ko te mutunga, ko te whakakotahi i nga huānga tuatoru-tuatoru me te Chakra UI me iti ake nga takai o nga waahanga rangatira.
Ko te rarangi o nga huānga HTML e tautokohia ana e te wheketere Chakra e whai ake nei:
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>
);
}
Ka whakauruhia e matou te Next.js Image
te waahanga me te Chakra UI i roto i te snippet waehere kei runga. Na, ka whakaturia e matou he ChakraNextImage
wae, a na roto i te reira, ka taea e tatou te tuku i nga taputapu ahua a Chakra ki Image
.
hākoritanga
Ka taea e koe te tautuhi i nga pakiwaituhi ma te whakamahi i te Chakra UI's keyframes
kaiawhina. Keyframes
tango i te whakamaramatanga anga matua CSS ka whakahoki mai i tetahi mea ka taea e koe te whakamahi i nga momo:
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>
);
}
Mā te whakamahi i te keyframes
kaiāwhina, ka taea e koe te hanga i te hākoritanga e kite ana koe i konei. Ko te kaupapa hākoritanga ka taea e tatou te whakakorikori i nga waahanga Chakra UI.
Hei taahiraa whakamutunga, haere spinAnimation
ki roto i te waahanga Pouaka kia taea ai te taapiri i nga pakiwaituhi ki nga taupānga Chakra UI.
Whakawhiti Whārangi
Ko nga whakawhitinga wharangi ka taapirihia ki a maatau taupānga kia pai ake ai te wheako o te kaiwhakamahi ina neke ana i waenga i nga wharangi.
Ko te tauira e whai ake nei me pehea te whakatutuki me te 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;
Hei whakatinana i nga whakawhitinga wharangi, whakamahia nga waahanga whakawhiti mai i te Chakra UI. Ka whakamahia te whakawhitinga ScaleFade i te rarangi o runga o te waehere.
Tena koa whakamohio mai ScaleFade
e pa ana ki te huarahi o to tono kia taea ai e te whakawhiti te mahi i a koe e neke ana i te mata! Ko te ahanoa he tuku raraunga mo te ara o naianei, ka taea e koe te tuku atu ScaleFade
te tautoko matua. InitialScale
Ka whakamahia hoki i roto i te tautoko ki te whakarite i te tauine timatanga o te whakawhiti me te whakatutuki i te wa e tukuna ana te waahanga.
I tenei waahanga, i titiro matou ki etahi o nga ahuatanga me nga kaha e tukuna ana e Chakra UI me te awhina i a maatau i roto i o maatau wheako tino pai. Kua tirotirohia ano e matou me pehea te whakatuu kaupapa kaupapa me te whakawhanake i nga momo o te ao ka awhina ki te pupuri i te whakawhanuitanga o to maatau punaha.
Mena kaore ano koe i mua, E whakapono ana matou kua hoatu e tenei tuhinga etahi whakaaro ki a koe hei whakamaarama i to kaupapa whanaketanga Chakra UI.
Waiho i te Reply