Какво е 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