Geliştiriciler, Chakra UI'yi en faydalı ortakları olarak bulacaklar. Çevrimiçi hizmetler için bir bileşen araç seti olan Chakra UI, verimli ve kapsayıcı uygulamalar oluşturmayı kolaylaştırır.
Erişilebilirliği ve WAI-ARIA uyumluluğunun bir sonucu olarak, Chakra UI öğelerinin API'sini kullanarak özelleştirmesi ve yeniden teması kolaydır. Ancak bu, geliştiricilere sunduğu avantajlar açısından buzdağının sadece görünen kısmı.
Bu gönderide, Chakra UI'nin bazı gelişmiş özelliklerine ve bir programcı olarak daha üretken olmanıza nasıl yardımcı olabileceklerine daha yakından bakacağız.
Çakra Kullanıcı Arayüzü nedir?
Chakra UI, geliştiricilerin web uygulamaları için hızlı bir şekilde erişilebilir ve yeniden kullanılabilir kullanıcı arabirimi bileşenleri oluşturmasına yardımcı olan bir bileşen araç takımıdır. React üzerine inşa edilmiştir ve tema motoru için tarz sistemi kullanır.
Chakra UI'nin amacı, programcıların minimum çabayla güzel, duyarlı ve erişilebilir kullanıcı arayüzleri oluşturmasını kolaylaştırmaktır. Araç takımı, kolayca birleştirilebilir ve genişletilebilir olacak şekilde tasarlanmış çok çeşitli kullanıma hazır bileşenler içerir.
Chakra UI açık kaynaktır ve geliştirilmesi Segment tarafından desteklenmektedir.
Çakra Kullanıcı Arayüzü Nasıl Kurulur
Çakra'yı Projenize dahil etmek için aşağıdaki komutları yazmanız gerekecek:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Chakra UI'yi yükledikten sonra uygulamanızın kök dizininde ChakraProvider'ı yapılandırmanız gerekir. Kullandığınız çerçeveye bağlı olarak bu, index.jsx, index.tsx veya app.jsx dosyanızda olabilir.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Çakra Kullanıcı Arayüzündeki Gelişmiş Teknikler
Gerçek Zamanlı SVG'ler Oluşturma
Web siteniz için yeni temalar oluştururken SVG'lerinizi mevcut tasarımı yansıtacak şekilde dinamik olarak güncellemek isteyebilirsiniz. Bu, çeşitli temaların her biri için farklı SVG'lerin oluşturulmasını gerektirir.
Çakra UI ise daha kullanıcı dostu bir seçenektir. Kullanmak useColorMode
SVG'lerimizin dolgu rengini dinamik olarak değiştirebiliriz.
UseColorMode, yalnızca karanlık mod uygulandığında kullanılabilir. İlk kez Chakra UI ile karanlık modu mu kullanıyorsunuz? Bu makale, düzgün çalışmasını nasıl sağlayacağınızı gösterecektir.
The useColorMode
seçenek, karanlık mod etkinleştirildikten sonra kullanılabilir.
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>
);
}
Yukarıdaki kod, useColorMode
Onları dinamik hale getirmek için kanca ve SVG. kullanma useColorMode
renk modunu alabilir ve değiştirebiliriz. Renkleri değiştirmek istiyorsanız, ikisinden birini kullanmalısınız. colorMode
ya da toggleColor
Mod işlevi.
Çakra Temaları
Chakra UI'nin temaları, aşağıdakiler kullanılarak uygulanır: Tarz Sistem Teması Belirtimi teknik. Çakradaki temalar, renk paletleyiciden aralığa kadar çeşitli yönleri etkileyebilir.
Sadece içe aktarmanız gerekecek extendTheme
ön ayardaki belirteçleri değiştirmek için tuşları eklerken işlev. Şuna bir bakalım.
sadece bir tane oluşturmanız gerekiyor Theme.js
Başlamak için dosya.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Daha canlı ve çekici hale getirmek için tema nesnesine iki renk daha ekler. Yazılım özelliklerine göre yazı tipleri, kesme noktaları, yazı tipi boyutları, sütun genişlikleri ve daha fazlası için stil işaretleri oluşturabilirsiniz.
Bu tema nesnesinde yeni tanıtılan gelişmiş özelliklerden yararlanmak için önce yüklemeniz gerekir. ChakraProvider
uygulamanın kökünde.
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;
Ondan sonra direkt ChakraProvider
daha önce oluşturduğunuz tema nesnesini kullanmak için. Tüm Çakra bileşenleri artık marka renklerini kullanabilir.
Bazı projeler, herhangi bir şekilde bir stil değişikliği gerektirmek yerine sadece Chakra'nın temel bileşen stilini değiştirmeye ihtiyaç duyabilir.
Bileşen stili nesnesinin bir örneği olarak, işte burada:
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: "",
},
}
Şimdi, sadece değiştireceğiz Button
ve Heading
parçaları.
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;
Varsayılan olarak ayarlanan sınır yarıçapından kurtulabiliriz. Button
kaldırarak baseStyle
. için yazı tipi boyutunu ve yazı tipi düzenini değiştirebilirsiniz. Heading
. Yukarıdaki örnekleri kullanarak, Çakra bileşenlerinin standart stilini nasıl değiştirebileceğimizi anlayabilirsiniz.
Çakra bileşenlerinin stillerini geliştirmek veya değiştirmek, kullanıcı arayüzlerimizin görünümü ve işleyişi üzerinde bize görünürlük ve kontrol sağlar.
Çakra ve Üçüncü Taraf Bileşenleri
Çakra, üçüncü taraf modüllerin stillerinden faydalanmalarını sağlar. Sonuç olarak, üçüncü taraf öğeleri Chakra UI ile birleştirmek, daha az özel bileşen sarmalayıcı gerektirir.
Aşağıdakiler, Çakra fabrikası tarafından desteklenen HTML öğelerinin bir listesidir:
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>
);
}
Next.js'yi entegre ediyoruz Image
yukarıdaki kod parçacığında Çakra kullanıcı arayüzüne sahip bileşen. Daha sonra, bir ChakraNextImage
bileşen ve onun aracılığıyla, Çakra'nın stil aksesuarlarını Image
.
animasyonlar
Chakra UI'larını kullanarak animasyonları tanımlayabilirsiniz. keyframes
yardımcı. Keyframes
bir CSS ana kare tanımı alın ve stillerde kullanabileceğiniz bir nesne döndürün:
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>
);
}
Kullanma keyframes
asistan, burada gördüğünüz animasyonu oluşturabilirsiniz. Animasyon pervanesi, Chakra UI bileşenlerini canlandırmamızı sağlar.
Son adım olarak, geçmek spinAnimation
Chakra UI uygulamalarına animasyonlar eklenebilmesi için Box bileşenine ekleyin.
Sayfa Geçişleri
Kullanıcının sayfalar arasında geçiş yaparken deneyimini iyileştirmek için uygulamalarımıza sayfa geçişleri eklenebilir.
Aşağıda, Chakra UI ile nasıl başarılacağına dair bir örnek verilmiştir:
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;
Sayfa geçişlerini uygulamak için Chakra UI'dan geçiş bileşenlerini kullanın. ScaleFade geçişi yukarıdaki kod satırında kullanılmıştır.
Haber verin ScaleFade
Uygulamanızın yolu hakkında, böylece ekran boyunca hareket ederken geçiş çalışabilir! Nesne, daha sonra gönderebileceğiniz geçerli yol hakkında veri sağlar. ScaleFade
anahtar pervane. InitialScale
ve in prop, geçişin başlangıç ölçeğini oluşturmak ve bileşen oluşturulduğunda gerçekleşmesini sağlamak için kullanılır.
Bu yazıda, Chakra UI'nin sunduğu özelliklerden ve yeteneklerden birkaçına ve mükemmel deneyimimizde bize nasıl yardımcı olduğuna baktık. Ayrıca tema nesneleri oluşturmanın ve küresel stiller geliştirmenin sistemimizin ölçeklenebilirliğini korumaya nasıl yardımcı olabileceğini araştırdık.
Henüz yapmadıysanız, bu makalenin size Çakra UI geliştirme sürecinizi kolaylaştırmak için bazı fikirler verdiğine inanıyoruz.
Yorum bırak