east-hub-ui v0.4.1

East UI Components

Modern UI components library built with React and Tailwind CSS.

Installation

npm install east-hub-ui
# or
yarn add east-hub-ui
# or
pnpm add east-hub-ui

Usage

เพื่อให้ใช้งานได้อย่างถูกต้อง คุณจำเป็นต้องตั้งค่า Tailwind CSS ในโปรเจคของคุณ (หากยังไม่ได้ตั้งค่า)

1. ตั้งค่า Tailwind CSS ในโปรเจคของคุณ
2. นำเข้า Components และใช้ได้เลย!

ตัวอย่างการใช้งาน Button Component

import { Button } from 'east-hub-ui';

function MyComponent() {
  return (
    <div>
      {/* ปุ่มพื้นฐาน */}
      <Button>ปุ่มพื้นฐาน</Button>
      
      {/* ปุ่มแบบ primary */}
      <Button variant="primary">ปุ่ม Primary</Button>
      
      {/* ปุ่มขนาดใหญ่ */}
      <Button variant="success" size="lg">ปุ่มขนาดใหญ่</Button>
      
      {/* ปุ่มแบบ bordered */}
      <Button variant="secondary" styleVariant="bordered">ปุ่มแบบมีขอบ</Button>
      
      {/* ปุ่มแสดงสถานะโหลด */}
      <Button variant="warning" isLoading>กำลังโหลด</Button>
      
      {/* ปุ่มแบบเต็มความกว้าง */}
      <Button variant="danger" size="full">ปุ่มเต็มความกว้าง</Button>
    </div>
  );
}

สไตล์ที่รองรับ

Button Variants

• default - สีเทา
• primary - สีน้ำเงิน
• secondary - สีม่วง
• success - สีเขียว
• warning - สีเหลือง/ส้ม
• danger - สีแดง

Button Sizes

• none - ไม่มี padding
• sm - ขนาดเล็ก
• md - ขนาดกลาง (ค่าเริ่มต้น)
• lg - ขนาดใหญ่
• full - เต็มความกว้าง

Button Style Variants

• solid - พื้นสีเต็ม (ค่าเริ่มต้น)
• faded - พื้นสีอ่อน
• bordered - แบบมีเส้นขอบ
• light - พื้นสีอ่อนมาก
• flat - แบบราบและเข้ม
• ghost - โปร่งใส แสดงสีเมื่อ hover
• shadow - มีเงา

การปรับแต่ง

คุณสามารถปรับแต่ง style ของ components ได้โดยใช้ className:

<Button 
  variant="primary" 
  className="rounded-full shadow-lg"
>
  ปุ่มแบบกำหนดเอง
</Button>

License

MIT