claxed
1.0.0
ชั้นเรียนที่มีสไตล์สไตล์เดียวกัน
ดูการสาธิต·รายงานข้อบกพร่อง·คุณลักษณะการร้องขอ
แนวคิดนี้เกิดขึ้นในขณะที่ใช้ Tailwind CSS ซึ่งเป็นชั้นเรียนที่มีประโยชน์มาก framewrok ที่ให้คลาส CSS ทั้งหมดสำหรับขนาดสี, Spacings อย่างไรก็ตามมันอาจจะยุ่งถ้าคุณมีคลาสจำนวนมากที่จะพิมพ์ภายในส่วนประกอบ และไม่ต้องพูดถึงเมื่อคุณต้องการคลาสแบบมีเงื่อนไขตามเสา? ♂
ด้วย claxed ได้รับแรงบันดาลใจอย่างมากจากองค์ประกอบสไตล์เราสามารถทำให้ DOM ของเราสะอาดขึ้นเล็กน้อยด้วยความช่วยเหลือของยูทิลิตี้บางอย่างเช่นการแก้ไขอุปกรณ์ประกอบฉากภายในสตริงเทมเพลต
npm install claxedหรือ
yarn add claxed หากคุณรู้ว่าองค์ประกอบสไตล์ไวยากรณ์นี้อาจคุ้นเคยกับคุณแล้ว สิ่งที่คุณพิมพ์ภายในสตริงเทมเพลตจะถูกพิมพ์ในแอตทริบิวต์ class HTML ของส่วนประกอบ ในตัวอย่างต่อไปนี้ทุกแถวเป็นคลาส CSS
const Button = claxed . button `
px-3
py-2
` ;
const ButtonRed = claxed ( Button ) `
${ ( { border } ) => border && 'border' }
text-red-500
` ;
const App = ( ) => (
< div >
< Button > Click me </ Button >
< ButtonRed border > Click me </ ButtonRed >
</ div >
) ;
// Note: All the falsy values are stripped from the output ดูปัญหาเปิดสำหรับรายการคุณสมบัติที่เสนอ (และปัญหาที่รู้จัก)
การมีส่วนร่วมคือสิ่งที่ทำให้ชุมชนโอเพ่นซอร์สเป็นสถานที่ที่น่าทึ่งที่จะเรียนรู้ได้รับแรงบันดาลใจและสร้าง การมีส่วนร่วมใด ๆ ที่คุณทำ จะได้รับการชื่นชมอย่างมาก
git checkout -b feature/AmazingFeature )git commit -m 'Add some AmazingFeature' )git push origin feature/AmazingFeature )ไม่ Claxed มีหน้าที่เฉพาะในการรวมคลาส CSS และใส่ผลลัพธ์ในแอตทริบิวต์ HTML `class 'ของส่วนประกอบ หากคุณมีปัญหาเฉพาะใด ๆ คุณควรดูว่าคลาสถูกกำหนดในไฟล์ CSS อย่างไร
แจกจ่ายภายใต้ใบอนุญาต MIT ดู LICENSE สำหรับข้อมูลเพิ่มเติม
tommaso poletti - @tomma5o
ลิงค์โครงการ: https://github.com/tomma5o/claxed
