|
@@ -1,10 +1,11 @@
|
|
|
+import { Divider } from 'antd';
|
|
|
import { useMemo, useState } from 'react';
|
|
|
import styles from './index.less';
|
|
|
|
|
|
const TabsContent = (props) => {
|
|
|
const {
|
|
|
defaultActiveKey = '1',
|
|
|
- center = true,
|
|
|
+ center = false,
|
|
|
small = false,
|
|
|
items = {},
|
|
|
onChange,
|
|
@@ -19,19 +20,31 @@ const TabsContent = (props) => {
|
|
|
className={`${styles.tabsTitle} ${small ? styles.small : ''}`}
|
|
|
style={center ? { justifyContent: 'center' } : {}}
|
|
|
>
|
|
|
- {items.map((item) => (
|
|
|
- <div
|
|
|
- key={item.key}
|
|
|
- className={`${styles.tabsItem} ${
|
|
|
- active == item.key ? styles.active : ''
|
|
|
- }`}
|
|
|
- onClick={() => {
|
|
|
- setActive(item.key);
|
|
|
- onChange(item.key);
|
|
|
- }}
|
|
|
- >
|
|
|
- {item.label}
|
|
|
- </div>
|
|
|
+ {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>
|