Daptar eusi[Sumputkeun][Témbongkeun]
Pamekar bakal mendakan Chakra UI janten pasangan anu paling kapaké. Salaku toolkit komponén pikeun layanan online, Chakra UI ngagampangkeun pikeun ngawangun aplikasi inklusif kalayan efisiensi.
Salaku hasil tina aksésibilitas sareng patuh WAI-ARIA, unsur Chakra UI saderhana pikeun ngaropea sareng téma ulang nganggo API na. Nanging, ieu ngan ukur puncak gunung es ngeunaan kauntungan anu ditawarkeun para pangembang.
Dina postingan ieu, urang bakal ningali sababaraha fitur anu langkung canggih tina Chakra UI sareng kumaha aranjeunna tiasa ngabantosan anjeun janten langkung produktif salaku programer.
Naon Chakra UI?
Chakra UI mangrupikeun toolkit komponén anu ngabantosan pamekar gancang ngawangun komponén antarbeungeut pangguna anu tiasa diaksés sareng tiasa dianggo deui pikeun aplikasi wébna. Éta diwangun dina luhureun React sareng nganggo sistem gaya pikeun mesin témana.
Tujuan Chakra UI nyaéta pikeun ngagampangkeun programer nyiptakeun antarmuka pangguna anu saé, responsif, sareng tiasa diaksés kalayan usaha anu minimal. Toolkit ngawengku rupa-rupa komponén siap pake anu dirancang pikeun gampang composable sarta extensible.
Chakra UI mangrupikeun sumber terbuka, sareng pamekaranna disponsoran ku Segmen.
Kumaha Masang Chakra UI
Anjeun kedah ngetik paréntah di handap ieu pikeun ngalebetkeun Chakra dina Proyék anjeun:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Anjeun kedah ngonpigurasikeun ChakraProvider dina akar aplikasi anjeun saatos masang Chakra UI. Gumantung kana kerangka anu anjeun anggo, ieu tiasa aya dina file index.jsx, index.tsx, atanapi app.jsx anjeun.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Téhnik Canggih dina Chakra UI
Ngahasilkeun SVGs Real-time
Anjeun panginten hoyong ngapdet SVG anjeun sacara dinamis pikeun ngagambarkeun desain ayeuna bari ngadamel téma énggal pikeun halaman wéb anjeun. Ieu peryogi nyiptakeun SVG anu béda pikeun tiap tina sababaraha téma.
Chakra UI, di sisi anu sanés, mangrupikeun pilihan anu langkung ramah-pamaké. Ngagunakeun éta useColorMode
kait dina Chakra UI, urang tiasa sacara dinamis ngarobih warna eusian SVG urang.
UseColorMode ngan tiasa dianggo nalika modeu poék dilaksanakeun. Nganggo mode poék sareng Chakra UI pertama kalina? Tulisan ieu bakal nunjukkeun anjeun kumaha jalanna leres.
nu useColorMode
pilihan sadia sanggeus mode poék geus diaktipkeun.
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>
);
}
Kode luhur integrates nu useColorMode
hook na SVG sangkan aranjeunna dinamis. Ngagunakeun useColorMode
urang tiasa nyandak sareng ngarobih mode warna. Upami anjeun hoyong ngagentos warna, anjeun kedah nganggo boh colorMode
atawa toggleColor
Fungsi modeu.
Téma Chakra
Téma Chakra UI diterapkeun nganggo Styled System Téma spésifikasi téhnik. Téma dina Chakra tiasa mangaruhan rupa-rupa aspék mimitian ti paletter warna ka jarak.
Anjeun ngan bakal perlu ngimpor nu extendTheme
fungsi bari nambahkeun kenop pikeun ngaropéa tokens dina prasetél. Hayu urang tingali ieu.
Anjeun ngan perlu nyieun hiji Theme.js
file pikeun ngamimitian.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Éta nambihan dua warna deui kana objék téma pikeun ngajantenkeun langkung sreg sareng pikaresepeun. Numutkeun spésifikasi parangkat lunak, anjeun tiasa nyiptakeun spidol gaya pikeun tipografi, titik putus, ukuran font, lebar kolom, sareng seueur deui.
Pikeun ngamangpaatkeun fitur canggih anu nembé diwanohkeun dina objék téma ieu, anjeun kedah masang heula ChakraProvider
dina akar aplikasi.
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;
Sanggeus éta, anjeun langsung ChakraProvider
pikeun ngagunakeun objék téma anu anjeun damel sateuacanna. Sadaya komponén Chakra ayeuna tiasa nganggo warna merek.
Sababaraha proyék ngan ukur peryogi ngarobih gaya komponén dasar Chakra tinimbang meryogikeun modifikasi gaya dina cara naon waé.
Salaku conto objék gaya komponén, ieu téh:
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: "",
},
}
Ayeuna, urang ngan ukur ngarobih Button
jeung Heading
patempatan.
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;
Urang bisa meunang leupas tina wates-radius nu diatur sacara standar pikeun Button
ku miceun na baseStyle
. Anjeun tiasa ngarobih ukuran font sareng perenah typeface pikeun Heading
. Nganggo conto di luhur, anjeun tiasa ngartos kumaha urang tiasa ngarobih gaya standar komponén Chakra.
Ningkatkeun atanapi ngarobih gaya komponén Chakra nyayogikeun pisibilitas sareng kontrol kana penampilan sareng fungsi antarmuka pangguna.
Cakra jeung komponén pihak-katilu
Chakra ngamungkinkeun modul pihak katilu kauntungan tina gaya maranéhanana. Hasilna, ngagabungkeun elemen pihak katilu jeung Chakra UI merlukeun pangsaeutikna wrappers komponén proprietary.
Di handap ieu daptar elemen HTML dirojong ku pabrik 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>
);
}
Urang ngahijikeun Next.js Image
komponén kalawan Chakra UI dina snippet kode luhur. Lajeng, urang nyetél a ChakraNextImage
komponén, sarta ngaliwatan eta, urang bisa lulus props gaya Chakra urang ka Image
.
animasi
Anjeun tiasa ngartikeun animasi nganggo Chakra UI keyframes
nulungan. Keyframes
nyandak definisi keyframe CSS sareng ngabalikeun obyék anu anjeun tiasa dianggo dina gaya:
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>
);
}
ngagunakeun keyframes
asisten, Anjeun bisa nyieun animasi nu katingali di dieu. Prop animasi ngamungkinkeun urang ngahirupkeun komponén UI Chakra.
Salaku hambalan panungtungan, lulus spinAnimation
kana komponén Box ambéh animasi bisa ditambahkeun kana aplikasi Chakra UI.
Kaca Transisi
Transisi halaman tiasa ditambihkeun kana aplikasi kami pikeun ningkatkeun pangalaman pangguna nalika aranjeunna ngalih antara halaman.
Di handap ieu conto kumaha carana ngahontal éta kalayan 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;
Dina raraga nerapkeun transisi kaca, make komponén transisi tina Chakra UI. The ScaleFade transisi dipaké dina garis luhur kode.
Punten wartosan ScaleFade
ngeunaan jalur aplikasi anjeun supados transisi tiasa fungsina nalika anjeun mindahkeun layar! Obyék nyadiakeun data ngeunaan jalur ayeuna, nu lajeng bisa ngirim ka ScaleFade
konci prop. InitialScale
sarta dina prop dipaké pikeun ngadegkeun skala awal transisi sarta nyieun eta lumangsung nalika komponén rendered.
Dina bagian ieu, urang ningali sababaraha fitur sareng kamampuan anu ditawarkeun Chakra UI sareng kumaha éta ngabantosan urang dina pangalaman anu sampurna. Kami ogé parantos ngajalajah kumaha ngadegkeun objék téma sareng ngembangkeun gaya global tiasa ngabantosan ngajaga skalabilitas sistem kami.
Upami anjeun henteu acan, Kami yakin yén tulisan ieu parantos masihan anjeun sababaraha ide pikeun nyegerkeun prosés pangembangan UI Chakra anjeun.
Leave a Reply