d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

tabs 宽度、动效

Browse Source
This commit is contained in:
tangly1024.com
2023-02-02 14:17:45 +08:00
parent 536ed1cd4e
commit dada0575c3
1 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
components/Tabs.js
View File

@@ -27,34 +27,39 @@ const Tabs = ({ className, children }) => {
if (count === 1) {
return <section className={'duration-200 ' + className}>
{children}
</section>
{children}
</section>
}
function tabClickHandle (i) {
function tabClickHandle(i) {
setCurrentTab(i)
}
return <div className={'mb-5 duration-200 ' + className}>
<ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600'>
{children.map((item, index) => {
return <li key={index}
className={(currentTab === index ? 'font-black border-b-2 border-red-400 text-red-400 animate__animated animate__jello ' : 'font-extralight cursor-pointer') + ' text-sm font-sans '}
onClick={() => {
tabClickHandle(index)
}}>
{item?.key}
</li>
})}
</ul>
<div>
{children.map((item, index) => {
return <section key={index} className={ 'animate__animated animate__fadeIn animate__faster'}>
{currentTab === index && item}
</section>
})}
<ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto'>
{children.map((item, index) => {
return <li key={index}
className={(currentTab === index ? 'font-black border-b-2 border-red-400 text-red-400 animate__animated animate__jello ' : 'font-extralight cursor-pointer') + ' text-sm font-sans '}
onClick={() => {
tabClickHandle(index)
}}>
{item?.key}
</li>
})}
</ul>
<div>
{children.map((item, index) => {
return <section key={index}
data-aos="fade-up"
data-aos-duration="600"
data-aos-easing="ease-in-out"
data-aos-once="false"
data-aos-anchor-placement="top-bottom">
{currentTab === index && item}
</section>
})}
</div>
</div>
</div>
}
export default Tabs