feat: Tab

src/components/customized/tab.jsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from "react";
+import './tab.scss'
+
+const Tab = (props) => {
+    const { tabs } = props;
+    const tabTitles = tabs.map((item, index) => ({
+        index, title: item.title
+    }))
+    const tabLength = tabs.length || 0;
+    const tabContent = tabs.map(item => (item.content))
+    const [curLeft, setCurLeft] = useState(0)
+
+    const [domWidth, setDomWidth] = useState(0)
+    const containerRef = useRef(null)
+    useEffect(() => {
+        setDomWidth(containerRef.current.offsetWidth)
+    }, [])
+
+    return <div className="w-full h-full overflow-hidden">
+        <div className="w-full h-[2rem] overflow-x-auto overflow-y-hidden flex space-x-1 tab-content">
+            {
+                tabTitles.map((item, index) => {
+                    return (
+                        <div
+                            key={index}
+                            className="text-center p-1 text border px-3 rounded-md bg-white"
+                            onClick={() => {
+                                containerRef.current.scrollLeft = domWidth * index
+                            }}
+                        >
+                            { item.title }
+                        </div>
+                    )
+                })
+            }
+        </div>
+        <div
+            ref={containerRef}
+            style={{
+                'scroll-snap-type': 'x mandatory',
+                'height': 'calc(100% - 2rem)',
+            }}
+            onScroll={(e) => {
+                setCurLeft(e.target.scrollLeft / 360)
+                console.log('scroll', e.target.scrollLeft / 360);
+            }}
+            className="tab-content relative overflow-x-auto overflow-y-hidden inline-block w-full"
+        >
+            <div
+                className="relative flex h-full transition-all"
+                style={{ width: `calc(${tabLength} * 100%)` }}
+            >
+                {
+                    tabContent.map((item, index) => {
+                        return (
+                            <div
+                                key={index}
+                                style={{ 'scroll-snap-align': 'center' }}
+                                className="border h-full border-red-400 w-full"
+                            >
+                                {item}
+                            </div>
+                        )
+                    })
+                }
+            </div>
+        </div>
+    </div>
+}
+
+export {
+    Tab
+}

src/components/customized/tab.scss

@@ -0,0 +1,3 @@
+.tab-content::-webkit-scrollbar {
+    height: 0px;
+}

src/views/setting/index.jsx

@@ -1,7 +1,27 @@
+import { Tab } from "@/components/customized/tab"
+
 export default function Setting() {
+    const tabs = [
+        {
+            title: 'title1',
+            content: <div>Content1</div>
+        },
+        {
+            title: 'title2',
+            content: <div>Content2</div>
+        },
+        {
+            title: 'title3',
+            content: <div>Content3</div>
+        },
+        {
+            title: 'title4',
+            content: <div>Content4</div>
+        },
+    ]
     return (
-        <div>
+        <div className="w-[18rem] h-[20rem]">
-            Setting
+            <Tab tabs={tabs}></Tab>
         </div>
     )
 }