123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- import { Divider } from 'antd';
- import { useMemo, useState } from 'react';
- import styles from './index.less';
- const TabsContent = (props) => {
- const {
- defaultActiveKey = '1',
- center = false,
- small = false,
- items = {},
- onChange,
- } = props;
- const [active, setActive] = useState(defaultActiveKey);
- const renderContent = useMemo(() => {
- return items.find((item) => item.key == active)?.children;
- }, [active, items]);
- return (
- <div>
- <div
- className={`${styles.tabsTitle} ${small ? styles.small : ''}`}
- style={center ? { justifyContent: 'center' } : {}}
- >
- {items.map((item, index) => (
- <>
- <div
- key={item.key}
- className={`${styles.tabsItem} ${
- active == item.key ? styles.active : ''
- }`}
- onClick={() => {
- setActive(item.key);
- onChange(item.key);
- }}
- >
- {item.label}
- </div>
- {index !== items.length - 1 && (
- <Divider
- type="vertical"
- style={{
- height: '0.5rem',
- width: '1.5px',
- backgroundColor: '#BCBABA',
- }}
- />
- )}
- </>
- ))}
- </div>
- <div>{renderContent}</div>
- </div>
- );
- };
- export default TabsContent;
|