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

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
}

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 leading-5 font-medium text-blue-700',
70
                  'ring-opacity-60 focus:online-hidden ring-white ring-offset-2 ring-offset-blue-400 focus:ring-2',
71
                  selected
72
                    ? 'bg-white shadow'
73
                    : 'text-blue-100 hover:bg-white/[0.12] hover:text-zinc-50'
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-opacity-60 focus:online-hidden ring-white ring-offset-2 ring-offset-blue-400 focus:ring-2'
88
              )}
89
            >
90
              <ul>
91
                {posts.map((post) => (
92
                  <li key={post.id} className="relative rounded-md p-3 hover:bg-zinc-100">
93
                    <h3 className="text-left text-sm leading-5 font-medium text-black">
94
                      {post.title}
95
                    </h3>
96

97
                    <ul className="mt-1 flex space-x-1 text-xs leading-4 font-normal text-zinc-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
                        'focus:online-hidden ring-blue-400 focus:z-10 focus:ring-2'
110
                      )}
111
                    />
112
                  </li>
113
                ))}
114
              </ul>
115
            </Tab.Panel>
116
          ))}
117
        </Tab.Panels>
118
      </Tab.Group>
119
    </div>
120
  )
121
}

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