kimia UI

ส่วนประกอบ UI สำหรับปฏิกิริยาที่สร้างขึ้นด้วย Tailwind CSS 3

ทำไมต้องเป็นวิธีนี้?

Tailwind CSS เป็นเฟรมเวิร์ก CSS แบบยูทิลิตี้แรกสำหรับการสร้างอินเทอร์เฟซผู้ใช้ที่กำหนดเองอย่างรวดเร็ว IL ช่วยให้คุณเขียนสไตล์ของคุณโดยไม่ทิ้ง HTML

ข้อเสียที่ใหญ่ที่สุดของ Tailwind CSS คือความเสี่ยงที่จะมีชั้นเรียนที่ยาวเกินไปซึ่งจะทำให้รหัสของเราไม่สามารถอ่านได้เพียงพอ

เนื่องจาก React เป็นส่วนประกอบเราสามารถแยกตรรกะส่วนประกอบด้วยคลาสของมันและนำกลับมาใช้ใหม่ที่อื่นซึ่งจะส่งผลให้รหัสที่อ่านได้มากขึ้นด้วยส่วนประกอบมากขึ้นและคลาสน้อยลง

นั่นเป็นเหตุผลที่ฉันได้สร้างคอลเลกชันของส่วนประกอบ UI ที่ปรับแต่งได้อย่างสมบูรณ์ เพียงแค่คัดลอกและวางส่วนประกอบที่คุณต้องการใช้

ส่วนประกอบทั้งหมดอยู่ในไดเรกทอรี แพ็คเกจ

แต่ละองค์ประกอบมี 2 ไดเรกทอรีย่อย

• ตัวอย่าง : มีตัวอย่างสำหรับแต่ละตัวแปรของส่วนประกอบใน typeScript

• ตัวอย่าง : มีตัวอย่างสำหรับแต่ละตัวแปรของส่วนประกอบใน React ธรรมดา

- เพิ่มส่วนประกอบใหม่

เพื่อเพิ่มองค์ประกอบใหม่:

สร้างไดเรกทอรีใหม่ของคุณใน SRC/Packages/{YourComponentName} ภายในโฟลเดอร์ของคุณคุณจะสร้าง 2 โฟลเดอร์ย่อยและไฟล์หนึ่งไฟล์

• ตัวอย่าง : จะมีตัวอย่างสำหรับส่วนประกอบของคุณใน typeScript **
• ตัวอย่าง : จะมีตัวอย่างใน React ธรรมดาและจะใช้เป็นตัวอย่างรหัสในการคัดลอก
• {ชื่อส่วนประกอบของคุณ} .tsx จะมีตรรกะของส่วนประกอบของคุณ

สร้างไฟล์ใหม่ (เส้นทาง) ของคุณใน src/pages/ส่วนประกอบ/{ชื่อส่วนประกอบของคุณ} จากนั้นคุณจะนำเข้าตัวอย่างและตัวอย่างทั้งหมดสำหรับส่วนประกอบของคุณ

การสนับสนุนเบราว์เซอร์

ส่วนประกอบเหล่านี้เข้ากันได้กับเบราว์เซอร์ทั้งหมด

โครเมี่ยม	Firefox	ขอบ	ซาฟารี	โอเปร่า

ผลงาน

หากคุณต้องการมีส่วนร่วมในโครงการแก้ไขข้อบกพร่องปรับปรุงการเข้าถึงหรือเปิดปัญหาโปรดทำตามคู่มือการบริจาคของเรา

ก่อนอื่นให้เรียกใช้เซิร์ฟเวอร์การพัฒนา:

npm run dev
# or
yarn dev

เปิด http: // localhost: 3000 พร้อมเบราว์เซอร์ของคุณเพื่อดูผลลัพธ์