AdminLTE เป็น CSS Framework, JavaScript ที่นิยมใช้ในการทำ backend, admin-dashboard มานานจนเริ่มใช้ Tailwind ในปัจจุบัน แทน Bootstrap แต่ต้องทำความเข้าใจก่อนว่า AdminLTE มี “ดีเอ็นเอ” ผูกติดกับ Bootstrap มานาน การที่จะใช้ design เดิมแต่เป็นคนละ Framework เลยเป็นเรื่องที่ต้องปรับตัวเหมือนกัน
AdminLTE กับ Bootstrap ( Official )
- นี่คือเวอร์ชันหลักที่คุณจะพบใน GitHub ของ ColorlibHQ ครับ โดยปัจจุบันแบ่งออกเป็น 2 สายหลัก
- AdminLTE v3 ( เสถียรที่สุด ): อิงจาก Bootstrap 4. ใช้ jQuery เป็นหลักในการควบคุม Interactive ต่างๆ เช่น Sidebar หรือ Control Sidebar
- AdminLTE v4 ( รุ่นใหม่ ): อิงจาก Bootstrap 5.3. มีการยกเลิกการใช้ jQuery และเปลี่ยนมาใช้ Vanilla JS แทน ทำให้ทันสมัยขึ้นและรองรับ Dark Mode แบบ Native ของ Bootstrap 5 ได้ดีขึ้น
AdminLTE แยกตาม Framework ( Community Ports )
เนื่องจาก AdminLTE เป็นที่นิยมมาก จึงมีนักพัฒนาพอร์ต (Port) ไปลง Framework ต่างๆ แต่ พื้นฐานดีไซน์ยังเป็น Bootstrap นะครับ
| Framework | วิธีการใช้งาน / Package ที่นิยม |
| Laravel | นิยมใช้ jeroennoten/Laravel-AdminLTE ซึ่งช่วยให้ Integrate เข้ากับ Blade Template ได้ง่ายมาก |
| React | มีโปรเจกต์อย่าง adminlte-2-react หรือการนำเอา HTML/CSS ของ v3 มาครอบด้วย React Components เอง |
| Vue.js | มักจะใช้ Composition API ร่วมกับตัว AdminLTE v4 เพื่อลดการพึ่งพา jQuery |
| .NET / C# | มีการทำเป็น Library หรือ Template ใน NuGet สำหรับ ASP.NET Core MVC |
AdminLTE กับ Tailwind CSS ( ทางเลือกใหม่ )
AdminLTE “ไม่มี” เวอร์ชัน Tailwind CSS อย่างเป็นทางการ แต่ถ้าคุณชอบ “Vibe” หรือ “Layout” แบบ AdminLTE แต่อยากเขียนด้วย Tailwind มีทางเลือกดังนี้
- TailAdmin: เป็น Dashboard Template ที่ถูกยกย่องว่าเป็น “AdminLTE แห่งโลก Tailwind” มีโครงสร้าง Sidebar และ Header ที่คล้ายกันมาก
- Flowbite Admin: ให้ Component ที่ครบถ้วนและดูสะอาดตาคล้าย AdminLTE v4 แต่ใช้ Utility-first CSS ทั้งหมด
ตารางเปรียบเทียบเพื่อการตัดสินใจ
| หัวข้อเทียบ | AdminLTE (Bootstrap) | Tailwind Admin Dashboards |
| การเรียนรู้ | ง่ายมาก แค่ก๊อปปี้ Class มาวาง | ต้องเข้าใจ Utility Classes ของ Tailwind |
| ขนาดไฟล์ | ใหญ่กว่า (เพราะรวม CSS/JS ที่ไม่ได้ใช้) | เล็กกว่า (Purge CSS เอาที่ไม่ใช้ออกได้) |
| การปรับแต่ง | ต้องแก้ Overwrite CSS หรือแก้ SASS | ปรับแต่งได้อิสระผ่าน HTML โดยตรง |
| ความทันสมัย | ดูเป็นแบบแผน (Standard Look) | ดูทันสมัยและยืดหยุ่นกว่า (Custom Look) |
อ่านเพิ่มเติม