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

tw classed

ส่วนประกอบของบุคคลที่สาม

@tw-classed

ดาวน์โหลด

TW จัดประเภท

Monorepo ของโครงการ TW ประกอบด้วยแพ็คเกจแกนและปฏิกิริยา

เอกสารฉบับเต็ม

ตอบโต้

แพ็คเกจ React เป็น wrapper รอบ ๆ แพ็คเกจหลักที่ให้วิธีที่ง่ายในการสร้างส่วนประกอบที่จัดประเภท ดูเอกสาร React

 // Button.tsx
import { classed } from "@tw-classed/react" ;

const Button = classed . button ( "px-4 py-2" , {
  variants : {
    color : {
      primary : "bg-blue-500 text-white" ,
      secondary : "bg-gray-500 text-white" ,
    } ,
  } ,
} ) ;

// In your App

const App = ( ) => {
  return (
    < >
      < Button color = "primary" > Primary </ Button >
      < Button color = "secondary" > Secondary </ Button >
    </ >
  ) ;
} ;

แกนกลาง

แพ็คเกจหลักเป็นไลบรารีที่มีชุดของฟังก์ชั่นเพื่อช่วยให้คุณสร้างส่วนประกอบที่จัดประเภทของคุณเอง

ดูเอกสารหลัก

 import { classed } from "@tw-classed/core" ;

const button = classed ( "px-4 py-2" , {
  variants : {
    color : {
      primary : "bg-blue-500 text-white" ,
      secondary : "bg-gray-500 text-white" ,
    } ,
  } ,
} ) ;

// In your template
const Button = document . createElement ( "button" ) ;
Button . className = button ( { color : "primary" } ) ;

// Or with a framework (Like lit-html)
const Button = ( ) => html ` < button class =" ${ button ( { color : "primary" } ) } " /> ` ;