parent
							
								
									b5c1a27485
								
							
						
					
					
						commit
						92f5d1abdf
					
				
				 2 changed files with 85 additions and 1 deletions
			
			
		| @ -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…
					
					
				
		Reference in new issue