crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 04:14:18 +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

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

@ -2,18 +2,16 @@
.tabWapper{ .tabWapper{
@apply flex flex-col w-full; @apply flex flex-col w-full;
.tabHeader{ .tabHeader{
@apply relative; @apply flex;
.tabList { .tabList {
@apply flex; @apply flex;
position: relative; position: relative;
border-bottom: 2px solid #FBFBFB; border-bottom: 2px solid #FBFBFB;
padding: 0.8rem 0; padding: 0.8rem 0;
width: 100%;
&.center{ &.center{
@apply justify-center; margin: auto;
} }
}
.slider { .slider {
@apply inline-block; @apply inline-block;
height: .2rem; height: .2rem;
@ -25,4 +23,5 @@
transition: all .25s linear; transition: all .25s linear;
} }
} }
}
} }

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

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