Chakra UI — это модульная доступная библиотека компонентов, которая «дает вам строительные блоки, необходимые для создания ваших приложений React». Эта библиотека может помочь ускорить процесс разработки внешнего интерфейса за счет использования повторно используемых, настраиваемых готовых к использованию компонентов.
Звучит здорово, с чего нам начать?
Установите Chakra UI через ваш любимый терминал, используя следующие команды в NPM или Yarn:
пряжа добавить @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
После завершения установки оберните компонент ‹ChakraProvider› в файл index.js следующим образом:
Вот и все! Теперь мы можем импортировать и использовать компоненты из библиотеки пользовательского интерфейса Chakra. (Обратите внимание, что эта библиотека также совместима с Next, Gatsby, Blitz, Remix, Redwood и Vite. Полный список см. в документации по адресу https://chakra-ui.com/guides/first-steps).
Каковы некоторые из примечательных особенностей пользовательского интерфейса Chakra?
Пользовательский интерфейс Chakra поставляется со встроенными цветовыми переменными/темами, вдохновленными цветовой палитрой Tailwind CSS. Также есть поддержка переключаемых цветовых режимов. Полный список тем по умолчанию можно найти по адресу https://chakra-ui.com/docs/styled-system/theming/theme. Вот фрагмент цветовой схемы по умолчанию:
Чтобы использовать цветовой режим, необходимо обновить конфигурацию темы, например:
Затем нужно добавить ColorModeScript в файл index.js.
Чтобы использовать чередование цветовых схем, необходима функция. Вот фрагмент кнопки-переключателя между светлым и темным режимом:
Почти каждое свойство можно сохранить как пользовательскую тему, что позволяет быстро повторно использовать все стили!
Пользовательский интерфейс Chakra позволяет использовать реквизиты стиля, которые можно передать непосредственно компоненту для изменения стиля. Полный список доступных стилевых реквизитов можно найти в документации: https://chakra-ui.com/docs/styled-system/features/style-props. Вот пример компонента ‹Box› с разными переданными реквизитами стиля:
Пользовательский интерфейс Chakra имеет несколько компонентов, которые в основном используются для определения макета страницы. Вот несколько примеров:
Блок: один из самых основных компонентов макета. Отображает элемент ‹div›. В этом конкретном примере ‹div› имеет фоновый цвет «помидор», занимает 100% ширины экрана, отступы 4 пикселя и цвет шрифта «белый».
Центр: центрирует детей внутри себя
Контейнер: ограничивает ширину своих дочерних элементов указанным значением (maxWidth по умолчанию составляет 60 символов, но может быть изменено в темах или установлено пользовательское значение).
Стек (VStack и HStack): позволяет легко складывать дочерние элементы с необязательным интервалом между ними. VStack используется, когда направление стека чисто вертикальное, а HStack используется для чисто горизонтального стека. Flex может быть лучшим вариантом, если есть несколько строк/столбцов.
Flex: создает элемент ‹div› (аналогичный Box, но с «display: flex»). Это можно использовать в сочетании с элементом Spacer, который создает пустое пространство, которое можно настроить в соответствии с потребностями макета.
Пользовательский интерфейс Chakra обеспечивает высокий уровень настройки за счет использования тем. Все компоненты изначально наследуют тему по умолчанию, но их можно переопределить или расширить. Также могут быть указаны варианты существующих компонентов. Темы могут быть переопределены или расширены с помощью функции extendTheme. Например:
Итак, каковы преимущества использования библиотеки компонентов?
- Экономит время на фронтенд-разработке
- Соответствие стиля
- Цветовые темы
- Встроенная поддержка светлого/темного режима
- Может создавать собственные повторно используемые компоненты
- Активное интернет-сообщество (более 27 000 звезд на GitHub)
- Все компоненты соответствуют рекомендациям ARIA-WAI (веб-доступность).
- Совместимость с сборником рассказов! (более простое тестирование)
Каковы потенциальные недостатки использования Chakra UI?
- Может потратить много времени на переопределение существующих стилей/цветовых тем для создания желаемого дизайна.
- Более сильная зависимость от встроенных стилей может привести к менее читаемому коду (слишком много свойств стиля, передаваемых компоненту, может быстро запутаться)
- Могут возникать ошибки, если импорт компонентов выполнен неправильно и/или забыт (упс!)
- Потенциал чувствовать себя ограниченным объемом готовых компонентов
Заключение
В наши дни, безусловно, нет недостатка в инструментах для разработчиков. Ищете библиотеку для повышения производительности веб-разработки переднего плана? Пользовательский интерфейс Chakra может иметь именно то решение, которое вы ищете! Несмотря на то, что из-за предварительно созданного характера ресурсов пользовательского интерфейса Chakra вы можете чувствовать себя творчески подавленным, эта библиотека может сэкономить много времени, предлагая готовые к использованию компоненты. Не нравится, как выглядят некоторые стили по умолчанию? Пользовательский интерфейс Chakra предлагает почти неограниченные возможности настройки, и эти изменения можно использовать в будущих компонентах или проектах благодаря темам! В целом это кажется фантастическим инструментом, который хорошо взаимодействует с React. Ознакомьтесь с руководством по началу работы здесь, если вы заинтересованы в том, чтобы попробовать эту библиотеку компонентов! https://chakra-ui.com/guides/first-steps
