Chakra UI — это комплексная библиотека доступных, повторно используемых и компонуемых компонентов React, которая упрощает разработку современных веб-приложений и веб-сайтов. Библиотека предлагает широкий спектр компонентов, которые можно легко комбинировать для создания сложных пользовательских интерфейсов, придерживаясь при этом лучших практик обеспечения специальных возможностей.
create-react-app
Это https://chakra-ui.com веб-сайт последней версии Chakra UI. Для более старых версий перейдите сюда
Box
и Stack
, которые упрощают стилизацию ваших компонентов путем передачи реквизитов. Узнать большеaria-*
. Чтобы использовать компоненты пользовательского интерфейса Chakra, все, что вам нужно сделать, это установить пакет @chakra-ui/react
и его одноранговые зависимости:
# with Yarn
$ yarn add @chakra-ui/react @emotion/react
# with npm
$ npm i @chakra-ui/react @emotion/react
# with pnpm
$ pnpm add @chakra-ui/react @emotion/react
# with Bun
$ bun add @chakra-ui/react @emotion/react
Чтобы начать использовать компоненты, выполните следующие действия:
ChakraProvider
, предоставленным @chakra-ui/react . import { ChakraProvider , defaultSystem } from "@chakra-ui/react"
// Do this at the root of your application
function App ( { children } ) {
return < ChakraProvider value = { defaultSystem } > { children } < / ChakraProvider >
}
При желании вы можете обернуть свое приложение ColorModeProvider
, чтобы можно было переключаться между светлым и темным режимами внутри вашего приложения.
import { Button } from "@chakra-ui/react"
function Example ( ) {
return < Button > I just consumed some ⚡️Chakra! < / Button >
}
Дополнительные руководства о том, как начать работу, доступны здесь.
create-react-app
Ознакомьтесь с нашим руководством, чтобы узнать, как использовать наши официальные шаблоны create-react-app
.
Хотите внести свой вклад? Это потрясающе! У нас есть руководство, которое поможет вам.
Наш документальный сайт находится в отдельном репозитории. Если вы хотите внести свой вклад в документацию, ознакомьтесь с руководством по участию в документации.
Поддержите этот проект своей организацией. Здесь появится ваш логотип со ссылкой на ваш сайт. [Способствовать]
Пожертвовав 5 долларов или больше, вы можете поддержать постоянное развитие этого проекта. Мы будем признательны за некоторую поддержку. Спасибо всем нашим сторонникам! [Способствовать]
Люди регулярно бросают в меня библиотеки компонентов React и системы проектирования. Возможно, это лучшее, что я видел. API-интерфейсы просты, но их можно компоновать, и доступность пары просмотренных мной компонентов является полной.
Отличная работа @thesegunadebayo, действительно вдохновляющая работа. — Райан Флоренс
Потрясающая новая библиотека компонентов с открытым исходным кодом от @thesegunadebayo. Действительно впечатляющая вещь! — Колм Туит
Это невероятная работа. Потрясающая работа, Сегун! — Ли Робинсон
Пользовательский интерфейс Chakra великолепен! Мне нравится последовательное использование стилей фокусировки и тонкая анимация – Гильермо ▲
Мы были чрезвычайно рады получить награды и упоминания от сообщества за все инновации и достижения, которые пользовательский интерфейс Chakra привносит в экосистему JavaScript.
Решение, заслуживающее вниманияТехнологический радар (2020–2021 гг.) | |
Самый влиятельный вклад в развитие сообществаНаграды за открытый исходный код (2020) |
Спасибо этим замечательным людям
Сегун Адебайо ? ? | Тиолувани Колаволе ? | Деванш Джетмалани | Адриан Александр | Ли | Кристоф Подусло ? ? | Джастин Холл |
Марк Чендлер | Фоласаде Агбадже ? | Кристиан Нвамба | Джонатан Бакебва ? | Алекс Луонг ? | Джеско Вюстер | Дасти Дорис |
Алекс Лобера | Томмазо Де Росси | Оди | Хендрик Ниманн | Мэтт Ротенберг | Луис Фелипе Загини | Жан |
Темитопе Аджибойе | Джонатан Ким | Крис Томпсон | ВАЛЬТЕР КИМАРО | Джек Лесли | Кен-Лорен Даганио | Рамон |
Джесс ? | Айелегун Кайоде Майкл | Тал Уильямс | Тревор Блейдс ? | Горд Ли | Аггелос Арванитакис | Дуглас Габриэль |
Мартин Нордстрем | Дэнни Татом | Саймон Коллинз | Санти Альбо | ПИЛО7980 | Ишимото Кодзи | Джефф Вен |
Пабло Саес | Нейц Равник | Жюльен Виала | Себастьян Требунак | Адам Планте | Лусио Рубенс | Джейсон Миазга |
Гонсало Поццо | христианин ? | Кристиан Хагендорн | Андрей Краснов | Дони Сукарди | Мэн | Габриэле Беллуардо |
Франсуа Бест | Тяньчи Хэ | Стивен | Батист Адриан | Роб Беван | Томаш | 徐愷 |
Дэвид Виппел | Навин | Винсент | Усама Альдуасс | Фред К. Шотт | Джаред Палмер | Остин Валела |
Тони Нарлок | Томас Максимини | Дэвид Баумголд | Ральфилиус | Рахул Рангнекар | Пьер Нель | Пьер Гримо |
Уисп НИОКР | Макенна Смутц ? | Нельсон Рейтц | Мохамед Найнар | Мустафа Турхан | Ким Рён | Джастин Мак |
Джереми Дэвис | Джереми Лу | Иван Далмет ? | Диллон Карри | идентификатор-функтор | Денкигай | Аарон Адамс |
Абдулазиз Адешина | Сандро | Премкумар Шанмугам | Тобиас Мейкснер | Джереми Леблан | Кельвин Огенерхоро | Дэвид Дж. Феликс |
Броуди Макки | Пер Свенссон | Патрик Кейсон | Иво Илич | Аваниш Трипати | балибебас | Навин Мурти |
Тим Киндберг | йодар | МАО ЮФЭН | Пэн Цзе | Джеймс Джи | Антон | Дамнян Лукович |
Станила Андрей | Экунола Иезекииль | Бен Митчинсон | Джесс Телфорд | Симо Александров | Герикл Эмануэль | CodinCat |
Сэм Доусон ? | hy2k | Пьер Ортега | Керем Севенкан | Харвихалвин | Мансур Бенюсеф | Эндрю Гаррисон |
Карлос Родригес | Дуайт Уотсон | ЧасинХюс | Науэль Греко ? ? | Пабло Роша | Дастин Лаример ? | Джулиано Фариас |
Джо Белл ? | Хеннинг Полмайер | Сиверт Шу Олсен | Андрей Лазареску | Хосе Тейшейра ? | Адриано Ресенде | Виктор Бастос |
Винсент | Кэндис ? ? | Дэйв Бауман | Тим Колбергер ? | Стефан Менса ? | Искандерброер | Доминик Шумер |
Павел 'Strajk' Долечек | Кешав Бора | окезьек | Клейтон Фариа | Эндрю Эллис ? | Джоэл Галлант ? | Джая Кришна Намбуру |
Ифеома Имох | Джейсон Адкисон ? | Готье Родаро ? | Том Донал | Сэм Маргалит ? | Маркус Вуд | Спенсер Дубалл |
Джейкоб Арриола | Кенли Джин | Деннис Морелло ? | Умар Гора | Циклотроп-j | Хон Сок У | Чуно Йео |
Томас Силлер | Сэмюэл Кауфманн | Юзеф Микулаш | Жоау Виктор | Юитиро Миямаэ | Гифа Эриянто ? | Юзи |
Сонгхивон | Прасанна Венкатеш ТС | гимн | Усама Ахмаро ? | Данан Виджая | электрет ? | Шубхам Каушал |
Петтер Сэтер Моен | Герман Нигаард | jnmsl | Мохамед Сайед | Сэм Подер | Доминик Ли | Ферас Алуда ? |
Джей Пи Унгаретти | Эндика Инчауртьета | Мэтт Уэллс | Анант Джайн | Том Чен ? | Эрни Миранда | Бьолюк |
Суджит Прадхан | Абхишек Кашьяп | Кристиан Джакович | Антониэль Магальяйнс | Грико Нибрас ? | Имальберт | мха |
Хасиб Хасан | Джейми Рольфс ? | Сурабхи Гупта | Нингаро ? | Монэ | Уэйд МакДэниел | Гордон Гольдбах |
Бхиш | Амилкар Муньос | Самар Мохан | Жоау Паулу Родригес | Эйвери Фриман | Дэниел Шульц ? ? | Майкл Килбейн |
ngxCoder | Кристофер Гилтведт Сельбекк | Иоганн Элерс | Лукас Бах | Лазарь Николов ? | Ивата ? | Ли Сын Чан |
pomSense | быть студентом | Тацуя Итакура ? | Юку Котани ? | Вадим Демедес |
(ключ эмодзи):
Этот проект соответствует спецификации всех участников. Любой вклад приветствуется!
MIT © Сегун Адебайо