rewindui

介紹

Rewind-UI專為與React和Tailwind CSS一起使用，提供了一系列可訪問的，高度可定制的組件，可以輕鬆地集成到任何React項目中。 Rewind-UI配備了一套默認樣式，可以使用Tailwind CSS類輕鬆自定義。此外，可以使用一組可用於更改組件的默認樣式的Prop進行參數化。

安裝

Rewind-UI可作為NPM軟件包使用，可以使用以下命令安裝：

npm install @rewind-ui/core

配置

Rewind-UI旨在與React和Tailwind CSS一起使用。要使用Rewind-UI，您必須首先在項目中安裝ReactJ和尾風CSS。此外，您還必須安裝以下NPM軟件包：

npm install tailwind-scrollbar @tailwindcss/forms @tailwindcss/typography

安裝了Tailwind CSS後，您必須將其配置為與Rewind-UI一起使用。為此，您必須首先在項目的根目錄中創建一個tailwind.config.js文件。然後，將以下代碼添加到該配置文件：

強烈建議僅添加所需的樣式文件以避免使用腫的CSS文件

 module . exports = {
  content : [
    './src/**/*.{html,jsx,tsx}' ,
    // you can either add all styles
    './node_modules/@rewind-ui/core/dist/theme/styles/*.js' ,
    // OR you can add only the styles you need
    './node_modules/@rewind-ui/core/dist/theme/styles/Button.styles.js' ,
    './node_modules/@rewind-ui/core/dist/theme/styles/Text.styles.js'
  ] ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    require ( 'tailwind-scrollbar' ) ( { nocompatible : true } ) ,
    require ( '@tailwindcss/forms' ) ( {
      strategy : 'class' // only generate classes
    } )
  ]
} ;

用法

要開始使用Rewind-UI組件，只需將以下導入語句添加到您的React組件的頂部：

 import { Button } from '@rewind-ui/core' ;

然後，您可以在JSX代碼中使用組件：

 < Button > Click Me </ Button >

特性

每個組件都有一組默認樣式，可以使用相應的道具進行參數化。例如，該Button組件具有默認的藍色和中等尺寸。可以通過將color和size道具設置為組件來更改這些值：

 < Button color = "black" size = "sm" > Click Me </ Button >

此外，可以通過將正常的className Prop傳遞給該組件的樣式。該道具可用於覆蓋組件的默認樣式。例如，以下代碼將將按鈕的字體重量更改為半折：

Rewind-UI使用tailwind-Merge將默認類與您在className中提供的類合併，並解決任何可能的衝突。

  < Button color = "black" size = "sm" className = "font-semibold" > Click Me </ Button >

變體

試圖避免使用戶一次又一次地使用多個屬性，我們創建了一個variant道具。一個變體基本上是一組預定義的屬性集，可用於自定義組件。例如，該Button組件具有success變體，可用於創建類似Bootstrap的成功按鈕：

  < Button variant = "success" > Click Me </ Button >

您可以在其相應的文檔頁面中閱讀有關每個組件的變體的更多信息。

定制

所有Rewind-UI組件都可以自定義。這意味著您可以通過覆蓋相應的尾風CSS類來輕鬆更改組件的默認樣式。您可以在主題頁面上閱讀有關樣式自定義的更多信息。

學分

特別感謝以下人員：

• 喬·貝爾（Joe Bell） - 為他驚人的開源圖書館班級差異管理局（Rewind Theming System）的基礎。
• 傑克·赫靈頓（Jack Herrington） - 激發我開始建立Rewind -UI。
• SHADCN-對於他的開源項目（分類法和UI），它幫助我構建了此文檔。

特別感謝以下團隊：

• 反應 - 用於創建反應。
• 尾風實驗室 - 用於創建尾風CSS。
• Vercel-用於創建Next.js及其出色的開源模板。
• 浮動-UI-用於創建浮動-UI。
• 磷光 - 用於創建磷光圖標家族。