inatorsui

inators ui

Inators UI เป็นห้องสมุด UI ที่ใช้ Shadcn UI ออกแบบมาเพื่อลดความซับซ้อนของการพัฒนาส่วนต่อประสานผู้ใช้ที่มีสไตล์และตอบสนองในโครงการถัดไป JS 14 โครงการ

การติดตั้ง

ติดตั้งและกำหนดค่า Shadcn UI

สร้างโครงการ

เริ่มต้นด้วยการสร้างโครงการ next.js ใหม่โดยใช้ create-next-app:

npx create-next-app@latest my-app

เรียกใช้ CLI

เรียกใช้คำสั่ง Shadcn UI Init เพื่อตั้งค่าโครงการของคุณ:

npx shadcn-ui@latest init

การใช้งาน UI

ติดตั้งและกำหนดค่าส่วนประกอบ Shadcn UI

ติดตั้งส่วนประกอบ

เริ่มต้นด้วยการติดตั้งส่วนประกอบใหม่โดยใช้คำสั่งจากหน้าส่วนประกอบ Dropdown-Menu:

npx shadcn-ui@latest add button dropdown-menu

คัดลอกรหัสจากหน้าส่วนประกอบ

สร้างไฟล์ใหม่โดยใช้โปรแกรมแก้ไขรหัสของคุณเช่น ButtonOptions.tsx ในโฟลเดอร์ส่วนประกอบของคุณและคัดลอกรหัสจากหน้าส่วนประกอบ

นำเข้าส่วนประกอบที่สร้างขึ้นเพื่อใช้งาน

เพิ่มส่วนประกอบเพื่อใช้ ButtonOptions.tsx :

รหัสตัวอย่าง

 import ButtonOptions from "@/components/ButtonOptions" ;
// Your component usage code here