fixed scroll. todo@ icon should be hidden if scroll is hidden

pull/1731/head
lianahus 3 years ago
parent f9ce35eb97
commit a979c62f35
  1. 1
      libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
  2. 25
      libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@ -43,7 +43,6 @@
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
max-width: 1000px;
}
/* Hide scrollbar for Chrome, Safari and Opera */

@ -62,15 +62,24 @@ export const TabsUI = (props: TabsUIProps) => {
}, [])
return (
<div className="remix-ui-tabs border-0 header nav-tabs">
<div className="d-flex flex-row justify-content-center align-items-center m-1 mt-2">
<span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span>
<span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span>
<div className="remix-ui-tabs d-flex justify-content-between border-0 header nav-tabs">
<div className="d-flex flex-row" style={ { maxWidth: 'fit-content', width: '97%' } }>
<div className="d-flex flex-row justify-content-center align-items-center m-1 mt-2">
<span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span>
<span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span>
</div>
<Tabs
className="tab-scroll"
selectedIndex={selectedIndex}
onSelect={index => { props.onSelect(index); currentIndexRef.current = index; setSelectedIndex(index) }}
>
<TabList className="d-flex flex-row justify-content-center align-items-center">
{props.tabs.map((tab, i) => <Tab className="py-1" key={tab.name}>{renderTab(tab, i)}</Tab>)}
</TabList>
{props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)}
</Tabs>
</div>
<Tabs className="tab-scroll" selectedIndex={selectedIndex} onSelect={index => { props.onSelect(index); currentIndexRef.current = index; setSelectedIndex(index) }} >
<TabList className="d-flex flex-row justify-content-center align-items-center">{props.tabs.map((tab, i) => <Tab className="py-1" key={tab.name}>{renderTab(tab, i)}</Tab>)}</TabList>
{props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)}
</Tabs>
<i className="mt-2 mr-2 fas fa-arrows-alt-h" title="Scroll to see all tabs"></i>
</div>
)
}

Loading…
Cancel
Save