Pengembang akan menemukan Chakra UI sebagai mitra mereka yang paling berguna. Sebagai toolkit komponen untuk layanan online, Chakra UI memudahkan pembuatan aplikasi inklusif dengan efisiensi.
Sebagai hasil dari aksesibilitas dan kepatuhan WAI-ARIA, elemen Chakra UI mudah disesuaikan dan diberi tema ulang menggunakan API-nya. Namun, ini hanya puncak gunung es mengenai keuntungan yang ditawarkan pengembang.
Dalam posting ini, kita akan melihat lebih dekat beberapa fitur Cakra UI yang lebih canggih dan bagaimana fitur tersebut dapat membantu Anda menjadi lebih produktif sebagai seorang programmer.
Apa itu Cakra UI?
Chakra UI adalah toolkit komponen yang membantu pengembang dengan cepat membangun komponen antarmuka pengguna yang dapat diakses dan digunakan kembali untuk aplikasi web mereka. Itu dibangun di atas React dan menggunakan sistem gaya untuk mesin temanya.
Tujuan Chakra UI adalah untuk memudahkan programmer membuat antarmuka pengguna yang indah, responsif, dan dapat diakses dengan sedikit usaha. Toolkit ini mencakup berbagai macam komponen siap pakai yang dirancang agar mudah dikomposisi dan diperluas.
Chakra UI adalah open source, dan pengembangannya disponsori oleh Segment.
Cara Memasang UI Chakra
Anda harus mengetikkan perintah berikut untuk memasukkan Chakra dalam Proyek Anda:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Anda harus mengonfigurasi ChakraProvider di root aplikasi Anda setelah menginstal Chakra UI. Bergantung pada kerangka kerja yang Anda gunakan, ini mungkin dalam file index.jsx, index.tsx, atau app.jsx Anda.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Teknik Lanjutan di Chakra UI
Menghasilkan SVG waktu-nyata
Anda mungkin ingin memperbarui SVG Anda secara dinamis untuk mencerminkan desain saat ini sambil membuat tema baru untuk situs web Anda. Ini memerlukan pembuatan SVG yang berbeda untuk masing-masing dari beberapa tema.
Chakra UI, di sisi lain, adalah opsi yang lebih ramah pengguna. Menggunakan useColorMode
kait di UI Chakra, kita dapat secara dinamis mengubah warna isian SVG kita.
UseColorMode hanya dapat digunakan setelah mode gelap diterapkan. Menggunakan mode gelap dengan Chakra UI untuk pertama kalinya? Artikel ini akan menunjukkan kepada Anda cara membuatnya berfungsi dengan benar.
Grafik useColorMode
opsi tersedia setelah mode gelap diaktifkan.
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 di atas mengintegrasikan useColorMode
hook dan SVG untuk membuatnya dinamis. Menggunakan useColorMode
kita dapat mengambil dan mengubah mode warna. Jika Anda ingin berganti warna, Anda harus menggunakan keduanya colorMode
atau itu toggleColor
Fungsi modus.
Tema Cakra
Tema Chakra UI diterapkan menggunakan Spesifikasi Tema Sistem Bergaya teknik. Tema di Chakra dapat memengaruhi berbagai aspek mulai dari palet warna hingga spasi.
Anda hanya perlu mengimpor extendTheme
berfungsi sambil menambahkan kunci untuk memodifikasi token di preset. Mari kita lihat ini.
Anda hanya perlu membuat Theme.js
berkas untuk memulai.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Ini menambahkan dua warna lagi ke objek tema untuk membuatnya lebih hidup dan menarik. Menurut spesifikasi perangkat lunak, Anda dapat membuat penanda gaya untuk tipografi, titik putus, ukuran font, lebar kolom, dan banyak lagi.
Untuk memanfaatkan fitur-fitur canggih yang baru diperkenalkan di objek tema ini, Anda harus menginstal terlebih dahulu ChakraProvider
di root 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;
Setelah itu, Anda mengarahkan ChakraProvider
untuk menggunakan objek tema yang Anda buat sebelumnya. Semua komponen Chakra sekarang dapat menggunakan warna merek.
Beberapa proyek mungkin hanya perlu mengubah gaya komponen dasar Chakra daripada memerlukan modifikasi gaya dengan cara apa pun.
Sebagai contoh objek gaya komponen, ini dia:
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: "",
},
}
Sekarang, kita hanya akan memodifikasi Button
dan Heading
bagian.
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;
Kita dapat menghilangkan radius perbatasan yang ditetapkan secara default untuk Button
dengan menghapus baseStyle
. Anda dapat mengubah ukuran font dan tata letak jenis huruf untuk Heading
. Dengan menggunakan contoh di atas, Anda dapat memahami bagaimana kami dapat mengubah gaya standar komponen Chakra.
Meningkatkan atau mengubah gaya komponen Chakra memberi kami visibilitas dan kontrol atas tampilan dan fungsi antarmuka pengguna kami.
Chakra dan Komponen Pihak Ketiga
Chakra memungkinkan modul pihak ketiga untuk mendapatkan keuntungan dari gaya mereka. Akibatnya, menggabungkan elemen pihak ketiga dengan Chakra UI membutuhkan lebih sedikit pembungkus komponen berpemilik.
Berikut ini adalah daftar elemen HTML yang didukung oleh 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>
);
}
Kami mengintegrasikan Next.js Image
komponen dengan Chakra UI dalam cuplikan kode di atas. Kemudian, kami mengatur ChakraNextImage
komponen, dan melaluinya, kita dapat meneruskan alat peraga gaya Chakra ke Image
.
animasi
Anda dapat menentukan animasi menggunakan Chakra UI's keyframes
pembantu. Keyframes
ambil definisi keyframe CSS dan kembalikan objek yang dapat Anda gunakan dalam 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>
);
}
Menggunakan keyframes
asisten, Anda dapat membuat animasi yang Anda lihat di sini. Prop animasi memungkinkan kita untuk menganimasikan komponen UI Chakra.
Sebagai langkah terakhir, lulus spinAnimation
ke dalam komponen Kotak sehingga animasi dapat ditambahkan ke aplikasi UI Chakra.
Transisi Halaman
Transisi halaman dapat ditambahkan ke aplikasi kami untuk meningkatkan pengalaman pengguna saat mereka berpindah antar halaman.
Berikut ini adalah contoh cara mencapainya dengan 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;
Untuk menerapkan transisi halaman, gunakan komponen transisi dari UI Chakra. Transisi ScaleFade digunakan pada baris kode di atas.
Harap beri tahu ScaleFade
tentang jalur aplikasi Anda sehingga transisi dapat berfungsi saat Anda bergerak melintasi layar! Objek menyediakan data tentang jalur saat ini, yang kemudian dapat Anda kirim ke ScaleFade
penyangga kunci. InitialScale
dan di prop digunakan untuk menetapkan skala awal transisi dan mewujudkannya saat komponen dirender.
Dalam bagian ini, kami melihat beberapa fitur dan kemampuan yang ditawarkan Chakra UI dan bagaimana hal itu membantu kami dalam pengalaman sempurna kami. Kami juga telah mengeksplorasi bagaimana membangun objek tema dan mengembangkan gaya global dapat membantu menjaga skalabilitas sistem kami.
Jika Anda belum melakukannya, Kami yakin artikel ini telah memberi Anda beberapa ide untuk merampingkan proses pengembangan Chakra UI Anda.
Tinggalkan Balasan