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

🔨 refactor: tabcommon

Browse Source 
:%s
This commit is contained in:
unknown 2021-09-08 15:30:12 +07:00
parent c4829f1d52
commit 0920bef68b
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{ .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; border-radius: 3px;
border-radius: 3px; background-color: var(--primary);
background-color: var(--primary); position: absolute;
position: absolute; z-index: 1200;
z-index: 1200; bottom: 0;
bottom: 0; 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) => {