UNPKG

3.33 kBTypeScriptView Raw
1/// <reference types="react" />
2
3import * as React from 'react';
4import CommonProps from '../util';
5import { PopupProps } from '../overlay';
6
7interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
8 title?: any;
9}
10
11export interface ItemProps extends HTMLAttributesWeak, CommonProps {
12 /**
13 * 选项卡标题
14 */
15 title?: React.ReactNode;
16
17 /**
18 * 单个选项卡是否可关闭
19 */
20 closeable?: boolean;
21
22 /**
23 * 选项卡是否被禁用
24 */
25 disabled?: boolean;
26}
27
28export class Item extends React.Component<ItemProps, any> {}
29interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
30 onClick?: any;
31 onChange?: any;
32}
33
34export interface TabProps extends HTMLAttributesWeak, CommonProps {
35 /**
36 * 被激活的选项卡的 key, 赋值则tab为受控组件, 用户无法切换
37 */
38 activeKey?: string;
39
40 /**
41 * 初始化时被激活的选项卡的 key
42 */
43 defaultActiveKey?: string;
44
45 /**
46 * 外观形态
47 */
48 shape?: 'pure' | 'wrapped' | 'text' | 'capsule';
49
50 /**
51 * 是否开启动效
52 */
53 animation?: boolean;
54
55 /**
56 * 选项卡过多时的滑动模式
57 */
58 excessMode?: 'slide' | 'dropdown';
59
60 /**
61 * 导航选项卡的位置，只适用于包裹型（wrapped）选项卡
62 */
63 tabPosition?: 'top' | 'bottom' | 'left' | 'right';
64
65 /**
66 * 尺寸
67 */
68 size?: 'small' | 'medium';
69
70 /**
71 * 激活选项卡的触发方式
72 */
73 triggerType?: 'hover' | 'click';
74
75 /**
76 * 是否延迟加载 TabPane 的内容, 默认开启, 即不提前渲染
77 */
78 lazyLoad?: boolean;
79
80 /**
81 * 是否自动卸载未处于激活状态的选项卡
82 */
83 unmountInactiveTabs?: boolean;
84
85 /**
86 * 导航条的自定义样式
87 */
88 navStyle?: React.CSSProperties;
89
90 /**
91 * 导航条的自定义样式类
92 */
93 navClassName?: string;
94
95 /**
96 * 内容区容器的自定义样式
97 */
98 contentStyle?: React.CSSProperties;
99
100 /**
101 * 内容区容器的自定义样式类
102 */
103 contentClassName?: string;
104
105 /**
106 * 导航栏附加内容
107 */
108 extra?: React.ReactNode;
109
110 /**
111 * 禁用键盘事件
112 */
113 disableKeyboard?: boolean;
114
115 /**
116 * 点击单个选项卡时触发的回调
117 */
118 onClick?: (key: string) => void;
119
120 /**
121 * 选项卡发生切换时的事件回调
122 */
123 onChange?: (key: string) => void;
124
125 /**
126 * 选项卡被关闭时的事件回调
127 */
128 onClose?: (key: string) => void;
129
130 /**
131 * 自定义选项卡模板渲染函数
132 */
133 tabRender?: (key: string, props: {}) => React.ReactNode;
134
135 /**
136 * 弹层属性透传, 只有当 excessMode 为 dropdown 时生效
137 */
138 popupProps?: PopupProps;
139
140 /**
141 * 自定义 icon
142 */
143 icons?: {
144 dropdown?: string | React.ReactNode;
145 prev?: string | React.ReactNode;
146 next?: string | React.ReactNode;
147 };
148 /**
149 * 展示新增按钮
150 */
151 showAdd?: boolean,
152 /**
153 * 新增的事件回调
154 */
155 onAdd?: () => void,
156
157 /**
158 * 自定义添加按钮
159 */
160 addIcon?: React.ReactNode;
161}
162
163export default class Tab extends React.Component<TabProps, any> {
164 static Item: typeof Item;
165}