NextJS: Modal

อยากได้ UI สวยๆ แต่ไม่อยากติดดีไซน์เดิมๆ ใช่ไหม? 🤔
Headless UI คือทางออก! มันเป็นชุดคอมโพเนนต์ที่ ไม่มีสไตล์ตายตัว ให้คุณออกแบบเองได้เต็มที่

ในบทความนี้ เราจะมาดูว่า Headless UI คืออะไร ทำไมถึงเหมาะกับ Next.js และมีวิธีใช้งานยังไงบ้าง พร้อมตัวอย่างโค้ดที่ใช้ได้จริง! 🎯

🎭 Headless UI คืออะไร?

Headless UI เป็นชุดของ UI Components ที่พัฒนาโดยทีม Tailwind CSS ซึ่งเน้นให้ ความยืดหยุ่น และ ปรับแต่งสไตล์เองได้

🔹 ข้อแตกต่างจาก UI Library ทั่วไป

	Headless UI	UI Library ทั่วไป (เช่น MUI, Ant Design)
ดีไซน์	ไม่มีดีไซน์บังคับ ปรับแต่งเอง	มีดีไซน์ตายตัว ต้องใช้ตามที่ Library กำหนด
ความยืดหยุ่น	ใช้กับ Tailwind, CSS, Styled Components ได้หมด	ต้องใช้ตามโครงสร้างที่ Library กำหนด
ประสิทธิภาพ	เบา เร็ว ไม่โหลดสไตล์เกินจำเป็น	อาจมี CSS หรือ JS ส่วนเกินที่ไม่ได้ใช้
การรองรับ Accessibility	มีการจัดการโฟกัสและคีย์บอร์ดให้	บางตัวรองรับ แต่บางตัวอาจต้องทำเพิ่มเอง
เหมาะกับ	คนที่ต้องการ Custom UI เอง	คนที่ต้องการ UI พร้อมใช้

🛠 วิธีติดตั้ง Headless UI ใน Next.js

ติดตั้งผ่าน npm หรือ yarn ง่ายๆ

npm install @headlessui/react

หรือ

yarn add @headlessui/react

🎯 ตัวอย่างการใช้งาน Headless UI

🔥 1️⃣ ทำ Modal ที่ใช้จริงได้เลย

Modal หรือ Dialog เป็นสิ่งที่ใช้บ่อยในเว็บ เช่น แจ้งเตือน, ฟอร์มสมัครสมาชิก

🔹 ตัวอย่าง Modal แบบใช้ Headless UI

import { Dialog, Transition } from "@headlessui/react";
import { Fragment, useState } from "react";

export default function ExampleModal() {
const [isOpen, setIsOpen] = useState(false);

return (
    <div className="text-center mt-10">
      <button
        onClick={() => setIsOpen(true)}
        className="px-4 py-2 bg-blue-500 text-white rounded"
      >
        เปิด Modal
      </button>

      <Transition appear show={isOpen} as={Fragment}>
        <Dialog as="div" className="fixed inset-0 z-50 flex items-center justify-center" onClose={() => setIsOpen(false)}>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <Dialog.Title className="text-lg font-bold">นี่คือ Modal!</Dialog.Title>
            <Dialog.Description className="mt-2 text-gray-600">
              กดปุ่มปิดเพื่อออกจาก Modal
            </Dialog.Description>
            <button
              onClick={() => setIsOpen(false)}
              className="mt-4 px-4 py-2 bg-red-500 text-white rounded"
            >
              ปิด
            </button>
          </div>
        </Dialog>
      </Transition>
    </div>
);
}

✅ ทำไม Headless UI ถึงดีกว่า Modal ปกติ?

ใช้งานง่าย แค่ใส่ Dialog
รองรับ Keyboard Accessibility อัตโนมัติ
ไม่มีสไตล์เกินจำเป็น 👉 Customize ได้เต็มที่!

📜 2️⃣ ทำ Dropdown Menu แบบโปร

🔹 ตัวอย่าง Dropdown Menu

import { Menu, Transition } from "@headlessui/react";
import { Fragment } from "react";

export default function Dropdown() {
return (
    <Menu as="div" className="relative inline-block text-left">
      <Menu.Button className="px-4 py-2 bg-blue-500 text-white rounded">เมนู</Menu.Button>

      <Transition
        as={Fragment}
        enter="transition ease-out duration-100"
        enterFrom="opacity-0 scale-95"
        enterTo="opacity-100 scale-100"
        leave="transition ease-in duration-75"
        leaveFrom="opacity-100 scale-100"
        leaveTo="opacity-0 scale-95"
      >
        <Menu.Items className="absolute mt-2 w-48 bg-white border rounded shadow-lg">
          <Menu.Item>
            {({ active }) => (
              <a className={`block px-4 py-2 ${active ? "bg-gray-200" : ""}`} href="#">
                โปรไฟล์
              </a>
            )}
          </Menu.Item>
          <Menu.Item>
            {({ active }) => (
              <a className={`block px-4 py-2 ${active ? "bg-gray-200" : ""}`} href="#">
                ตั้งค่า
              </a>
            )}
          </Menu.Item>
        </Menu.Items>
      </Transition>
    </Menu>
);
}

✅ Dropdown ของ Headless UI ดียังไง?

ปรับแต่งได้ง่าย ไม่มีสไตล์บังคับ
รองรับ Keyboard Navigation
Animate ได้ Smooth (แค่ใช้ Transition)

🏁 สรุป

หัวข้อ	รายละเอียด
Headless UI คืออะไร?	ชุดคอมโพเนนต์ที่ไม่มีสไตล์บังคับ ให้เราปรับแต่งได้เอง
ข้อดี	ยืดหยุ่น, ใช้กับ Tailwind CSS ได้ดี, เร็วและเบากว่า UI Library อื่นๆ
การติดตั้ง	`npm install @headlessui/react`
คอมโพเนนต์ที่ใช้งานบ่อย	Modal (Dialog), Dropdown (Menu), Tabs, Popover
เหมาะกับใคร?	คนที่ต้องการ UI ที่ Custom ได้เต็มที่ โดยไม่อยากติดดีไซน์เดิมๆ

🎯 สรุปง่ายๆ

ถ้าคุณอยากให้เว็บมี UI ที่ยืดหยุ่น ไม่ถูกบังคับด้วยดีไซน์เดิมๆ และรองรับ Accessibility ดีเยี่ยม 👉 ใช้ Headless UI เถอะ!

ลองไปใช้กับ Tailwind CSS แล้วคุณจะหลงรัก 💙

NextJS

วันเสาร์ที่ 29 มีนาคม พ.ศ. 2568

🚀 การใช้ Headless UI กับ Next.js: ยืดหยุ่นกว่า สวยกว่า ใช้งานง่าย!