crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-21 03:41:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'm4-sonnguyen' of github.com:KieIO/grocery-vercel-commerce into m5-datnguyen

Browse Source
This commit is contained in:
unknown 2021-09-08 17:43:30 +07:00
commit 346a776bbd
2 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/common/TabCommon/TabCommon.module.scss
View File

@ -2,27 +2,26 @@
.tabWapper{
@apply flex flex-col w-full;
.tabHeader{
@apply relative;
@apply flex;
.tabList {
@apply flex;
position: relative;
border-bottom: 2px solid #FBFBFB;
padding: 0.8rem 0;
width: 100%;
&.center{
@apply justify-center;
margin: auto;
}
}
.slider {
@apply inline-block;
height: .2rem;
border-radius: 3px;
background-color: var(--primary);
position: absolute;
z-index: 1200;
bottom: 0;
transition: all .25s linear;
.slider {
@apply inline-block;
height: .2rem;
border-radius: 3px;
background-color: var(--primary);
position: absolute;
z-index: 1200;
bottom: 0;
transition: all .25s linear;
}
}
}
}

7
src/components/common/TabCommon/TabCommon.tsx
View File

@ -40,10 +40,11 @@ const TabCommon = ({
const active = headerRef.current?.children
.item(index)
?.getBoundingClientRect()
const header = headerRef.current?.getBoundingClientRect()
const current = slider.current
if (current && active) {
if (current && active && header) {
let width = active.width - 24 <= 0 ? 24 : active.width - 24
let left = active.left
let left = active.left - header.left
current.style.width = width.toString() + 'px'
current.style.left = left.toString() + 'px'
}
@ -69,8 +70,8 @@ const TabCommon = ({
</li>
)
})}
</ul>
<div ref={slider} className={s.slider}></div>
</ul>
</div>
<div className={s.tabBody}>
{Children.map(children, (tab, index) => {