mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-21 07:26:49 +00:00
@@ -1,4 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
import { siteConfig } from '@/lib/config'
|
||||
|
||||
/**
|
||||
* Tabs切换标签
|
||||
@@ -16,15 +17,17 @@ const Tabs = ({ className, children }) => {
|
||||
|
||||
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 overflow-auto">
|
||||
{validChildren.map((item, index) => (
|
||||
<li key={index}
|
||||
className={`${currentTab === index ? 'font-black border-b-2 border-red-600 text-red-600 animate__animated animate__jello' : 'font-extralight cursor-pointer'} text-sm font-sans`}
|
||||
onClick={() => setCurrentTab(index)}>
|
||||
{item.key}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{!(validChildren.length === 1 && siteConfig('COMMENT_HIDE_SINGLE_TAB')) && (
|
||||
<ul className="flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto">
|
||||
{validChildren.map((item, index) => (
|
||||
<li key={index}
|
||||
className={`${currentTab === index ? 'font-black border-b-2 border-red-600 text-red-600 animate__animated animate__jello' : 'font-extralight cursor-pointer'} text-sm font-sans`}
|
||||
onClick={() => setCurrentTab(index)}>
|
||||
{item.key}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{/* 标签切换的时候不销毁 DOM 元素,使用 CSS 样式进行隐藏 */}
|
||||
<div>
|
||||
{validChildren.map((item, index) => (
|
||||
|
||||
Reference in New Issue
Block a user