Привет! В этой статье объясняется Как использовать интерфейс Chakra UI React Library и кодировать простую адаптивную целевую страницу. Страница будет построена только из Chakra компонентов, элементы HTML использоваться не будут. Для новичков Chakra UI — это библиотека, позволяющая создавать потрясающие современные веб-приложения с использованием различных компонентов макета. Он отличается от других фреймворков пользовательского интерфейса тем, что по умолчанию предлагает специальные возможности и поддержку темного режима. Спасибо за чтение!

С Chakra UI вы тратите меньше времени на создание адаптивных и красивых веб-сайтов. Если вы хотите создать веб-приложение, позволяющее пользователям переключаться между различными цветовыми режимами с минимальными строками кода, то Chakra UI — отличный выбор.

✨ Темы

В этой статье вы узнаете о различных компонентах пользовательского интерфейса Chakra и о том, как их использовать для создания полностью адаптивной веб-страницы с помощью React.js.

Без дальнейших церемоний, давайте посмотрим, что вы узнаете из этой статьи.

  • 👉 5 ключевых особенностей Chakra UI
  • 👉 How to setup Chakra UI в приложении Create-React
  • 👉 How to style Chakra UI компонентов
  • 👉 Кодирование Nav component
  • 👉 Кодирование Hero component
  • 👉 Кодирование About Us component
  • 👉 Кодирование Services component
  • 👉 Кодирование Footer component
  • 👉 Как включить Chakra UI Dark Mode
  • 🎁 Conclusions и бесплатные ресурсы

✨ Пользовательский интерфейс чакры, основные функции

Компоненты макета, предоставляемые интерфейсом пользователя Chakra, являются современными и доступными. Это означает, что пользователи с ограниченными возможностями могут получить доступ к вашему веб-сайту без каких-либо ограничений, независимо от их инвалидности. С Chakra UI инвалидность не является препятствием для отличного взаимодействия с пользователем.

🚀 Широкие возможности настройки

Каждый веб-компонент, предоставляемый Chakra UI, легко настраивается. У вас есть полный контроль над их внешним видом и поведением. Пользовательский интерфейс Chakra позволяет редактировать и расширять компоненты пользовательского интерфейса в соответствии с вашими потребностями. Например, в пользовательском интерфейсе Chakra всего несколько значков, но вы можете легко расширить библиотеку значков.

🚀 Поддержка тем и темного режима

Вручную предоставлять различные варианты тем для пользователей на вашем веб-сайте может быть утомительной задачей. Но с пользовательским интерфейсом Chakra вам не нужно много кодировать, потому что все компоненты имеют встроенную поддержку темного режима.

Вы также можете создавать собственные темы или редактировать темы по умолчанию, предоставляемые пользовательским интерфейсом Chakra.

🚀 Простая кривая обучения

Пользовательский интерфейс Chakra имеет короткую кривую обучения. Вам не нужно тратить много времени на изучение того, как использовать веб-компоненты. Если вы знакомы с CSS или другими библиотеками пользовательского интерфейса, такими как Tailwind CSS, вы освоите Chakra UI через несколько минут после прочтения документации.

🚀 Отличная документация

Пользовательский интерфейс Chakra имеет отличную документацию, по которой новым и существующим пользователям легко ориентироваться и быстро узнавать о его функциях. Документация по пользовательскому интерфейсу Chakra удобна для разработчиков и пользователей. С пользовательским интерфейсом Chakra вы, скорее всего, не столкнетесь с ошибками, связанными с пользовательским интерфейсом.

✨ Настройка пользовательского интерфейса чакры с помощью CRA

Как было сказано ранее, я проведу вас через создание полностью адаптивного и современного веб-сайта с использованием пользовательского интерфейса Chakra. Перед этим давайте установим необходимые инструменты.

  • Откройте свой терминал
  • Запустите приведенный ниже код, чтобы автоматически установить пользовательский интерфейс Chakra с помощью приложения create-react-app (CRA).
$ npx create-react-app my-app --template @chakra-ui

В противном случае вы можете установить CRA и Chakra UI вручную:

$ npx create-react-app react-chakra
$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Откройте файл index.js в своем проекте CRA и добавьте ChakraProvider:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ChakraProvider } from '@chakra-ui/react';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>
);

Откройте файл App.js и скопируйте следующий код:

import AboutUs from './components/AboutUs';
import ContactUs from './components/ContactUs';
import Footer from './components/Footer';
import Hero from './components/Hero';
import Nav from './components/Nav';
import Services from './components/Services';
import Testimonials from './components/Testimonials';
 
function App() {
  return (
    <div>
      <Nav />
      <Hero />
      <AboutUs />
      <Services />
      <Testimonials />
      <ContactUs />
      <Footer />
    </div>
  );
}
 
export default App

Из приведенного выше фрагмента кода:

  • Я создал структуру веб-страницы, разделив ее на 7 различных компонентов — Nav, Hero, About Us и т. д.
  • Идем дальше и создаем эти компоненты в папке src/components.

После того, как вы успешно настроили свой проект CRA с помощью Chakra UI, давайте узнаем, как стилизовать компоненты пользовательского интерфейса Chakra.

✨ Как стилизовать компоненты чакры

В отличие от других библиотек пользовательского интерфейса, стили компонентов пользовательского интерфейса Chakra создаются путем передачи атрибутов CSS в качестве свойств веб-компонентам. Это упрощает редактирование макета различных веб-компонентов, уменьшая при этом количество стилей, которые необходимо написать.

Давайте рассмотрим пример:

import React from 'react';
import { Text, Box, Flex } from '@chakra-ui/react';
 
const Example = () => {
  return (
    <Box>
      <Flex
        alignItems="center"
        height="100vh"
        bg="red.400"
        justifyContent="space-between"
        p="16"
      >
        <Text fontSize="3xl" color="green.700">
          Hello World
        </Text>
        <Text>Welcome to Chakra UI</Text>
      </Flex>
    </Box>
  );
};
 
export default Example;

Из приведенного выше фрагмента кода:

  • Я импортировал три компонента из Chakra UI.
  • Текст отображает текст на наших веб-страницах. Он принимает различные реквизиты, такие как fontSize, color и другие атрибуты, связанные с текстом.
  • Chakra UI имеет библиотеку цветов, которые используются в этом формате - color. opacity. Например, blue.900 означает очень темный вариант синего, а blue.50 — самый светлый. Проверьте документы для получения дополнительной информации.
  • Box совпадает с тегом div.
  • Flex представляет тег div с отображением flex. Он также принимает различные реквизиты — bg означает background color и padding.

Теперь мы можем начать кодировать каждый раздел веб-страницы. По мере продвижения в этой статье вы узнаете больше о различных компонентах, доступных в пользовательском интерфейсе Chakra.

✨ Кодирование навигационного компонента

Этот компонент содержит панель навигации — логотип и строку меню веб-страницы.

Давайте рассмотрим код ниже:

import React, { useState } from 'react';
import { Text, Flex, Spacer } from '@chakra-ui/react';
 
const Nav = () => {
  const [scroll, setScroll] = useState(false);
 
  const changeScroll = () =>
    document.body.scrollTop > 80 || document.documentElement.scrollTop > 80
      ? setScroll(true)
      : setScroll(false);
 
  window.addEventListener('scroll', changeScroll);
 
  return (
    <Flex
      h="10vh"
      alignItems="center"
      p="6"
      boxShadow={scroll ? 'base' : 'none'}
      position="sticky"
      top="0"
      zIndex="sticky"
      w="full"
    >
      <Text fontSize="xl" fontWeight="bold">
        Chakra Sample
      </Text>
 
      <Spacer />
 
      <Flex alignItems="center">
        <Text fontSize="md" mr="10">
          About
        </Text>
        <Text fontSize="md">More Apps</Text>
      </Flex>
    </Flex>
  );
};
 
export default Nav;

Из приведенного выше фрагмента кода:

  • Я импортировал компоненты Text, Flex и Spacer из интерфейса Chakra.
  • Spacer component создает пространство между гибкими элементами, аналогично свойству CSS justify-content: space-between.
  • Функция changeScroll() поднимает панель навигации, когда пользователь прокручивает веб-страницу вниз.
  • Состояние прокрутки используется для переключения свойства boxShadow, когда пользователь прокручивает веб-страницу.

👉 СозданиеHamburger Menuдля небольших экранов

Здесь мы узнаем о компоненте Drawer в пользовательском интерфейсе Chakra. Компонент Drawer — это панель, которая выдвигается за край экрана, когда происходит действие.

Давайте рассмотрим этот код

import {
  Drawer,
  DrawerBody,
  DrawerHeader,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
} from '@chakra-ui/react';
 
function DrawerExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const btnRef = React.useRef();
 
  return (
    <>
      <Button ref={btnRef} colorScheme="blue" onClick={onOpen}>
        Open
      </Button>
      <Drawer
        isOpen={isOpen}
        placement="right"
        onClose={onClose}
        finalFocusRef={btnRef}
      >
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>Menu Bar</DrawerHeader>
 
          <DrawerBody>
            <Text>Hello </Text>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  );
}
export default DrawerExample;

Из приведенного выше фрагмента кода:

  • Я импортировал Drawer, DrawerOverlay, DrawerContent, DrawerBody,
  • Drawer — родительский компонент. У него есть дочерний компонент DrawerContent, содержащий подкомпоненты, такие как DrawerHeader, DrawerBody и DrawerFooter.
  • Эти подкомпоненты делят содержимое компонента Drawer на три части. Хотя размер шрифта содержимого DrawerHeader больше, чем у остальных.
  • DrawerOverlay делает видимым на странице только компонент Drawer, а DrawerCloseButton предоставляет кнопку закрытия, которая закрывает Drawer.
  • Когда вы нажимаете кнопку Открыть, он автоматически отображает Drawer. Подробнее о компоненте Drawer здесь.

Давайте создадим DrawerComponent для нашей веб-страницы:

👉 1# — ОткройтеApp.jsи добавьте следующее:

import React, { useRef } from 'react';
import { useDisclosure } from '@chakra-ui/react';
...
 
function App() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const btnRef = useRef();
 
  return (
    <Box>
      <Nav ref={btnRef} onOpen={onOpen} />
      ....
      <DrawerComponent isOpen={isOpen} onClose={onClose} btnRef={btnRef} />
    </Box>
  );
}
 
export default App

Из приведенного выше фрагмента кода:

  • useDisclosure() — это настраиваемый хук, который обрабатывает действия открытия, закрытия или переключения.
  • btnRef добавляется в качестве ссылки к значку гамбургера для toggle открытия и закрытия ящика.

👉2# — откройтеsrc/Nav.jsи добавьте реквизиты ref иonOpenк значку гамбургера

import React, { useState } from 'react';
import {
  Text,
  Flex,
  Spacer,
  IconButton,
  useColorMode,
  useColorModeValue,
  useMediaQuery,
  Icon,
} from '@chakra-ui/react';
import { MoonIcon, SunIcon } from '@chakra-ui/icons';
import { FaAlignJustify } from 'react-icons/fa';
 
const Nav = ({ onOpen, ref }) => {
  const [scroll, setScroll] = useState(false);
  const { colorMode, toggleColorMode } = useColorMode();
  const navBg = useColorModeValue('white', 'blackAlpha.200');
  const [isLargerThan48] = useMediaQuery('(min-width: 48em)');
 
  const changeScroll = () =>
    document.body.scrollTop > 80 || document.documentElement.scrollTop > 80
      ? setScroll(true)
      : setScroll(false);
 
  window.addEventListener('scroll', changeScroll);
 
  return (
    <Flex
      h="10vh"
      alignItems="center"
      p="6"
      boxShadow={scroll ? 'base' : 'none'}
      position="sticky"
      top="0"
      zIndex="sticky"
      w="full"
      bg={navBg}
    >
      <Text fontSize="xl" fontWeight="bold">
        Chakra Sample
      </Text>
 
      <Spacer />
 
      <Flex alignItems="center">
        <IconButton mr="10" w={6} h={6} p={5} onClick={toggleColorMode}>
          {colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
        </IconButton>
 
        {isLargerThan48 ? (
          <>
            <Text fontSize="md" mr="10">
              About
            </Text>
            <Text fontSize="md">More Apps</Text>
          </>
        ) : (
          // ------ The ref and OnOpen function is added -----
          <IconButton ref={ref} onClick={onOpen}>
            <Icon as={FaAlignJustify} />
          </IconButton>
        )}
      </Flex>
    </Flex>
  );
};
 
export default Nav

👉3# — Создайтеsrc/DrawerComponent.js. Здесь будет содержимое ящика:

import React from 'react';
import {
  Drawer,
  DrawerBody,
  DrawerHeader,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
  Link,
  Flex,
} from '@chakra-ui/react';
 
const DrawerComponent = ({ isOpen, onClose, btnRef }) => {
  return (
    <Drawer
      isOpen={isOpen}
      placement="right"
      onClose={onClose}
      finalFocusRef={btnRef}
      zIndex="popover"
    >
      <DrawerOverlay />
 
      <DrawerContent>
        <DrawerCloseButton />
        <DrawerHeader>Chakra</DrawerHeader>
 
        <DrawerBody>
          <Flex flexDirection="column">
            <Link mb="5">About</Link>
            <Link>More Apps</Link>
          </Flex>
        </DrawerBody>
      </DrawerContent>
    </Drawer>
  );
};
 
export default DrawerComponent;

✨ Создание компонента героя

Здесь вы узнаете о хуке useMediaQuery, различных точках останова и о том, как экран реагирует на различные размеры экрана в Chakra UI.

import {
  Box,
  Button,
  Flex,
  Image,
  Spacer,
  Text,
  useMediaQuery,
} from '@chakra-ui/react';
import React from 'react';
import chakraHero from '../assets/chakraHero.jpg';
 
const Hero = () => {
  const [isLargerThan62] = useMediaQuery('(min-width: 62em)');
 
  return (
    <Flex
      alignItems="center"
      w="full"
      px={isLargerThan62 ? '16' : '6'}
      py="16"
      minHeight="90vh"
      justifyContent="space-between"
      flexDirection={isLargerThan62 ? 'row' : 'column'}
    >
      <Box mr={isLargerThan62 ? '6' : '0'} w={isLargerThan62 ? '60%' : 'full'}>
        <Text
          fontSize={isLargerThan62 ? '5xl' : '4xl'}
          fontWeight="bold"
          mb="4"
        >
          {' '}
          Let's scale your business
        </Text>
 
        <Text mb="6" fontSize={isLargerThan62 ? 'lg' : 'base'} opacity={0.7}>
          Hire professionals who will help your business make 10X
        </Text>
 
        <Button
          w="200px"
          colorScheme="blue"
          variant="solid"
          h="50px"
          size={isLargerThan62 ? 'lg' : 'md'}
          mb={isLargerThan62 ? '0' : '10'}
        >
          HIRE US
        </Button>
      </Box>
 
      <Spacer />
 
      <Flex
        w={isLargerThan62 ? '40%' : 'full'}
        alignItems="center"
        justifyContent="center"
      >
        <Image src={chakraHero} alt="Chakra UI" />
      </Flex>
    </Flex>
  );
};
 
export default Hero;

Из приведенного выше фрагмента кода:

  • Компонент Hero возвращает родительский компонент Flex, который содержит Box и другой компонент Flex.
  • Компонент Box содержит компоненты Text и Button, а дочерний компонент Flex содержит изображение.
  • Я также импортировал хук useMediaQuery, который проверяет, соответствует ли размер экрана пользователя указанной точке останова. Он возвращает массив логических значений, представляющих каждую точку останова.
  • Переменная isLargerThan62 имеет значение false, если размер экрана меньше 62em, и значение true, если нет.
  • isLargerThan62 также деструктурируется из массива логических значений, возвращаемых хуком useMediaQuery. Ниже приведены предварительно определенные контрольные точки, доступные в пользовательском интерфейсе Chakra. Эти точки останова также могут быть расширены или настроены.

✨ Программирование о нас Компонент

В этом разделе вы узнаете, как использовать стороннюю библиотеку значков в пользовательском интерфейсе Chakra при создании компонента AboutUs.

Давайте рассмотрим код ниже

import React from 'react';
import { Flex, Spacer, Text, useMediaQuery, Icon } from '@chakra-ui/react';
import { FaTools, FaHandshake, FaStar } from 'react-icons/fa';
 
const AboutUs = () => {
  const [isLargerThan48] = useMediaQuery('(min-width: 48em)');
 
  const array = [
    {
      id: 1,
      text: ' Solving world ... [truncated]',
      icon: FaTools,
    },
    {
      id: 2,
      text: 'Through team work, ... [truncated]',
      icon: FaHandshake,
    },
    {
      id: 3,
      text: 'Five star service with ... [truncated]',
      icon: FaStar,
    },
  ];
 
  return (
    <Flex
      minH="70vh"
      alignItems="center"
      justifyContent="space-between"
      w="full"
      py="16"
      px={isLargerThan48 ? '16' : '6'}
      flexWrap="wrap"
      flexDirection={isLargerThan48 ? 'row' : 'column'}
    >
      {array.map((arr) => (
        <>
          <Flex
            height="300px"
            bg="blackAlpha.200"
            width={isLargerThan48 ? '32%' : 'full'}
            shadow="md"
            p="6"
            alignItems="center"
            justifyContent="center"
            borderRadius="md"
            flexDirection="column"
            textAlign="center"
            mb={isLargerThan48 ? '0' : '4'}
            border="1px solid #C4DDFF"
          >
            <Icon as={arr.icon} boxSize={14} color="blue.600" mb="5" />
            <Text>{arr.text}</Text>
          </Flex>
 
          <Spacer />
        </>
      ))}
    </Flex>
  );
};
 
export default AboutUs;

Из приведенного выше фрагмента кода:

  • Я установил пакет под названием react-icons и импортировал FaTools, FaHandshake и FaStar.
  • Chakra UI не имеет обширной библиотеки иконок, но предоставляет простой способ расширения пакета. Подробнее об использовании сторонней библиотеки иконок.
  • useMediaQuery проверяет, больше ли размер экрана, чем 48em. isLargerThan48 содержит логическое значение, возвращенное из useMediaQuery.
  • Array удерживает содержимое для отображения на экране, а затем отображает содержимое в поле зрения.

✨ Компонент услуг

Этот компонент использует изображение слева, которое можно использовать для представления команды, стоящей за вашим проектом.

Давайте проанализируем код ниже:

import {
  Flex,
  Spacer,
  Image,
  Text,
  Button,
  useMediaQuery,
} from '@chakra-ui/react';
import React from 'react';
import teamImage from '../assets/teamImage.jpg';
 
const Services = () => {
  const [isLargerThan62] = useMediaQuery('(min-width: 62em)');
 
  return (
    <Flex
      width="full"
      minHeight="70vh"
      alignItems="center"
      px={isLargerThan62 ? '16' : '6'}
      py="16"
      justifyContent="center"
      flexDirection={isLargerThan62 ? 'row' : 'column'}
    >
      <Flex
        w={isLargerThan62 ? '40%' : 'full'}
        mb={isLargerThan62 ? '0' : '6'}
        alignItems="center"
        justifyContent="center"
      >
        <Image src={teamImage} alt="Chakra Team" w="full" />
      </Flex>
 
      <Spacer />
 
      <Flex
        w={isLargerThan62 ? '60%' : 'full'}
        flexDirection="column"
        ml={isLargerThan62 ? '7' : '0'}
      >
        <Text fontSize={isLargerThan62 ? '5xl' : '4xl'} fontWeight="bold">
          We build, We revive
        </Text>
 
        <Text mb="6" opacity="0.8">
          Your business needs to be .. [truncated]
        </Text>
 
        <Button width="200px" size="lg" colorScheme="blue">
          CONTACT US
        </Button>
      </Flex>
    </Flex>
  );
};
 
export default Services;

Из приведенного выше кода Chakra UI предоставляет Image component, который используется для отображения изображений. Он также принимает те же реквизиты, что и тег IMG в HTML.

✨ Кодирование компонента нижнего колонтитула

В этом разделе мы создадим нижний колонтитул веб-страницы и узнаем о компоненте «Ссылка» в пользовательском интерфейсе Chakra.

import { Flex, Text, Link } from '@chakra-ui/react';
import React from 'react';
 
const Footer = () => {
  return (
    <Flex
      w="full"
      bg="blackAlpha.50"
      minHeight="20vh"
      flexDirection="column"
      alignItems="center"
      textAlign="center"
      justifyContent="center"
    >
      <Text mb="3">
        Provided by{' '}
        <Link href="https://appseed.us" isExternal color="blue.500">
          AppSeed
        </Link>
      </Text>
      <Text opacity="0.5">Open-Source Sample - Buit with Chakra UI</Text>
    </Flex>
  );
};
 
export default Footer;

Из приведенного выше фрагмента кода:

  • Link — это компонент, который используется для перехода к различным частям веб-сайта или внешнего ресурса.
  • Link принимает реквизит isExternal для ссылок на внешние ресурсы.

✨ Включить темный режим

В этом разделе объясняется, как включить темный режим и добавить собственные цветовые схемы с помощью файла useColorModeValue. Вот шаги:

👉 #1 — Создайте файл theme.js в папке src и импортируйте extendTheme

//in theme.js
 
import { extendTheme } from '@chakra-ui/react';

👉 #2 — Создайте объект конфигурации, содержащий два свойства — initialColorMode и useSystemColorMode.

import { extendTheme } from '@chakra-ui/react';
const config = {
  initialColorMode: 'light',
  useSystemColorMode: false,
};

Из приведенного выше фрагмента кода:

  • initialColorMode представляет начальный цветовой режим, отображаемый при первом посещении сайта пользователем.
  • useSystemColorMode - может быть как истинным, так и ложным.

👉 #3 — Создайте переменную темы и экспортируйте конфигурацию, используя extendTheme.

import { extendTheme } from '@chakra-ui/react';
const config = {
  initialColorMode: 'light',
  useSystemColorMode: false,
};
const theme = extendTheme({ config });
 
export default theme;

👉 #4 — Редактируйтеindex.js file, чтобы использоватьChakraProvider

Импортируйте ChakraProvider и ColorModeScript из пользовательского интерфейса Chakra и темы из theme.js.

import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import theme from './theme'

👉 #5 — Разрешить доступ к настройкам темы (все компоненты)

import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import theme from './theme';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ChakraProvider>
    <ColorModeScript initialColorMode={theme.config.initialColorMode} />
    <App />
  </ChakraProvider>
);

Наконец, мы настроили темный режим в нашем веб-приложении. Далее давайте узнаем, как переключаться между светлым и темным цветовыми режимами.

✨ Переключение режима dark/light

В этом разделе мы создадим переключатель, который можно использовать для переключения между светлым и темным режимами.

👉 1# — откройте src/components/Nav.js и импортируйте следующее:

import { useColorMode, useColorModeValue } from '@chakra-ui/react';
 
/* 
  useColorMode is a hook that selects and toggles between different colour modes.
  useColorModeValue is a hook that allows you to select the colour you want a Chakra UI component to change to.
*/

👉 2# — объявить хуки в компоненте.

import { useColorMode, useColorModeValue } from '@chakra-ui/react';
 
const Nav = () => {
  const { colorMode, toggleColorMode } = useColorMode();
  const navBg = useColorModeValue('white', 'blackAlpha.200');
  ....
  ....
    return (
    <Flex
      bg={navBg}
    >
    ....
    ....
    </Flex>
  )
}
 
export default Nav;

Из приведенного выше фрагмента кода

  • colorMode содержит текущую схему colour, а toggleColorMode — это функция, которая изменяет схему colour со светлой на темную.
  • navBg — это переменная, определяющая точный цвет компонента Flex в обоих цветовых режимах. В light mode цвет фона будет white, а в dark mode — blackAlpha.200.

👉 3# — добавьте значок, который переключает цветовой режим при нажатии

import { useColorMode, useColorModeValue, Icon } from '@chakra-ui/react';
import { MoonIcon, SunIcon } from '@chakra-ui/icons';
 
const Nav = () => {
  const { colorMode, toggleColorMode } = useColorMode();
  const navBg = useColorModeValue('white', 'blackAlpha.200');
  ....
  ....
    return (
    <Flex
      bg={navBg}
    >
    <IconButton onClick={toggleColorMode}>
      {colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
    </IconButton>
  ....
    ....
    </Flex>
  )
}
 
export default Nav;

Из приведенного выше фрагмента кода:

  • Если colorMode светлый, отображается значок Луны, в противном случае отображается значок Солнца.
  • При щелчке по значку также вызывается функция toggleColorMode.

✨ Выводы и ресурсы

В этой статье мы смогли создать полноценную и полностью адаптивную веб-страницу с помощью пользовательского интерфейса Chakra. Вы также узнали о различных компонентах макета, доступных в пользовательском интерфейсе Chakra.

Пользовательский интерфейс Chakra позволяет создавать современные веб-сайты с меньшим количеством кода. Благодаря удобной для навигации документации вы можете узнать о различных компонентах макета и функциях пользовательского интерфейса Chakra.

Он обеспечивает чистый и эффективный способ изменения цветовых режимов с использованием локального хранилища. Если вы хотите создать веб-сайт, который позволяет пользователям выбирать различные цветовые схемы, пользовательский интерфейс Chakra — отличный выбор.

Спасибо за прочтение! Для получения дополнительных ресурсов не стесняйтесь обращаться к Бесплатным шаблонам пользовательского интерфейса Chakra (кураторский список)

✨ Чакра приборной панели Аргона

Начните свою разработку с инновационного шаблона администрирования для пользовательского интерфейса Chakra и React. Если вам нравится внешний вид самой популярной тенденции дизайна прямо сейчас, Argon Dashboard Chakra, вы влюбитесь в эту панель! Он включает в себя огромное количество компонентов, созданных для того, чтобы сочетаться друг с другом и выглядеть потрясающе.

Argon Dashboard Chakra состоит из более чем 70 отдельных элементов внешнего интерфейса, таких как кнопки, поля ввода, панели навигации, вкладки навигации, карточки или оповещения, что дает вам свободу выбора и комбинирования.

✨ Панель управления Purity UI

Эта бесплатная панель инструментов пользовательского интерфейса Chakra поставляется с предварительно созданными блоками дизайна, поэтому процесс разработки является бесшовным, переход с наших страниц на настоящий веб-сайт очень прост.

Если вы хотите получить вдохновение или просто показать что-то своим клиентам, вы можете начать разработку с наших готовых примеров страниц. Вы сможете быстро настроить базовую структуру для своего веб-проекта.

✨ Панель пользовательского интерфейса Horizon

Пользовательский интерфейс Horizon создан, чтобы сэкономить много времени при переходе от прототипирования к полнофункциональному коду благодаря таким категориям страниц, как страница NFT, информационная панель, канбан и т. д. Пользовательский интерфейс Horizon также поставляется с готовыми карточками дизайна, что упрощает процесс разработки; переход от кода к реальному веб-сайту или веб-приложению очень прост.

  • 👉 Horizon UI — ЖИВАЯ Демоверсия
  • 👉 Horizon UI — Страница товара