Chakra UI เป็นไลบรารีที่ครอบคลุมของส่วนประกอบ React ที่เข้าถึงได้ ใช้ซ้ำได้ และเขียนได้ ซึ่งจะช่วยปรับปรุงการพัฒนาแอปพลิเคชันเว็บและเว็บไซต์สมัยใหม่ให้มีประสิทธิภาพยิ่งขึ้น ไลบรารีนำเสนอส่วนประกอบที่หลากหลายซึ่งสามารถนำมารวมกันได้อย่างง่ายดายเพื่อสร้างอินเทอร์เฟซผู้ใช้ที่ซับซ้อน ในขณะเดียวกันก็ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในการเข้าถึง
create-react-app
เป็นเว็บไซต์ https://chakra-ui.com สำหรับ Chakra UI เวอร์ชันล่าสุด สำหรับรุ่นเก่าไปที่นี่
Box
และ Stack
ซึ่งทำให้ง่ายต่อการจัดสไตล์ส่วนประกอบของคุณโดยการส่งอุปกรณ์ประกอบฉาก เรียนรู้เพิ่มเติมaria-*
ที่ถูกต้อง หากต้องการใช้ส่วนประกอบ Chakra UI สิ่งที่คุณต้องทำคือติดตั้งแพ็คเกจ @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
อย่างเป็นทางการของเรา
รู้สึกอยากมีส่วนร่วมไหม? เจ๋งมาก! เรามีคำแนะนำที่จะช่วยแนะนำคุณ
docsite ของเราอยู่ใน repo แยกต่างหาก หากคุณสนใจที่จะร่วมให้ข้อมูลในเอกสาร โปรดดูคู่มือการสนับสนุน docsite
สนับสนุนโครงการนี้กับองค์กรของคุณ โลโก้ของคุณจะแสดงที่นี่พร้อมลิงก์ไปยังเว็บไซต์ของคุณ [มีส่วนช่วย]
คุณสามารถสนับสนุนการพัฒนาอย่างต่อเนื่องของโครงการนี้ได้ด้วยการบริจาค 5 ดอลลาร์ขึ้นไป เราจะขอบคุณการสนับสนุนบางอย่าง ขอขอบคุณผู้สนับสนุนของเราทุกคน! [มีส่วนช่วย]
ผู้คนโยนไลบรารีส่วนประกอบ React และระบบการออกแบบมาที่ฉันเป็นประจำ นี่อาจเป็นสิ่งที่ดีที่สุดที่ฉันเคยเห็น API นั้นเรียบง่ายแต่สามารถประกอบได้ และความสามารถในการเข้าถึงองค์ประกอบ 2-3 รายการที่ฉันดูก็เสร็จสมบูรณ์แล้ว
เยี่ยมมาก @thesegunadebayo เป็นงานที่สร้างแรงบันดาลใจจริงๆ – ไรอัน ฟลอเรนซ์
ไลบรารีคอมโพเนนต์โอเพ่นซอร์สใหม่ที่ยอดเยี่ยมจาก @thesegunadebayo สิ่งที่น่าประทับใจจริงๆ! – คอล์ม ทุยเต
นี่เป็นงานที่เหลือเชื่อ เซกุน ทำได้เยี่ยม! – ลี โรบินสัน
Chakra UI รุ่งโรจน์! ฉันชอบการใช้สไตล์โฟกัสและแอนิเมชั่นที่ละเอียดอ่อนอย่างสม่ำเสมอ – Guillermo ▲
เรารู้สึกเป็นเกียรติอย่างยิ่งที่ได้รับรางวัลและการกล่าวถึงจากชุมชนสำหรับนวัตกรรมทั้งหมดและการเข้าถึง Chakra UI ที่นำมาสู่ระบบนิเวศของ JavaScript
โซลูชั่นที่น่าติดตามเรดาร์เทคโนโลยี (2020–2021) | |
การมีส่วนร่วมที่มีผลกระทบสูงสุดต่อชุมชนรางวัลโอเพ่นซอร์ส (2020) |
ขอขอบคุณคนที่ยอดเยี่ยมเหล่านี้
เซกุน อเดบาโย - - | ติโอลูวานี โคลาโวเล - | เดวานช์ เจตมาลานี | เอเดรียน อเล็กซานเดร | ลี | คริสตอฟ โปดุสซโล - - | จัสติน ฮอลล์ |
มาร์ค แชนด์เลอร์ | โฟลาซาเด อักบาเจ - | คริสเตียน นวัมบา | โจนาธาน เบควา - | อเล็กซ์ หลง - | เจสโก้ วูสเตอร์ | ดัสตี้ ดอริส |
อเล็กซ์ โลเบรา | ทอมมาโซ่ เด รอสซี่ | โอดี | เฮนดริก นีมันน์ | แมตต์ โรเธนเบิร์ก | หลุยส์ เฟลิเป้ ซากินี | ฌอง |
เทมิโตเป อาจิโบเย | โจนาธาน คิม | คริส ทอมป์สัน | วอลเตอร์ คิมาโร | แจ็ค เลสลี่ | เคน-ลอเรน ดากานิโอ | รามอน |
เจส - | อาเยเลกุน คาโยเด ไมเคิล | ทาล วิลเลียมส์ | เทรเวอร์ เบลดส์ - | กอร์ด ลี | แอกเจลอส อาร์วานิตาคิส | ดักลาส กาเบรียล |
มาร์ติน นอร์ดสตรอม | แดนนี่ ทาทอม | ไซมอน คอลลินส์ | ซานติ อัลโบ | PILO7980 | อิชิโมโตะ โคจิ | เจฟ เหวิน |
ปาโบล ซาเอซ | เนจ์ค ราฟนิค | จูเลียน วิอาลา | เซบาสเตียน เทรบูนัก | อดัม แพลนเต้ | ลูซิโอ รูเบนส์ | เจสัน มิอัซก้า |
กอนซาโล่ ปอซโซ่ | คริสเตียน - | คริสเตียน ฮาเกนดอร์น | อันเดรย์ คราสนอฟ | ดอนนี่ ซูการ์ดี | เม้ง | กาเบรียล เบลลูอาร์โด้ |
ฟรองซัวส์ เบสต์ | เทียนซีเหอ | สตีเวน | บัปติสต์ เอเดรียน | ร็อบ บีแวน | โทมัส | 徐愷 |
เดวิด วิปเปล | นาวีน | วินเซนต์ | โอซามาห์ อัลโดเอซ | เฟรด เค. ชอตต์ | จาเร็ด พาลเมอร์ | ออสติน วาเลลา |
โทนี่ นาร์ล็อค | โธมัส แม็กซิมินี | เดวิด บอมโกลด์ | ราฟิเลียส | ราหุล รังเนการ์ | ปิแอร์ เนล | ปิแอร์ กรีโมด์ |
วิปป์ วิจัยและพัฒนา | มาเคนน่า สมุตซ์ - | เนลสัน ไรซ์ | โมฮาเหม็ด ไนนาร์ | มุสตาฟา ตูร์ฮาน | คิม รอน | จัสติน หมาก |
เจเรมี เดวิส | เจเรมี ลู่ | อีวาน ดาลเมต - | ดิลลอนเคอร์รี่ | idfunctor | เดงกิไก | แอรอน อดัมส์ |
อับดุลลาซีซ อาเดชินา | ซานโดร | เปรมกุมาร ชานมูกัม | โทเบียส ไมซ์เนอร์ | เจเรมี เลอบลังค์ | เคลวิน โอเกเนโฮโร | เดวิด เจ. เฟลิกซ์ |
โบรดี้ แมคคี | เพอร์ สเวนส์สัน | แพทริค คาสัน | อิโว อิลิช | อวานีช ตรีปาตี | บาลิเบบาส | นาวิน มัวร์ธี |
ทิม คินด์เบิร์ก | ไอโอดาร์ | เหมาหยูเฟิง | เผิงเจี๋ย | เจมส์ จี | แอนตัน | แดมยาน ลูโควิช |
สตานิลา อังเดร | เอคูโนลา เอเสเคียล | เบน มิทชินสัน | เจส เทลฟอร์ด | ซิโม อเล็กซานดรอฟ | เฮอริเคิลส์ เอ็มมานูเอล | CodinCat |
แซม ดอว์สัน - | hy2k | ปิแอร์ ออร์เตก้า | เคเรม เซเว่นแคน | ฮาร์วีย์ฮาลวิน | มานซูร์ เบนยูเซฟ | แอนดรูว์ แกร์ริสัน |
คาร์ลอส โรดริเกซ | ดไวต์ วัตสัน | ชาสินฮิวส์ | นาฮูเอล เกรโก - - | ปาโบล โรชา | ดัสติน ลาริเมอร์ - | จูเลียโน ฟาเรียส |
โจ เบลล์ - | เฮนนิ่ง โพลเมเยอร์ | ซิเวิร์ต ชู โอลเซ่น | อังเดร ลาซาเรสคู | โฮเซ่ เตเซร่า - | อาเดรียโน เรเซนเด้ | วิคเตอร์ บาสตอส |
วินเซนต์ | แคนดิซ - - | เดฟ บาวแมน | ทิมโคลเบอร์เกอร์ - | สเตฟาน เมนซาห์ - | อิสคานเดอร์โบเร | โดมินิค ซูเมอร์ |
พาเวล 'สตราจค์' โดเลเช็ค | เคชาฟ โบห์รา | โอเคซิอุค | เคลย์ตัน ฟาเรีย | แอนดรูว์ เอลลิส - | โจเอล กัลแลนท์ - | จายา กฤษณะ นัมบูรู |
อีฟีมา อิโมห์ | เจสัน แอดคิสัน - | โกติเยร์ โรดาโร - | ทอม โดห์นัล | แซม มาร์กาลิต - | มาร์คัส วู้ด | สเปนเซอร์ ดูบอลล์ |
เจค็อบ อาร์ริโอลา | เคนลีย์ จิน | เดนนิส มอเรลโล - | อุมัร กอรา | ไซโคลทรอป-เจ | ฮงซอกวู | จุนโฮ ยอ |
โธมัส ซิลเลอร์ | ซามูเอล คอฟฟ์มันน์ | โจเซฟ มิคูลาช | จูเอา วิคเตอร์ | ยูอิจิโระ มิยามาเอะ | กิฟา เอริยันโต - | ยูซี่ |
ซองฮีวอน | ปราซานนา เวนคาเตช TS | เพลงสรรเสริญพระบารมี | โอซามา อามาโร - | ดานัน วิจายา | อีเลคเทอร์ - | ชุมบาม เกาชาล |
เพตเตอร์ แซเธอร์ โมเอน | เฮอร์แมน ไนการ์ด | jnmsl | โมฮาเหม็ด ซายิด | แซม โพเดอร์ | โดมินิค ลี | เฟราส อาลูดาห์ - |
เจพี อุงกาเร็ตติ | เอนดิกา อินทซาร์เทียต้า | แมตต์ เวลส์ | อนันต์ เจน | ทอม เฉิน - | เออร์นี่ มิแรนด้า | บีโจลุค |
สุจิต ปราธาน | อภิเษก คาชยัป | คริสเตียน ยอโควิช | อันโตเนียล มากัลเฮส | กริโก นิบราส - | อิมัลเบิร์ต | มชา |
ฮาซิบ ฮัสซัน | เจมี รอล์ฟส์ - | สุราบี คุปตะ | นิงกาโร - | โมเน่ | เวด แมคแดเนียล | กอร์ดอน โกลด์บัค |
ภิช | อมิลการ์ มูนอซ | ซามาร์ โมฮาน | ชูเอา เปาโล โรดริเกซ | เอเวอรี่ ฟรีแมน | ดาเนียล ชูลซ์ - - | ไมเคิล คิลเบน |
ngxCoder | คริสโตเฟอร์ กิลต์เวดท์ เซลเบค | โยฮันน์ เอห์เลอร์ส | ลูคัส บาค | ลาซาร์ นิโคลอฟ - | อิวาตะ - | ลี ซึง ชาน |
pomSense | เป็นนักเรียน | ทัตสึยะ อิทาคุระ - | ยูกุ โคทานิ - | วาดิม เดเมเดส |
(ปุ่มอีโมจิ):
โครงการนี้เป็นไปตามข้อกำหนดของผู้มีส่วนร่วมทั้งหมด ยินดีต้อนรับการบริจาคใด ๆ !
MIT © Segun Adebayo