ดาวน์โหลด rewindui - ดาวน์โหลดซอร์สโค้ด rewindui

rewindui

โค้ดแหล่งที่มา AI

@rewind-ui

ดาวน์โหลด

การแนะนำ

สร้างขึ้นโดยเฉพาะสำหรับการใช้งานกับ React และ Tailwind CSS Rewind-UI นำเสนอส่วนประกอบที่เข้าถึงได้และปรับแต่งได้สูงซึ่งสามารถรวมเข้ากับโครงการ React ได้อย่างง่ายดาย 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 >

ยิ่งไปกว่านั้นรูปแบบของส่วนประกอบสามารถปรับแต่งได้โดยผ่าน prop className ปกติไปยังมัน เสานี้สามารถใช้เพื่อแทนที่รูปแบบเริ่มต้นของส่วนประกอบ ตัวอย่างเช่นรหัสต่อไปนี้จะเปลี่ยนน้ำหนักตัวอักษรของปุ่มเป็นกึ่ง bold:

Rewind-UI กำลังใช้ Tailwind-Merge เพื่อรวมคลาสเริ่มต้นเข้ากับคลาสที่คุณให้ไว้ใน Prop 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 tailwind ที่สอดคล้องกัน คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการปรับแต่งสไตล์ในหน้าธีม

การให้เครดิต

ขอขอบคุณเป็นพิเศษสำหรับคนต่อไปนี้:

Joe Bell - สำหรับหน่วยงานความแปรปรวนระดับห้องสมุดโอเพนซอร์สที่น่าทึ่งของเขาซึ่งเป็นรากฐานของระบบธีมของ Rewind
Jack Herrington - สำหรับแรงบันดาลใจให้ฉันเริ่มสร้าง Rewind -ui
Shadcn - สำหรับโครงการโอเพ่นซอร์สของเขา (Taxonomy & UI) ที่ช่วยฉันสร้างเอกสารนี้

ขอขอบคุณเป็นพิเศษสำหรับทีมต่อไปนี้: