Какво е Chakra-UI?
Chakra UI е библиотека с модулни компоненти, която съдържа прост API, който дава възможност да се правят приложения, без да се налага да се притеснявате за изграждането на самите компоненти. Той използва Emotion за стилизиране и персонализиране, което позволява на разработчиците да стилизират вътре в детайлите със стилови реквизити. Компонентите също са съвместими с тъмен режим и използват оформление на кутия и стек.
Инсталация
- Ще използвам nextjs.
yarn create next-app <my-app>
- Инсталирайте пакети:
cd <my-app> yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
Използване
Трябва също да настроите ChakraProvider в корена на приложението си:
import * as React from "react" // 1. import `ChakraProvider` component import { ChakraProvider } from "@chakra-ui/react" function App() { // 2. Use at the root of your app return ( <ChakraProvider> <App /> </ChakraProvider> ) }
Настройте Chakra-UI със next
- Обвийте компонента Component с компонента ChakraProvider.
import { ChakraProvider } from '@chakra-ui/react' function MyApp({ Component, pageProps }) { return ( <ChakraProvider> <Component {...pageProps} /> </ChakraProvider> ) } export default MyApp
Сега можем да използваме chakra-UI компоненти.
Пример за тематизиране
Chakra UI предоставя функция extendTheme, която дълбоко обединява темата по подразбиране с вашите персонализации.
// 1. Import the extendTheme function import { extendTheme } from "@chakra-ui/react" // 2. Extend the theme to include custom colors, fonts, etc const colors = { brand: { 900: "#1a365d", 800: "#153e75", 700: "#2a69ac", }, } const theme = extendTheme({ colors }) // 3. Pass the `theme` prop to the `ChakraProvider` function App() { return ( <ChakraProvider theme={theme}> <App /> </ChakraProvider> ) }
Как да импортирате компоненти
Винаги импортирайте компонентите и помощните програми като именуван импорт от пакета @chakra-ui/react.
import { Button, Text, Heading, Box, Link, useTheme } from '@chakra-ui/react' const Index = () => { return <Heading>Heading 1</Heading> } export default Index
Персонализирани стилове
Има два начина за персонализиране на стиловете.
- Реквизити за стил: С реквизити за стил можете да използвате почти всяко свойство на CSS като реквизити. „Вижте всички налични реквизити за стил.“
const Index = () => { return ( <Heading color='red' fontSize='5rem'> Heading 1 </Heading> ) }
- SX prop: С sx prop можете да използвате всеки персонализиран стил като обект. Цялото име на свойство трябва да е camelcase.
const Index = () => { return ( <Heading sx={{ color: 'red', fontSize: '5rem', }} > Heading 1 </Heading> ) }
Пример за цветови режим
ChakraProvider автоматично използва цветен режим, когато се използва в основата на приложението. По подразбиране повечето компоненти на Chakra са съвместими с тъмен режим. За да управлявате цветния режим ръчно във вашето приложение, използвайте куките useColorMode или useColorModeValue.
useColorMode:
function Example() { const { colorMode, toggleColorMode } = useColorMode() return ( <header> <Button onClick={toggleColorMode}> Toggle {colorMode === "light" ? "Dark" : "Light"} </Button> </header> ) }
Лек режим
Тъмен режим
Често използвани компоненти
Ето някои от компонентите, които използвам най-често.
Това е само кратък преглед на потребителския интерфейс на Chakra и неговите функции. На официалния сайт можете да прочетете повече за цветови режими, градиенти, глобални стилове и др.
Между другото, търся нова възможност в компания, където мога да осигуря голяма стойност с уменията си. Ако сте специалист по набиране на персонал, търсите някой, който има умения в разработката на уеб интерфейси и страстен към революционизирането на света, не се колебайте да се „свържете с мен“. Освен това съм отворен да говоря за всеки проект на свободна практика.
Контакти
Twitter: @Dev_suite
Instagram: @Dev_suite