Headless UI ตอนที่ 1 - Headless UI คืออะไร?
สวัสดีครับ วันนี้ขอเขียนบทความเปิดโพส ซีรีย์ Headless UI ละกันครับ โดยเริ่มต้นเกริ่นนำคร่าวๆ ก่อน จากนั้น จะโพสการใช้งาน แต่ละ Compenents และก็จะพยายามยกตัวอย่าง และวิธีการใช้งานจริงๆ
แม้ว่าหน้าเว็บ จะมีตัวอย่าง มีคำอธิบายไว้ค่อนข้างครบ แต่สำหรับมือใหม่ หลายๆ คน ก็อาจจะยังงงๆ ติดปัญหา หรือบางทีก็อบโค๊ดไปใช้ แต่ยังไม่เข้าใจ ก็เลยเกิดเป็นที่มา อยากลองนำมาเขียนเพิ่มเติม เผื่อมีประโยชน์ไม่มากก็น้อย
โดยตัวอย่างทั้งหมด ผมจะใช้ตัวอย่างเป็น
- Headless UI + React + Tailwind CSS
- ขึ้นโปรเจ็คด้วย React + Vite
Headless UI คืออะไร?
ตามคำนิยามของทางเว็บ เขียนไว้ว่า "A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS."
คือเป็นชุดของ UI Components ที่ไม่มีหน้าตามาให้ เรียกง่ายๆ คือ มีให้แค่ logic ไปจัด style เอาเอง รองรับ React และ Vue ตัว Headless UI สร้างโดยทีมงาน Tailwind Labs แม้ว่าจะถูกออบแบบมาให้ใช้กับ Tailwind CSS แต่เราก็สามารถใช้กับ CSS อื่นได้ เช่นกัน
- ข้อดีคือ ด้วยความที่ไม่มี style เราจึงสามารถประยุกต์ปรับแต่งได้กับ CSS เราเอง แบบอิสระ หรือจะใช้ framework / library ต่างๆ ได้หมด เช่น Bootstrap, Tailwind, Material UI, อื่นๆ
- ข้อเสียคือ ด้วยความที่มันไม่มี style มันก็มาพร้อมกับข้อเสียคือ เสียเวลาปรับแต่งหน้าตา ปรับ UI เอง สำหรับคนที่อยากได้แบบ Component สำเร็จรูป ก็อาจจะไม่ตอบโจทย์มาก
Headless UI มีอะไรบ้าง?
ถ้าดูจากหน้าเว็บ หรือตัวอย่างรูปด้านบน จะเห็นว่าตัว Headless รองรับ component อยู่หลายแบบครับ เป็น component ที่ใช้บ่อยๆ ในเว็บทั่วๆไป เช่น Transition, Tabs, Dialog หรือ Modal, Switch, Radio, Listbox, Menu เป็นต้น
วิธีการใช้งาน Headless UI
ขั้นตอนการใช้งานคร่าวๆ เป็นภาพรวม นะครับ ยังไม่ได้ลงรายละเอียด คือ เราจะติดตั้งตัว ผ่าน npm/pnpm ด้วยคำสั่ง:
npm install @headlessui/reactการใช้งาน ก็แค่ import module แต่ละ component ที่เราต้องการใช้งาน ตัวอย่าง เราจะใช้ Menu
import { Menu } from '@headlessui/react'หรือจะใช้ Transition
import { Transition } from '@headlessui/react'ส่วนเรื่องของ Style ในตัวอย่าง ผมจะใช้ร่วมกับ Tailwind CSS และตัว Headless UI เค้าก็มี plugin มารองรับ ให้ใช้ร่วมกับ Tailwind ได้ง่ายๆ โดยการติดตั้ง
npm install @headlessui/tailwindcssและก็เพิ่ม plugin ลงไปในไฟล์ tailwind config
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [
require('@headlessui/tailwindcss')
],
}ส่วนวิธีการใช้งาน และรูปแบบยังไง ก็ขึ้นอยู่กับแต่ละ Component รอตามตอนต่อไปนะครับ
Happy Coding ❤️
