Izstrādātāji uzskatīs, ka Chakra UI ir visnoderīgākais partneris. Kā tiešsaistes pakalpojumu komponentu rīku komplekts Chakra UI ļauj viegli efektīvi izveidot iekļaujošas lietotnes.
Pateicoties tā pieejamībai un WAI-ARIA atbilstībai, Chakra lietotāja interfeisa elementus ir vienkārši pielāgot un pārveidot, izmantojot tā API. Tomēr šī ir tikai aisberga redzamā daļa attiecībā uz priekšrocībām, ko tas piedāvā izstrādātājiem.
Šajā ziņojumā mēs sīkāk aplūkosim dažas Chakra UI uzlabotās funkcijas un to, kā tās var palīdzēt jums kļūt produktīvākam programmētājam.
Kas ir Chakra UI?
Chakra UI ir komponentu rīkkopa, kas palīdz izstrādātājiem ātri izveidot pieejamus un atkārtoti lietojamus lietotāja interfeisa komponentus savām tīmekļa lietojumprogrammām. Tas ir izveidots, izmantojot React, un tā motīvu veidošanai izmanto stilizētu sistēmu.
Chakra lietotāja interfeisa mērķis ir atvieglot programmētāju iespēju izveidot skaistas, atsaucīgas un pieejamas lietotāja saskarnes ar minimālu piepūli. Rīku komplektā ir iekļauts plašs lietošanai gatavu komponentu klāsts, kas ir izveidots tā, lai tos varētu viegli salikt un paplašināt.
Chakra UI ir atvērtā koda, un tā izstrādi sponsorē Segment.
Kā instalēt Chakra UI
Lai savā projektā iekļautu čakru, jums būs jāievada šādas komandas:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Pēc Chakra UI instalēšanas jums ir jākonfigurē ChakraProvider lietojumprogrammas saknē. Atkarībā no izmantotā ietvara tas var atrasties failā index.jsx, index.tsx vai app.jsx.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Uzlabotas metodes Chakra UI
Reāllaika SVG ģenerēšana
Iespējams, vēlēsities dinamiski atjaunināt savus SVG, lai tie atspoguļotu pašreizējo dizainu, vienlaikus izveidojot jaunas tēmas savai vietnei. Tāpēc katrai no vairākām tēmām ir jāizveido atsevišķi SVG.
No otras puses, Chakra UI ir lietotājam draudzīgāka iespēja. Izmantojot useColorMode
āķis Chakra UI, mēs varam dinamiski mainīt mūsu SVG aizpildījuma krāsu.
UseColorMode var izmantot tikai tad, kad ir ieviests tumšais režīms. Vai pirmo reizi izmantojat tumšo režīmu ar Chakra UI? Šis raksts parādīs, kā panākt, lai tas darbotos pareizi.
Jūsu darbs IR Klientu apkalpošana useColorMode
opcija ir pieejama pēc tam, kad ir iespējots tumšais režīms.
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>
);
}
Iepriekš minētais kods integrē useColorMode
āķis un SVG, lai padarītu tos dinamiskus. Izmantojot useColorMode
mēs varam izgūt un mainīt krāsu režīmu. Ja vēlaties mainīt krāsas, izmantojiet kādu no tām colorMode
vai toggleColor
Režīma funkcija.
Čakru tēmas
Chakra UI motīvi tiek lietoti, izmantojot Stilizētās sistēmas motīva specifikācija tehnika. Chakra motīvi var ietekmēt dažādus aspektus, sākot no krāsu palete līdz atstarpēm.
Jums būs tikai jāimportē extendTheme
funkciju, vienlaikus pievienojot taustiņus, lai mainītu marķierus sākotnējā iestatījumā. Apskatīsim šo.
Jums vienkārši jāizveido a Theme.js
failu, lai sāktu.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Tas motīva objektam pievieno vēl divas krāsas, lai padarītu to dzīvīgāku un pievilcīgāku. Saskaņā ar programmatūras specifikācijām varat izveidot stila marķierus burtveidoliem, pārtraukuma punktiem, fontu lielumiem, kolonnu platumiem un citiem.
Lai izmantotu jaunieviestās papildu funkcijas šajā motīva objektā, vispirms ir jāinstalē ChakraProvider
lietojumprogrammas saknē.
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;
Pēc tam jūs virzāt ChakraProvider
lai izmantotu iepriekš izveidoto tēmas objektu. Visas čakras sastāvdaļas tagad var izmantot zīmola krāsas.
Dažiem projektiem, iespējams, vienkārši jāmaina Chakras pamata komponentu stils, nevis jāpieprasa stila izmaiņas.
Kā komponenta stila objekta piemērs, šeit tas ir:
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: "",
},
}
Tagad mēs vienkārši pārveidosim Button
un Heading
daļas.
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;
Mēs varam atbrīvoties no apmales rādiusa, kas tika iestatīts pēc noklusējuma Button
noņemot to baseStyle
. Varat mainīt fonta lielumu un burtveidola izkārtojumu Heading
. Izmantojot iepriekš minētos piemērus, jūs varat saprast, kā mēs varam mainīt čakras komponentu standarta stilu.
Chakra komponentu stilu uzlabošana vai mainīšana nodrošina mums redzamību un kontroli pār mūsu lietotāja interfeisu izskatu un darbību.
Čakra un trešo pušu komponenti
Chakra ļauj trešo pušu moduļiem gūt labumu no sava stila. Tā rezultātā, lai apvienotu trešo pušu elementus ar Chakra UI, ir nepieciešams mazāk patentētu komponentu aptinumu.
Šis ir Chakra rūpnīcas atbalstīto HTML elementu saraksts:
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>
);
}
Mēs integrējam Next.js Image
komponents ar Chakra UI koda fragmentā iepriekš. Pēc tam mēs uzstādījām a ChakraNextImage
komponents, un caur to mēs varam nodot Chakra stila rekvizītus Image
.
Izklaide
Varat definēt animācijas, izmantojot Chakra UI keyframes
palīgs. Keyframes
ņemiet CSS atslēgas kadra definīciju un atgrieziet objektu, ko varat izmantot stilos:
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>
);
}
izmantojot keyframes
palīgu, varat izveidot šeit redzamo animāciju. Animācijas rekvizīts ļauj mums animēt Chakra UI komponentus.
Kā pēdējo soli iziet spinAnimation
Box komponentā, lai Chakra UI lietotnēm varētu pievienot animācijas.
Lapu pārejas
Lapu pārejas var tikt pievienotas mūsu lietotnēm, lai uzlabotu lietotāja pieredzi, kad viņi pārvietojas starp lapām.
Šis ir piemērs, kā to panākt, izmantojot 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;
Lai ieviestu lapu pārejas, izmantojiet pārejas komponentus no Chakra UI. Iepriekš minētajā koda rindā tiek izmantota ScaleFade pāreja.
Lūdzu, paziņojiet ScaleFade
par jūsu lietojumprogrammas ceļu, lai pāreja varētu darboties, pārvietojoties pa ekrānu! Objekts nodrošina datus par pašreizējo ceļu, ko pēc tam varat nosūtīt ScaleFade
galvenais balsts. InitialScale
un in prop tiek izmantoti, lai noteiktu pārejas sākuma skalu un lai tas notiktu, kad komponents tiek renderēts.
Šajā rakstā mēs apskatījām dažas no Chakra UI piedāvātajām funkcijām un iespējām un to, kā tas palīdz mums iegūt nevainojamu pieredzi. Mēs esam arī izpētījuši, kā motīvu objektu izveide un globālu stilu izstrāde varētu palīdzēt uzturēt mūsu sistēmas mērogojamību.
Ja vēl neesat to izdarījis, mēs uzskatām, ka šis raksts ir devis jums dažas idejas, kā racionalizēt Chakra UI izstrādes procesu.
Atstāj atbildi