安裝

PrimeReact 是一組豐富的 React 開源 UI 元件。

下載#

PrimeReact 可在 npm 上下載。


// with npm
npm install primereact

// with yarn
yarn add primereact

Context#

設定由從 primereact/api 匯入的 PrimeReactProvider 和 PrimeReactContext 管理。


import { PrimeReactProvider, PrimeReactContext } from 'primereact/api';

PrimeReactProvider 元件用於包裝應用程式，而 PrimeReactContext 用於存取設定選項。


// _app.js
import { PrimeReactProvider } from 'primereact/api';

export default function MyApp({ Component, pageProps }) {
    return (
        <PrimeReactProvider>
            <Component {...pageProps} />
        </PrimeReactProvider>
    );
}

使用方式#

每個元件都可以單獨匯入，因此您只會捆綁您使用的元件。匯入路徑可在相應元件的文件中找到。


import { Button } from 'primereact/button';

主題#

PrimeReact 有兩種主題模式：樣式化或無樣式。

樣式化模式#

樣式化模式基於預先外觀化的元件，並具有 Material、Bootstrap 或 PrimeOne 主題等指定主題。主題是要匯入的必要 CSS 檔案，請瀏覽主題部分，以取得可供選擇的完整主題清單。


import "primereact/resources/themes/lara-light-cyan/theme.css";

無樣式模式#

預設情況下，所有元件都會停用無樣式模式。在安裝期間使用 PrimeReactContext，將 unstyled 設定為 true 可全域啟用它。請瀏覽無樣式模式文件，以取得更多資訊和範例。


import { PrimeReactProvider } from "primereact/api";
...
return(
    <PrimeReactProvider value={{ unstyled: true }}>
        <App />
    </PrimeReactProvider>
)

範例#

我們為 React 生態系統中的熱門選項建立了各種範例。

影片#

影片教學課程將逐步引導您。

Next.js#

PrimeReact 對 SSR 和 Next.JS 提供一流的支援，事實上，本網站也是使用 Next.js 建置的