/
index.jsx
74 lines (67 loc) · 1.61 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* eslint-disable react/forbid-prop-types */
import React from 'react';
import PropTypes from 'prop-types';
import { useColor } from 'hooks/useColor';
import TabGroup from './TabGroup';
import Tab from './Tab';
/**
* `Tabs` 是一個選項卡切換元件,能夠在同一層級的內容組別當中導航、切換。
* 此元件由兩個部分構成,一個是讓使用者點擊的導覽頁籤 Tab,一個是對應的內容 TabPanel。
* 通常使用於同一層級的內容之間互相切換、導航。
*/
const Tabs = ({
className,
themeColor,
value, options, onChange,
}) => {
const { makeColor } = useColor();
const color = makeColor({ themeColor });
return (
<TabGroup
className={className}
onChange={onChange}
value={value}
color={color}
>
{
options.map((option) => (
<Tab
key={option.value}
label={option.label}
value={option.value}
/>
))
}
</TabGroup>
);
};
Tabs.propTypes = {
/**
* 客製化樣式
*/
className: PropTypes.string,
/**
* 主題配色,primary、secondary 或是自己傳入色票
*/
themeColor: PropTypes.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),
/**
* Tabs 選項內容
*/
options: PropTypes.array,
/**
* 用來指定當前被選中的 Tab 項目
*/
value: PropTypes.string,
/**
* 當 Tab 選項被選中時會被調用
*/
onChange: PropTypes.func,
};
Tabs.defaultProps = {
className: '',
themeColor: 'primary',
options: [],
value: '',
onChange: () => {},
};
export default Tabs;