Saas 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