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。
• 磷光 - 用于创建磷光图标家族。