Chakra UI

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

目錄

• 📋 文件
• 🚀 特色
• 📦 安裝
• 💻 用法
• 📚 CodeSandbox 範本
• 📖 create-react-app 範本
• 📝 貢獻
• 💖 支持
• 🙌 推薦
• 🏆 獎項與提及
• ✨ 貢獻者
• ⚖️ 授權

文件

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

• 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