Entwickler werden feststellen, dass Chakra UI ihr nützlichster Partner ist. Als Komponenten-Toolkit für Online-Dienste erleichtert Chakra UI die effiziente Erstellung integrativer Apps.
Aufgrund ihrer Zugänglichkeit und WAI-ARIA-Konformität können die Elemente der Chakra-Benutzeroberfläche mithilfe ihrer API einfach angepasst und neu thematisiert werden. Dies ist jedoch nur die Spitze des Eisbergs hinsichtlich der Vorteile, die es Entwicklern bietet.
In diesem Beitrag werfen wir einen genaueren Blick auf einige der fortgeschritteneren Funktionen der Chakra-Benutzeroberfläche und wie sie Ihnen helfen können, als Programmierer produktiver zu werden.
Was ist die Chakra-Benutzeroberfläche?
Chakra UI ist ein Komponenten-Toolkit, mit dem Entwickler schnell zugängliche und wiederverwendbare Benutzeroberflächenkomponenten für ihre Webanwendungen erstellen können. Es baut auf React auf und verwendet das gestylte System für seine Themen-Engine.
Das Ziel von Chakra UI ist es, Programmierern das Erstellen schöner, reaktionsschneller und zugänglicher Benutzeroberflächen mit minimalem Aufwand zu erleichtern. Das Toolkit enthält eine große Auswahl an gebrauchsfertigen Komponenten, die so konzipiert sind, dass sie sich leicht zusammenstellen und erweitern lassen.
Chakra UI ist Open Source und seine Entwicklung wird von Segment gesponsert.
So installieren Sie die Chakra-Benutzeroberfläche
Sie müssen die folgenden Befehle eingeben, um Chakra in Ihr Projekt zu integrieren:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Sie müssen den ChakraProvider nach der Installation von Chakra UI im Stammverzeichnis Ihrer Anwendung konfigurieren. Je nach verwendetem Framework kann sich dies in Ihrer index.jsx-, index.tsx- oder app.jsx-Datei befinden.
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
function App() {
return (
<ChakraProvider>
<TheRestOfYourApplication />
</ChakraProvider>
)
}
Fortgeschrittene Techniken in der Chakra-Benutzeroberfläche
Generieren von Echtzeit-SVGs
Möglicherweise möchten Sie Ihre SVGs dynamisch aktualisieren, um das aktuelle Design widerzuspiegeln, während Sie neue Themen für Ihre Website erstellen. Dies erfordert die Erstellung unterschiedlicher SVGs für jedes der verschiedenen Themen.
Chakra UI hingegen ist eine benutzerfreundlichere Option. Verwendung der useColorMode
Hook in Chakra UI, können wir die Füllfarbe unserer SVGs dynamisch ändern.
UseColorMode kann nur verwendet werden, wenn der Dunkelmodus implementiert ist. Verwenden Sie zum ersten Mal den Dunkelmodus mit der Chakra-Benutzeroberfläche? Dieser Artikel zeigt Ihnen, wie Sie es richtig zum Laufen bringen.
Das useColorMode
Die Option ist verfügbar, nachdem der Dunkelmodus aktiviert wurde.
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>
);
}
Der obige Code integriert die useColorMode
Hook und SVG, um sie dynamisch zu machen. Verwenden useColorMode
Wir können den Farbmodus abrufen und ändern. Wenn Sie die Farben wechseln möchten, sollten Sie beides verwenden colorMode
oder im toggleColor
Mode-Funktion.
Chakra-Themen
Die Themen der Chakra-Benutzeroberfläche werden mithilfe von angewendet Styled System Theme-Spezifikation Technik. Themen in Chakra können eine Vielzahl von Aspekten beeinflussen, die von der Farbpalette bis zum Abstand reichen.
Sie müssen nur die importieren extendTheme
Funktion beim Hinzufügen der Schlüssel zum Ändern von Tokens in der Voreinstellung. Schauen wir uns das mal an.
Sie müssen nur a erstellen Theme.js
Datei, um loszulegen.
import { extendTheme } from "@chakra-ui/react";
const themes = {
colors: {
brand: {
100: "#ff0000",
80: "#ff1a1a",
},
},
};
const theme = extendTheme(overrides);
export default theme;
Es fügt dem Themenobjekt zwei weitere Farben hinzu, um es lebendiger und ansprechender zu machen. Gemäß den Softwarespezifikationen können Sie Stilmarkierungen für Schriftarten, Haltepunkte, Schriftgrößen, Spaltenbreiten und mehr erstellen.
Um die neu eingeführten erweiterten Funktionen in diesem Themenobjekt nutzen zu können, müssen Sie es zuerst installieren ChakraProvider
an der Wurzel der Anwendung.
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;
Danach leiten Sie ChakraProvider
um das zuvor erstellte Themenobjekt zu verwenden. Alle Chakra-Komponenten dürfen jetzt Markenfarben verwenden.
Bei einigen Projekten muss möglicherweise nur das grundlegende Komponentendesign von Chakra geändert werden, anstatt dass eine Stiländerung in irgendeiner Weise erforderlich ist.
Als Beispiel für das Komponentenstilobjekt hier:
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: "",
},
}
Jetzt ändern wir einfach die Button
und Heading
Teile.
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;
Wir können den Border-Radius entfernen, der standardmäßig für die festgelegt wurde Button
durch Entfernen seiner baseStyle
. Sie können die Schriftgröße und das Schriftlayout für ändern Heading
. Anhand der obigen Beispiele können Sie verstehen, wie wir das Standarddesign von Chakra-Komponenten ändern können.
Das Verbessern oder Ändern der Stile von Chakra-Komponenten gibt uns Sichtbarkeit und Kontrolle über das Erscheinungsbild und die Funktionsweise unserer Benutzeroberflächen.
Chakra und Komponenten von Drittanbietern
Mit Chakra können Module von Drittanbietern von ihrem Stil profitieren. Infolgedessen erfordert die Kombination von Elementen von Drittanbietern mit der Chakra-Benutzeroberfläche weniger proprietäre Komponenten-Wrapper.
Das Folgende ist eine Liste der HTML-Elemente, die von der Chakra-Factory unterstützt werden:
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>
);
}
Wir integrieren die Next.js Image
Komponente mit der Chakra-Benutzeroberfläche im obigen Code-Snippet. Dann richten wir ein ChakraNextImage
Komponente, und durch sie können wir die Stilrequisiten von Chakra weitergeben Image
.
Animation
Sie können Animationen mit Chakra-UIs definieren keyframes
Helfer. Keyframes
Nehmen Sie eine CSS-Keyframe-Definition auf und geben Sie ein Objekt zurück, das Sie in Stilen verwenden können:
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>
);
}
Verwendung der keyframes
Assistent können Sie die Animation erstellen, die Sie hier sehen. Die Animationsstütze ermöglicht es uns, Chakra-UI-Komponenten zu animieren.
Passen Sie als letzten Schritt spinAnimation
in die Box-Komponente, damit Animationen zu den Chakra-UI-Apps hinzugefügt werden können.
Seitenübergänge
Seitenübergänge können unseren Apps hinzugefügt werden, um die Benutzererfahrung beim Wechseln zwischen Seiten zu verbessern.
Im Folgenden finden Sie ein Beispiel dafür, wie Sie dies mit der Chakra-Benutzeroberfläche erreichen:
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;
Um Seitenübergänge zu implementieren, verwenden Sie die Übergangskomponenten von Chakra UI. Der ScaleFade-Übergang wird in der obigen Codezeile verwendet.
Bitte benachrichtigen ScaleFade
über den Pfad Ihrer Anwendung, damit der Übergang funktioniert, wenn Sie sich über den Bildschirm bewegen! Das Objekt liefert Daten über den aktuellen Pfad, an die Sie dann senden können ScaleFade
's wichtigste Requisite. InitialScale
und in prop werden verwendet, um die Anfangsskalierung des Übergangs festzulegen und dies zu bewirken, wenn die Komponente gerendert wird.
In diesem Artikel haben wir uns einige der Funktionen und Möglichkeiten angesehen, die die Chakra-Benutzeroberfläche bietet, und wie sie uns bei unserer perfekten Erfahrung unterstützt. Wir haben auch untersucht, wie die Einrichtung von Themenobjekten und die Entwicklung globaler Stile dazu beitragen können, die Skalierbarkeit unseres Systems aufrechtzuerhalten.
Falls Sie dies noch nicht getan haben, glauben wir, dass dieser Artikel Ihnen einige Ideen gegeben hat, um Ihren Chakra-UI-Entwicklungsprozess zu rationalisieren.
Hinterlassen Sie uns einen Kommentar