Chakra UI

Chakra UI 是一個全面的、可存取的、可重複使用且可組合的 React 元件庫，可簡化現代 Web 應用程式和網站的開發。該函式庫提供了各種元件，可以輕鬆組合以建立複雜的使用者介面，同時遵循可存取性的最佳實務。

目錄

• 📋 文件
• 🚀 功能
• 📦 安裝
• 💻 使用方式
• 📚 CodeSandbox 範本
• 📖 create-react-app 範本
• 📝 貢獻
• 💖 支援
• 🙌 推薦
• 🏆 獎項與提及
• ✨ 貢獻者
• ⚖️ 授權

文件

這是 https://chakra-ui.com 網站，適用於最新版本的 Chakra UI。如需較舊版本，請前往這裡

• v2: https://v2.chakra-ui.com
• v1: https://v1.chakra-ui.com
• v0: https://v0.chakra-ui.com

功能

• 樣式設定的便利性：Chakra UI 包含一組版面配置元件，例如 Box 和 Stack，可讓您透過傳遞 props 輕鬆設定元件的樣式。 了解更多
• 彈性且可組合：Chakra UI 元件建立在 React UI Primitive 之上，以實現無盡的可組合性。
• 可存取性。 Chakra UI 元件遵循 WAI-ARIA 指導方針規範，並具有正確的 aria-* 屬性。
• 深色模式 😍：Chakra UI 中的大多數元件都與深色模式相容。

安裝

若要使用 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

使用方式

若要開始使用元件，請依照下列步驟執行

1. 使用 @chakra-ui/react 提供的 ChakraProvider 包裝您的應用程式。

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 包裝您的應用程式，以便在您的應用程式中切換淺色和深色模式。

2. 現在您可以開始像這樣使用元件！

import { Button } from "@chakra-ui/react"

function Example() {
  return <Button>I just consumed some ⚡️Chakra!</Button>
}

有關如何開始使用的更多指南，請參閱這裡

CodeSandbox 範本

• JavaScript 起始範本：https://codesandbox.io/s/chakra-ui-javascript-lzzg9
• TypeScript 起始範本：https://codesandbox.io/s/chakra-ui-typescript-pomi8
• NextJS TypeScript 起始範本：https://codesandbox.io/s/chakra-ui-next-js-typescript-kxvyr

create-react-app 範本

如需有關如何使用我們的官方 create-react-app 範本的資訊，請查看我們的指南。

貢獻

想要貢獻嗎？太棒了！我們有一個貢獻指南來協助您。

我們的文件網站位於獨立的儲存庫中。如果您有興趣為文件做出貢獻，請查看文件網站貢獻指南。

支援 Chakra UI

組織

請您的組織支持此專案。您的標誌將顯示在此處，並連結到您的網站。[貢獻]

個人

透過捐贈 $5 或更多，您可以支援此專案的持續開發。我們會感謝您的支持。感謝所有支持者！🙏 [貢獻]

推薦

人們經常向我拋擲 React 元件庫和設計系統。這可能是我見過最好的其中一個。API 很簡單但可組合，而且我檢視的幾個元件的可存取性很完整。

做得好 @thesegunadebayo，真的很鼓舞人心的作品。– Ryan Florence

來自 @thesegunadebayo 的超棒新開放原始碼元件庫。真是令人印象深刻！– Colm Tuite

這真是不可思議的作品。Segun，做得太棒了！– Lee Robinson

Chakra UI 真棒！我喜歡對焦樣式的一致使用和細微的動畫 – Guillermo ▲

獎項與提及

我們非常榮幸能因 Chakra UI 為 JavaScript 生態系統帶來的所有創新和影響力而獲得社群的獎項和提及。

貢獻者

感謝這些了不起的人

(表情符號鍵)

此專案遵循 all-contributors 規範。歡迎任何形式的貢獻！

測試支援者

授權

MIT © Segun Adebayo