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