ตัวอย่างการทำ Tab ด้วย Headless UI ของดีจาก Tailwind Labs

Headlessui เป็น UI Components จากทีม Tailwind Labs ปัจจุบัน รองรับ React.js และ Vue.js โดยปัจจุบันมี Component ให้เลือก เช่น Dropdown, Menu, Toggle, Switch, Listbox, Tab, Dialog เป็นต้นครับ

เนื่องจากมันเป็น Headless UI ก็จะไม่มี css หรือ default style มาให้ เราสามารถใช้ CSS อะไรก็ได้ (แต่ตัวอย่างนี้ผมใช้ Tailwind CSS เนื่องจากเป็นทีมเดียวกันกับ headdlessui ครับ)

วันนี้ก็เลยลองเล่นตัว Tabs ซักหน่อย ข้อดีนอกจากมี UI มาให้แล้ว คือมีเรื่องของ ARIA มาให้ด้วย ไม่ต้องกำหนด role และ attribute เพิ่มเอง ทำให้สามารถใช้ Keyboard short cut ได้เลย

Headless UI

ลองทำ headlessui Tabs

ทดลองสร้างโปรเจ็คขึ้นมาเลยดีกว่า โดยตัวโปรเจ็คจะใช้ Vite.js ขึ้นโปรเจ็คเป็น React.js ครับ ซึ่ง Library ต่างๆ ที่ใช้ในบทความประกอบไปด้วย

React v18.2.0
Headlessui v1.6.6
Tailwind v3.1
Vite v3.0.7

1. สร้างโปรเจ็คด้วย Vite

npm create vite@latest

จากนั้นตั้งชื่อโปรเจ็คและเลือก react และ react (ใครจะเลือก typesript ก็ได้นะครับ)

✔ Project name: … headlessui-tabs-vitejs
✔ Select a framework: › react
✔ Select a variant: › react

เมื่อ setup Vite เสร็จแล้ว ก็ทำการเปิดโฟลเดอร์ที่เราเพิ่ง init แล้ว install dependencies

cd headlessui-tabs-vitejs
npm install
npm run dev

2. ทำการติดตั้ง tailwindcss

เราจะใช้ tailwind เป็น css หลัก

npm install -D tailwindcss postcss autoprefixer

ต่อมา init tailwindcss จะได้ไฟล์ tailwind.config.js และ postcss.config.js

npx tailwindcss init -p

แก้ไขไฟล์ tailwind.css.js เพื่อให้มันรู้ว่าไฟล์ index.html และไฟล์ต่างๆของ react จะใช้ tailwind

1
/** @type {import('tailwindcss').Config} */
2
module.exports = {
3
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
4
  theme: {
5
    extend: {}
6
  },
7
  plugins: []
8
}

สุดท้าย เพิ่มตรงนี้ลงไป ที่ไฟล์ index.css

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;

3. headlessui tabs

ติดตั้ง headlessui tabs

npm install @headlessui/react

ตัวโครงสร้างในการสร้าง Tab ประกอบไปด้วย Tab.Group, Tab.List, Tab, Tab.Panels, และ Tab.Panel โดย Component เริ่มต้นจะมีหน้าตาประมาณนี้

1
import { Tab } from '@headlessui/react'
2

3
function MyTabs() {
4
  return (
5
    <Tab.Group>
6
      <Tab.List>
7
        <Tab>Tab 1</Tab>
8
        <Tab>Tab 2</Tab>
9
        <Tab>Tab 3</Tab>
10
      </Tab.List>
11
      <Tab.Panels>
12
        <Tab.Panel>Content 1</Tab.Panel>
13
        <Tab.Panel>Content 2</Tab.Panel>
14
        <Tab.Panel>Content 3</Tab.Panel>
15
      </Tab.Panels>
16
    </Tab.Group>
17
  )
18
}

ตัวอย่างภาพ เพื่อให้เห็นภาพมากขึ้น ว่า Tab.List และ Tab.Panels คือส่วนไหน

Tab - Headlessui

สร้างไฟล์ TabExample.jsx ขึ้นมา ใน folder components ซึ่งตัวอย่างโค๊ด ก็เป็นตัวอย่างเดียวกับเว็บ headless ui ครับ

1
import { useState } from 'react'
2
import { Tab } from '@headlessui/react'
3

4
function classNames(...classes) {
5
  return classes.filter(Boolean).join(' ')
6
}
7

8
export default function Example() {
9
  let [categories] = useState({
10
    Recent: [
11
      {
12
        id: 1,
13
        title: 'Does drinking coffee make you smarter?',
14
        date: '5h ago',
15
        commentCount: 5,
16
        shareCount: 2
17
      },
18
      {
19
        id: 2,
20
        title: "So you've bought coffee... now what?",
21
        date: '2h ago',
22
        commentCount: 3,
23
        shareCount: 2
24
      }
25
    ],
26
    Popular: [
27
      {
28
        id: 1,
29
        title: 'Is tech making coffee better or worse?',
30
        date: 'Jan 7',
31
        commentCount: 29,
32
        shareCount: 16
33
      },
34
      {
35
        id: 2,
36
        title: 'The most innovative things happening in coffee',
37
        date: 'Mar 19',
38
        commentCount: 24,
39
        shareCount: 12
40
      }
41
    ],
42
    Trending: [
43
      {
44
        id: 1,
45
        title: 'Ask Me Anything: 10 answers to your questions about coffee',
46
        date: '2d ago',
47
        commentCount: 9,
48
        shareCount: 5
49
      },
50
      {
51
        id: 2,
52
        title: "The worst advice we've ever heard about coffee",
53
        date: '4d ago',
54
        commentCount: 1,
55
        shareCount: 2
56
      }
57
    ]
58
  })
59

60
  return (
61
    <div className="w-full max-w-md px-2 py-16 sm:px-0">
62
      <Tab.Group>
63
        <Tab.List className="flex space-x-1 rounded-xl bg-blue-900/20 p-1">
64
          {Object.keys(categories).map((category) => (
65
            <Tab
66
              key={category}
67
              className={({ selected }) =>
68
                classNames(
69
                  'w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700',
70
                  'ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2',
71
                  selected
72
                    ? 'bg-white shadow'
73
                    : 'text-blue-100 hover:bg-white/[0.12] hover:text-white'
74
                )
75
              }
76
            >
77
              {category}
78
            </Tab>
79
          ))}
80
        </Tab.List>
81
        <Tab.Panels className="mt-2">
82
          {Object.values(categories).map((posts, idx) => (
83
            <Tab.Panel
84
              key={idx}
85
              className={classNames(
86
                'rounded-xl bg-white p-3',
87
                'ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2'
88
              )}
89
            >
90
              <ul>
91
                {posts.map((post) => (
92
                  <li key={post.id} className="relative rounded-md p-3 hover:bg-gray-100">
93
                    <h3 className="text-left text-sm font-medium leading-5 text-black">
94
                      {post.title}
95
                    </h3>
96

97
                    <ul className="mt-1 flex space-x-1 text-xs font-normal leading-4 text-gray-500">
98
                      <li>{post.date}</li>
99
                      <li>&middot;</li>
100
                      <li>{post.commentCount} comments</li>
101
                      <li>&middot;</li>
102
                      <li>{post.shareCount} shares</li>
103
                    </ul>
104

105
                    <a
106
                      href="#"
107
                      className={classNames(
108
                        'absolute inset-0 rounded-md',
109
                        'ring-blue-400 focus:z-10 focus:outline-none focus:ring-2'
110
                      )}
111
                    />
112
                  </li>
113
                ))}
114
              </ul>
115
            </Tab.Panel>
116
          ))}
117
        </Tab.Panels>
118
      </Tab.Group>
119
    </div>
120
  )
121
}

แก้ไขไฟล์ App.jsx นิดหน่อย (ลบ state counter ออก) และทำการ import TabExample มาใช้

1
import reactLogo from './assets/react.svg'
2
import './App.css'
3

4
import TabExample from './components/TabExample'
5

6
function App() {
7
  return (
8
    <div className="App">
9
      <div>
10
        <a href="https://vitejs.dev" target="_blank">
11
          <img src="/vite.svg" className="logo" alt="Vite logo" />
12
        </a>
13
        <a href="https://reactjs.org" target="_blank">
14
          <img src={reactLogo} className="logo react" alt="React logo" />
15
        </a>
16
      </div>
17
      <h1>Vite + React</h1>
18

19
      <p className="text-lg font-bold text-purple-400">Headlessui Tab Example</p>
20

21
      <TabExample />
22
    </div>
23
  )
24
}
25

26
export default App