rewindui

소개

Rewind-UI는 React 및 Tailwind CSS와 함께 사용하기 위해 특별히 구축 된 Rewind-UI는 모든 RECT 프로젝트에 쉽게 통합 할 수있는 다양한 액세스 가능하고 고도로 사용자 정의 가능한 구성 요소를 제공합니다. Rewind-Ui에는 Tailwind CSS 클래스를 사용하여 쉽게 사용자 정의 할 수있는 기본 스타일 세트가 제공됩니다. 또한, 각 구성 요소는 구성 요소의 기본 스타일을 변경하는 데 사용할 수있는 소품 세트를 사용하여 매개 변수화 될 수 있습니다.

설치

Rewind-Ui는 NPM 패키지로 제공되며 다음 명령을 사용하여 설치할 수 있습니다.

npm install @rewind-ui/core

구성

Rewind-Ui는 React 및 Tailwind CSS와 함께 사용되도록 설계되었습니다. Rewind-Ui를 사용하려면 먼저 프로젝트에 Reactjs 및 Tailwind 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 소품을 전달하여 구성 요소의 스타일을 사용자 정의 할 수 있습니다. 이 소품은 구성 요소의 기본 스타일을 무시하는 데 사용될 수 있습니다. 예를 들어, 다음 코드는 버튼의 글꼴 중량을 반대로 변경합니다.

Rewind-Ui는 Tailwind-Merge를 사용하여 기본 클래스를 className Prop에서 제공하는 클래스와 병합하고 가능한 충돌을 해결합니다.

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

변형

사용자가 여러 속성을 반복해서 사용하도록하려고 노력하면 variant 소품을 만들었습니다. 변형은 기본적으로 구성 요소를 사용자 정의하는 데 사용할 수있는 사전 정의 된 속성 세트입니다. 예를 들어, Button 구성 요소에는 부트 스트랩과 같은 성공 버튼을 만드는 데 사용할 수있는 success 변수가 있습니다.

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

해당 문서 페이지에서 각 구성 요소의 변형에 대한 자세한 내용을 읽을 수 있습니다.

사용자 정의

모든 되감기 -UI 구성 요소는 고도로 사용자 정의 할 수 있습니다. 즉, 해당 Tailwind CSS 클래스를 재정의하여 구성 요소의 기본 스타일을 쉽게 변경할 수 있습니다. 테마 페이지에서 스타일 사용자 정의에 대한 자세한 내용을 읽을 수 있습니다.

크레딧

다음 사람들에게 특별한 감사를드립니다.

• Joe Bell- 리위드 테마 시스템의 기초 인 그의 놀라운 오픈 소스 라이브러리 클래스 분산 당국.
• Jack Herrington- Rewind -Ui 건축을 시작하도록 영감을주었습니다.
• Shadcn- 그의 오픈 소스 프로젝트 (분류 및 UI)를 위해이 문서를 구축하는 데 도움이되었습니다.

다음 팀에게 특별한 감사를드립니다.

• React- React를 만들기 위해.
• 테일 윈드 실험실 - 테일 윈드 CS를 만들기위한.
• Vercel- Next.js와 멋진 오픈 소스 템플릿을 만들기 위해.
• 플로팅 UI- 플로팅 UI를 만들기위한.
• 형광체 - 형광성 아이콘 패밀리를 만들기위한.