Installation
วิธีเพิ่ม StackUI เข้าไปในโปรเจกต์
CDN (แนะนำ)
เพิ่ม link ใน HTML ตามลำดับนี้:
<!DOCTYPE html><html lang="th"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>หน้าเว็บ IR</title> <!-- 1. Fonts --> <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- 2. Bootstrap --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> <!-- 3. StackUI Framework --> <link rel="stylesheet" href="https://stackui-cdn.intern-studio.com/v1.0.0/stackui.min.css"> <!-- 4. Brand Preset --> <link rel="stylesheet" href="https://stackui-cdn.intern-studio.com/brand-presets/default.css"> <!-- 5. Third-party CSS (เฉพาะที่ใช้) --> <link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css"></head><body> <!-- เนื้อหา --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script> <script>AOS.init({ duration: 800, once: true });</script></body></html>ลำดับการ Import
- Google Fonts (Prompt + Sarabun)
- Bootstrap CSS
- StackUI Framework CSS
- Brand Preset CSS (โหลดทีหลังสุดเพื่อ override)
- Third-party CSS เฉพาะที่ component ต้องการ
โหลดเฉพาะ Component ที่ใช้
ถ้าไม่ต้องการโหลดทั้ง framework สามารถโหลดเฉพาะ component ได้:
<!-- โหลดเฉพาะ hero + timeline --><link rel="stylesheet" href="https://stackui-cdn.intern-studio.com/v1.0.0/components/hero.css"><link rel="stylesheet" href="https://stackui-cdn.intern-studio.com/v1.0.0/components/timeline.css">