master
mahdi andalib 3 years ago
parent b5c1a27485
commit 92f5d1abdf
  1. 2
      src/App.js
  2. 84
      src/components/ReactTable3/TabBar.js

@ -68,7 +68,7 @@ function App() {
{/* <BlogDesign5 /> */}
{/* <BlogDesign6 /> */}
{/* <ContactInfoSection /> */}
<Testttt />
{/* <Testttt /> */}
{/* <Design2D /> */}
{/* <Features /> */}
{/* <Feedback /> */}

@ -0,0 +1,84 @@
import React from "react";
const TabBar = () => {
const tabs = [
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
"تست۱",
];
return (
<ul
className="tabbar flex no-scrollbar border-b border-gray-200 dark:border-gray-700 overflow-x-scroll scrolling-touch"
onMouseDown={(e) => {
const slider = window.document.querySelector(".tabbar");
window.isDown = true;
window.startX = e.pageX - slider.offsetLeft;
window.scrollLeft = slider.scrollLeft;
}}
onMouseLeave={(e) => {
window.isDown = false;
}}
onMouseUp={(e) => {
window.isDown = false;
}}
onMouseMove={(e) => {
const slider = window.document.querySelector(".tabbar");
if (!window.isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - window.startX) * 1;
slider.scrollLeft = window.scrollLeft - walk;
}}
>
{tabs.map((el) => (
<li className="mr-2 ">
<span
onClick={(e) => {
if (window.isDown) return e.preventDefault();
///do here
}}
aria-current="page"
className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500"
>
<span className="p-2">
{el} <span className="p-2">x</span>
</span>
</span>
</li>
))}
</ul>
);
};
export default TabBar;
Loading…
Cancel
Save