chakra ui
@chakra-ui
Chakra UI ist eine umfassende Bibliothek zugänglicher, wiederverwendbarer und zusammensetzbarer React-Komponenten, die die Entwicklung moderner Webanwendungen und Websites rationalisiert. Die Bibliothek bietet eine vielfältige Auswahl an Komponenten, die problemlos kombiniert werden können, um komplexe Benutzeroberflächen zu erstellen und dabei die Best Practices für Barrierefreiheit einzuhalten.
create-react-app VorlagenEs ist die Website https://chakra-ui.com für die neueste Version von Chakra UI. Für ältere Versionen klicken Sie hier
Box und Stack , die es einfach machen, Ihre Komponenten durch Übergeben von Requisiten zu stylen. Erfahren Sie mehraria-* Attribute. Um Chakra-UI-Komponenten zu verwenden, müssen Sie lediglich das Paket @chakra-ui/react und seine Peer-Abhängigkeiten installieren:
# 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/reactUm mit der Verwendung der Komponenten zu beginnen, befolgen Sie bitte diese Schritte:
ChakraProvider der von @chakra-ui/react bereitgestellt wird. import { ChakraProvider , defaultSystem } from "@chakra-ui/react"
// Do this at the root of your application
function App ( { children } ) {
return < ChakraProvider value = { defaultSystem } > { children } < / ChakraProvider >
} Optional können Sie Ihre Anwendung mit dem ColorModeProvider umschließen, sodass Sie innerhalb Ihrer App zwischen hellem und dunklem Modus wechseln können.
import { Button } from "@chakra-ui/react"
function Example ( ) {
return < Button > I just consumed some ⚡️Chakra! < / Button >
}Weitere Anleitungen für den Einstieg finden Sie hier
create-react-app Vorlagen In unserem Leitfaden finden Sie Informationen zur Verwendung unserer offiziellen create-react-app Vorlagen.
Haben Sie Lust, einen Beitrag zu leisten? Das ist großartig! Wir haben einen beitragenden Leitfaden, der Ihnen dabei hilft.
Unsere Docsite befindet sich in einem separaten Repo. Wenn Sie daran interessiert sind, zur Dokumentation beizutragen, schauen Sie sich den Docsite-Beitragsleitfaden an.
Unterstützen Sie dieses Projekt mit Ihrer Organisation. Hier erscheint Ihr Logo mit einem Link zu Ihrer Website. [Beitragen]
Mit einer Spende von 5 $ oder mehr können Sie die Weiterentwicklung dieses Projekts unterstützen. Wir freuen uns über jede Unterstützung. Vielen Dank an alle unsere Unterstützer! [Beitragen]
Die Leute bewerfen mich regelmäßig mit React-Komponentenbibliotheken und Designsystemen. Das könnte das Beste sein, das ich je gesehen habe. Die APIs sind einfach, aber zusammensetzbar und die Zugänglichkeit für die paar Komponenten, die ich mir angesehen habe, ist vollständig.
Tolle Arbeit @thesegunadebayo, wirklich inspirierende Arbeit. – Ryan Florence
Tolle neue Open-Source-Komponentenbibliothek von @thesegunadebayo. Wirklich beeindruckendes Zeug! – Colm Tuite
Das ist eine unglaubliche Arbeit. Tolle Arbeit, Segun! – Lee Robinson
Chakra-Benutzeroberfläche ist herrlich! Ich liebe den konsequenten Einsatz von Focus-Styling und die subtile Animation – Guillermo ▲
Wir fühlen uns sehr geehrt, von der Community Auszeichnungen und Erwähnungen für all die Innovationen und die Reichweite erhalten zu haben, die Chakra UI in das JavaScript-Ökosystem einbringt.
Lösung, die es wert ist, verfolgt zu werdenTechnologieradar (2020–2021) | |
Der wirkungsvollste Beitrag für die CommunityOpen Source Awards (2020) |
Der Dank geht an diese wunderbaren Menschen
Segun Adebayo ? ? | Tioluwani Kolawole ? | Devansh Jethmalani | Adrian Aleixandre | Lee | Kristóf Poduszló ? ? | Justin Hall |
Mark Chandler | Folasade Agbaje ? | Christian Nwamba | Jonathan Bakebwa ? | Alex Luong ? | Jesco Wüster | Staubige Doris |
Alex Lobera | Tommaso De Rossi | Odi | Hendrik Niemann | Matt Rothenberg | Luis Felipe Zaguini | Jean |
Temitope Ajiboye | Jonathan Kim | Chris Thompson | WALTER KIMARO | Jack Leslie | Ken-Lauren Daganio | Ramon |
jess ? | Ayelegun Kayode Michael | Tal Williams | Trevor Blades ? | Gord Lea | Aggelos Arvanitakis | Douglas Gabriel |
Martin Nordström | Danny Tatom | Simon Collins | Santi Albo | PILO7980 | Ishimoto Koji | Jeff Wen |
Pablo Saez | Nejc Ravnik | Julien Viala | Sebastian Trebunak | Adam Plante | Lúcio Rubens | Jason Miazga |
Gonzalo Pozzo | Christian ? | Christian Hagendorn | Andrej Krasnow | Dony Sukardi | Meng | Gabriele Belluardo |
Francois Best | Tianci Er | Steven | Baptiste Adrien | Rob Bevan | Tomasz | 徐愷 |
David Wippel | Naveen | Vincent | Osamah Aldoaiss | Fred K. Schott | Jared Palmer | Austin Walela |
Tony Narlock | Thomas Maximini | David Baumgold | ralphilius | Rahul Rangnekar | Pierre Nel | Pierre Grimaud |
Whisp Forschung und Entwicklung | Makenna Smutz ? | Nelson Reitz | Mohamed Nainar | Mustafa Turhan | Kim Røen | Justin Mak |
Jeremy Davis | Jeremy Lu | Ivan Dalmet ? | Dillon Curry | idfunktor | denkigai | Aaron Adams |
Abdulazeez Adeshina | Sandro | Premkumar Shanmugam | Tobias Meixner | Jeremie Leblanc | Kelvin Oghenerhoro | David J. Felix |
Brody McKee | Per Svensson | Patrick Cason | Ivo Ilić | Avaneesh Tripathi | Balibebas | Navin Moorthy |
Tim Kindberg | iodar | MAO YUFENG | Peng Jie | James Gee | Anton | Verdammt, Lukovic |
Stanila Andrei | Ekunola Hesekiel | Ben Mitchinson | Jess Telford | Simo Alexandrow | Héricles Emanuel | CodinCat |
Sam Dawson ? | hy2k | Pierre Ortega | Kerem Sevencan | Harveyhalwin | Mansour Benyoucef | Andrew Garrison |
Carlos Rodrigues | Dwight Watson | ChasinHues | Nahuel Greco ? ? | Pablo Rocha | Dustin Larimer ? | Juliano Farias |
Joe Bell ? | Henning Pohlmeyer | Sivert Schou Olsen | Andrei Lazarescu | José Teixeira ? | Adriano Resende | Victor Bastos |
Vincent | Candice ? ? | Dave Bauman | Tim Kolberger ? | Stephane Mensah ? | iskanderbroere | Dominik Sumer |
Pavel „Strajk“ Dolecek | Keshav Bohra | okezieuc | Clayton Faria | Andrew Ellis ? | Joel Gallant ? | Jaya Krishna Namburu |
Ifeoma Imoh | Jason Adkison ? | Gauthier Rodaro ? | Tom Dohnal | Sam Margalit ? | Marcus Wood | Spencer Duball |
Jacob Arriola | Kenley Jean | Dennis Morello ? | Umar Gora | Zyklotrop-j | Hong Suk Woo | Junho Yeo |
Thomas Siller | Samuel Kauffmann | Jozef Mikuláš | João Victor | Yuichiro Miyamae | Gifa Eriyanto ? | Yuzi |
Songheewon | Prasanna Venkatesh TS | anthowm | Osama Ahmaro ? | Danan Wijaya | Elektriker ? | Shubham Kaushal |
Petter Sæther Moen | Hermann Nygaard | jnmsl | Mohamed Sayed | Sam Poder | Dominic Lee | Feras Aloudah ? |
JP Ungaretti | Endika Intxaurtieta | Matt Wells | Anant Jain | Tom Chen ? | Ernie Miranda | bjoluc |
Sujit Pradhan | Abhishek Kashyap | Kristian Djaković | Antoniel Magalhães | Griko Nibras ? | imalbert | mcha |
Hasib Hassan | Jamie Rolfs ? | Surabhi Gupta | Ningaro ? | Monae | Wade McDaniel | Gordon Goldbach |
Bhish | Amilkar Munoz | Samar Mohan | João Paulo Rodrigues | Avery Freeman | Daniel Schulz ? ? | Michael Kilbane |
ngxCoder | Kristofer Giltvedt Selbekk | Johann Ehlers | Lukas Bach | Lazar Nikolov ? | iwata ? | Lee Seung Chan |
pomSense | Student sein | Tatsuya Itakura ? | Yuku Kotani ? | Vadim Demedes |
(Emoji-Taste):
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!
MIT © Segun Adebayo
