Jadual Kandungan[Sembunyi][Tunjukkan]
Pembangun akan mendapati UI Chakra sebagai rakan kongsi mereka yang paling berguna. Sebagai kit alat komponen untuk perkhidmatan dalam talian, UI Chakra memudahkan untuk membina apl inklusif dengan cekap.
Hasil daripada kebolehcapaian dan pematuhan WAI-ARIA, elemen UI Chakra mudah untuk disesuaikan dan tema semula menggunakan APInya. Walau bagaimanapun, ini hanyalah puncak gunung ais mengenai kelebihan yang ditawarkannya kepada pemaju.
Dalam siaran ini, kami akan melihat dengan lebih dekat beberapa ciri UI Chakra yang lebih canggih dan cara ia boleh membantu anda menjadi lebih produktif sebagai pengaturcara.
Apakah UI Chakra?
UI Chakra ialah kit alat komponen yang membantu pembangun membina dengan cepat komponen antara muka pengguna yang boleh diakses dan boleh digunakan semula untuk aplikasi web mereka. Ia dibina di atas React dan menggunakan sistem gaya untuk enjin temanya.
Matlamat UI Chakra adalah untuk memudahkan pengaturcara mencipta antara muka pengguna yang cantik, responsif dan boleh diakses dengan usaha yang minimum. Kit alat ini merangkumi pelbagai jenis komponen sedia untuk digunakan yang direka bentuk supaya mudah digubah dan dipanjangkan.
UI Chakra ialah sumber terbuka, dan pembangunannya ditaja oleh Segmen.
Cara Memasang UI Chakra
Anda perlu menaip arahan berikut untuk memasukkan Chakra dalam Projek Anda:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Anda mesti mengkonfigurasi ChakraProvider pada akar aplikasi anda selepas memasang UI Chakra. Bergantung pada rangka kerja yang anda gunakan, ini mungkin dalam fail 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 dalam UI Chakra
Menjana SVG Masa Nyata
Anda mungkin ingin mengemas kini SVG anda secara dinamik untuk menggambarkan reka bentuk semasa sambil mewujudkan tema baharu untuk tapak web anda. Ini memerlukan penciptaan SVG yang berbeza untuk setiap satu daripada beberapa tema.
UI Chakra, sebaliknya, adalah pilihan yang lebih mesra pengguna. Menggunakan useColorMode
cangkuk dalam UI Chakra, kami boleh mengubah warna isian SVG kami secara dinamik.
UseColorMode hanya boleh digunakan sebaik sahaja mod gelap dilaksanakan. Menggunakan mod gelap dengan UI Chakra buat kali pertama? Artikel ini akan menunjukkan kepada anda cara untuk menjadikannya berfungsi dengan betul.
. useColorMode
pilihan tersedia selepas mod gelap didayakan.
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>
);
}
Kod di atas menyepadukan useColorMode
cangkuk dan SVG untuk menjadikannya dinamik. menggunakan useColorMode
kita boleh mendapatkan semula dan mengubah mod warna. Jika anda ingin menukar warna, anda harus menggunakan sama ada colorMode
atau toggleColor
Fungsi mod.
Tema Cakra
Tema UI Chakra digunakan menggunakan Spesifikasi Tema Sistem Bergaya teknik. Tema dalam Chakra boleh memberi kesan kepada pelbagai aspek dari paletter warna hingga jarak.
Anda hanya perlu mengimport extendTheme
berfungsi sambil menambah kekunci untuk mengubah suai token dalam pratetap. Mari kita lihat ini.
Anda hanya perlu membuat a Theme.js
fail untuk bermula.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Ia menambahkan dua lagi warna pada objek tema untuk menjadikannya lebih bersemangat dan menarik. Mengikut spesifikasi perisian, anda boleh membuat penanda gaya untuk muka taip, titik putus, saiz fon, lebar lajur dan banyak lagi.
Untuk memanfaatkan ciri lanjutan yang baru diperkenalkan dalam objek tema ini, anda mesti memasang terlebih dahulu ChakraProvider
pada akar permohonan.
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;
Selepas itu, anda mengarahkan ChakraProvider
untuk menggunakan objek tema yang anda buat sebelum ini. Semua komponen Chakra kini boleh menggunakan warna jenama.
Sesetengah projek mungkin hanya perlu mengubah penggayaan komponen asas Chakra daripada memerlukan pengubahsuaian gaya dalam apa jua cara.
Sebagai contoh objek gaya komponen, berikut ialah:
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 mengubah suai Button
and Heading
bahagian.
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 boleh menyingkirkan jejari sempadan yang telah ditetapkan secara lalai untuk Button
dengan mengeluarkannya baseStyle
. Anda boleh mengubah saiz fon dan susun atur muka taip untuk Heading
. Menggunakan contoh di atas, anda boleh memahami bagaimana kami boleh mengubah gaya standard komponen Chakra.
Meningkatkan atau mengubah gaya komponen Chakra memberikan kami keterlihatan dan kawalan ke atas penampilan dan fungsi antara muka pengguna kami.
Cakra dan Komponen Pihak Ketiga
Chakra membolehkan modul pihak ketiga mendapat manfaat daripada gaya mereka. Akibatnya, menggabungkan elemen pihak ketiga dengan UI Chakra memerlukan lebih sedikit pembalut komponen proprietari.
Berikut ialah senarai elemen HTML yang disokong oleh kilang 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 menyepadukan Next.js Image
komponen dengan UI Chakra dalam coretan kod di atas. Kemudian, kami menyediakan a ChakraNextImage
komponen, dan melaluinya, kita boleh menghantar prop gaya Chakra kepada Image
.
Animasi
Anda boleh menentukan animasi menggunakan UI Chakra keyframes
penolong. Keyframes
ambil definisi kerangka utama CSS dan kembalikan objek yang boleh 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
pembantu, anda boleh mencipta animasi yang anda lihat di sini. Prop animasi membolehkan kami menghidupkan komponen UI Chakra.
Sebagai langkah terakhir, lulus spinAnimation
ke dalam komponen Kotak supaya animasi boleh ditambahkan pada aplikasi UI Chakra.
Peralihan Halaman
Peralihan halaman boleh ditambahkan pada apl kami untuk meningkatkan pengalaman pengguna apabila mereka berpindah antara halaman.
Berikut ialah contoh cara mencapainya dengan UI Chakra:
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 melaksanakan peralihan halaman, gunakan komponen peralihan daripada UI Chakra. Peralihan ScaleFade digunakan dalam baris kod di atas.
Sila maklumkan ScaleFade
tentang laluan aplikasi anda supaya peralihan boleh berfungsi semasa anda bergerak merentasi skrin! Objek menyediakan data tentang laluan semasa, yang kemudiannya boleh anda hantar ke ScaleFade
prop kunci. InitialScale
dan dalam prop digunakan untuk mewujudkan skala permulaan peralihan dan untuk menjadikannya berlaku apabila komponen diberikan.
Dalam bahagian ini, kami melihat beberapa ciri dan keupayaan yang ditawarkan oleh UI Chakra dan cara ia membantu kami dalam pengalaman sempurna kami. Kami juga telah meneroka cara mewujudkan objek tema dan membangunkan gaya global mungkin membantu dalam mengekalkan kebolehskalaan sistem kami.
Jika anda belum melakukannya, Kami percaya artikel ini telah memberi anda beberapa idea untuk menyelaraskan proses pembangunan UI Chakra anda.
Sila tinggalkan balasan anda