feature: Tabs组件微调

This commit is contained in:
tangly1024
2022-01-02 10:30:50 +08:00
parent f7056d86d7
commit ca06994d50

View File

@@ -18,7 +18,7 @@ const Tabs = ({ children }) => {
})
if (count === 1) {
return <section>
return <section className='shadow'>
{children}
</section>
}
@@ -31,15 +31,15 @@ const Tabs = ({ children }) => {
return (
<section >
{<div className='shadow hidden lg:block mb-5 py-4 px-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
<ul className='flex justify-center space-x-5 pb-4 cursor-pointer dark:text-gray-400 text-gray-600'>
<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' : 'font-extralight'} onClick={() => { tabClickHandle(index) }}>
return <li key={index} className={currentTab === index ? 'font-black border-b' : 'font-extralight cursor-pointer'} onClick={() => { tabClickHandle(index) }}>
{item?.key}
</li>
})}
</ul>
{children.map((item, index) => {
return <section key={index} className={`tabContent ${currentTab === index ? 'block' : 'hidden'}`}>
return <section key={index} className={`${currentTab === index ? 'block' : 'hidden'}`}>
{item}
</section>
})}