O le a maua e le au atinaʻe le Chakra UI e avea ma a latou paaga sili ona aoga. I le avea ai o se meafaigaluega faʻapipiʻi mo auaunaga i luga ole laiga, Chakra UI faʻafaigofie ona fausia faʻaoga faʻatasi ma le lelei.
O se taunuuga o lona faʻaogaina ma le tausisia o WAI-ARIA, o elemene a Chakra UI e faigofie ona faʻavasega ma toe faʻauluina e faʻaaoga ai lona API. Ae ui i lea, ua naʻo le pito o le aisa e faʻatatau i le lelei o loʻo ofoina atu i tagata atiae.
I lenei pou, o le a tatou vaʻavaʻai totoʻa i nisi o mea sili atu ona alualu i luma o Chakra UI ma pe faʻapefea ona latou fesoasoani ia te oe ia sili atu le aoga o se tagata fai polokalame.
O le a le Chakra UI?
O le Chakra UI o se mea faigaluega faʻapitoa e fesoasoani i tagata atiaʻe faʻapipiʻi vave ona faʻaogaina ma toe faʻaaogaina vaega faʻaoga faʻaoga mo a latou upega tafaʻilagi. E fau i luga ole React ma fa'aoga le faiga fa'ailoga mo lana afi fa'aulu.
O le sini a Chakra UI o le fa'afaigofie lea mo le au fai polokalame ona fausia ni feso'ota'iga matagofie, talileleia, ma mafai ona fa'aogaina ma sina taumafaiga. O le pusa meafaigaluega e aofia ai le tele o ituaiga o mea e saunia e fa'aoga ua mamanuina ina ia faigofie ona faʻapipiʻi ma faʻalauteleina.
Chakra UI o se punaoa tatala, ma o lona atinaʻe e lagolagoina e le Vaega.
Faʻafefea ona faʻapipiʻi Chakra UI
E tatau ona e lolomi tulafono nei e faʻaofi ai Chakra i lau Poloketi:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
E tatau ona e faʻatulagaina le ChakraProvider i le aʻa o lau talosaga pe a uma ona tuʻuina le Chakra UI. Fa'alagolago ile auivi e te fa'aogaina, atonu e iai i lau faila index.jsx, index.tsx, po'o le app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Faʻamatalaga Faʻamatalaga i Chakra UI
Fausiaina SVG taimi moni
Atonu e te mana'o e fa'afouina au SVG e atagia ai le mamanu o lo'o iai nei a'o fa'atuina ni autu fou mo lau 'upega tafa'ilagi. O lenei mea e manaʻomia ai le fatuina o SVG maʻoti mo autu taʻitasi.
Chakra UI, i le isi itu, o se filifiliga sili atu ona faʻaoga. Fa'aaogaina o le useColorMode
matau i le Chakra UI, e mafai ona tatou suia malosi le lanu tumu oa tatou SVGs.
UseColorMode e na'o le taimi lava e fa'atino ai le faiga pogisa. Faʻaaogaina le pogisa ma le Chakra UI mo le taimi muamua? O lenei tusiga o le a faʻaali atu ia te oe le auala e faʻaoga lelei ai.
le useColorMode
e avanoa le filifiliga pe a uma ona fa'agaoioi le faiga pogisa.
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>
);
}
O le tulafono o loʻo i luga e tuʻufaʻatasia le useColorMode
matau ma le SVG e fa'amalosia ai. Fa'aaogaina useColorMode
e mafai ona tatou toe aumai ma suia le faiga lanu. Afai e te mana'o e sui lanu, e tatau ona e fa'aogaina colorMode
po o le toggleColor
Fa'atino galuega.
Chakra Autu
O autu a Chakra UI e faʻaaogaina e faʻaaoga ai le Styled System Theme Fa'amatalaga metotia. O autu ile Chakra e mafai ona a'afia ai itu eseese e amata mai ile lanu lanu ile va ole va.
E tatau lava ona e fa'aulufale mai le extendTheme
galue a'o fa'aopoopo ki e sui ai fa'ailoga i le seti. Sei o tatou tilotilo i le mea lea.
Na'o lou mana'omia e fai se Theme.js
faila e amata ai.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
E fa'aopoopoina isi lanu se lua i le mea autu ina ia sili atu ona olaola ma faatosina. E tusa ai ma fa'amatalaga fa'akomepiuta, e mafai ona e faia ni fa'ailoga sitaili mo mataitusi, va'aiga, lapo'a fa'amau, lautele koluma, ma isi mea.
Ina ia mafai ona faʻaogaina faʻamatalaga fou faʻalauiloa i lenei autu autu, e tatau ona e faʻapipiʻi muamua ChakraProvider
i le a'a o le talosaga.
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;
A maeʻa lena, e te faʻatonu ChakraProvider
e fa'aoga ai le mea autu na e faia muamua. O vaega uma o le Chakra e mafai nei ona fa'aoga lanu lanu.
O nisi o poloketi atonu e mana'omia le suia o le sitaili autu o le Chakra nai lo le mana'omia o se suiga i so'o se auala.
Mo se faʻataʻitaʻiga o le meafaitino vaega, o le mea lea:
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: "",
},
}
Ia, o le a na ona tatou suia le Button
ma Heading
vaega.
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;
E mafai ona tatou faʻaumatia le tuaoi-radius na faʻatulagaina e ala i le faaletonu mo le Button
e ala i le aveesea o lona baseStyle
. E mafai ona e suia le tele o le vai papatisoga ma le fa'atulagaina o mataitusi mo le Heading
. I le faʻaaogaina o faʻataʻitaʻiga o loʻo i luga, e mafai ona e malamalama i le auala e mafai ai ona tatou suia le tulaga masani o vaega Chakra.
O le faʻaleleia poʻo le suia o sitaili o vaega Chakra tatou te maua ai le vaʻaia ma le pulea o foliga vaaia ma le faʻaogaina oa tatou fesoʻotaʻiga faʻaoga.
Chakra ma Vaega Tolu Vaega
Chakra fa'atagaina vaega lona tolu e fa'amanuiaina mai a latou sitaili. O se taunuuga, o le tuʻufaʻatasia o elemene vaega lona tolu ma le Chakra UI e manaʻomia ai le itiiti ifo o mea faʻapipiʻi vaega.
Ole lisi lea o elemene HTML e lagolagoina e le fale gaosi 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>
);
}
Matou te tuʻufaʻatasia le Next.js Image
vaega ma Chakra UI i le snippet code i luga. Ona, matou setiina lea o se ChakraNextImage
vaega, ma e ala i ai, e mafai ona tatou pasi sitaili props a Chakra i Image
.
Animations
E mafai ona e faʻamatalaina mea faʻafiafia e faʻaaoga ai le Chakra UI keyframes
fesoasoani. Keyframes
ave i totonu se CSS keyframe faʻamatalaga ma toe faʻafoʻi se mea e mafai ona e faʻaogaina i sitaili:
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>
);
}
faaaogaina o le keyframes
fesoasoani, e mafai ona e fatuina le animation e te vaʻaia iinei. O le animation prop e mafai ai ona tatou faʻaola vaega Chakra UI.
O le laasaga mulimuli, pasi spinAnimation
i totonu o le vaega Pusa ina ia mafai ona faʻaopoopo faʻafiafiaga i le Chakra UI apps.
Itulau Suiga
E mafai ona fa'aopoopo suiga o itulau i a tatou polokalame ina ia fa'aleleia atili ai le poto masani a le tagata fa'aoga pe a latou fealua'i i le va o itulau.
Ole faʻataʻitaʻiga lea ole auala e ausia ai ile 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;
Ina ia mafai ona faʻatinoina suiga o itulau, faʻaaoga vaega o suiga mai le Chakra UI. Ole suiga ole ScaleFade o lo'o fa'aogaina ile laina ole code i luga.
Faʻamolemole faʻailoa ScaleFade
e uiga i le ala o lau talosaga ina ia mafai ona galue le suiga ao e agai i luga o le lau! O le mea faitino e maua ai faʻamatalaga e uiga i le auala o loʻo i ai nei, lea e mafai ona e lafoina i ScaleFade
o le lagolago autu. InitialScale
ma in prop e fa'aaogaina e fa'amautu ai le fua amata o le suiga ma fa'ataunu'u pe a tu'uina atu le vaega.
I lenei vaega, matou te vaʻavaʻai i nai vaega ma gafatia o loʻo ofoina mai e Chakra UI ma pe faʻapefea ona fesoasoani ia i matou i lo matou poto masani. Ua matou su'esu'e fo'i pe fa'afefea ona fesoasoani le fa'atuina o mea autu ma le atina'eina o sitaili fa'alelalolagi i le fa'atumauina o le fa'alauteleina o la tatou faiga.
Afai e te leʻi faia, Matou te talitonu o lenei tusiga ua tuʻuina atu ia te oe ni manatu e faʻafaigofie ai lau faʻagasologa o le atinaʻeina o le Chakra UI.
Tuua se tali