business-tab

tab页签插件, 参考了antd的设计原型, 有两种模式可供选择

源码地址

在线演示

https://codesandbox.io/s/businesstab-u5z9j

基本用法

PS: 默认会挂载于body上, 采用默认数据.

new Tab({});

可用接口

PS: 如下列出了一系列配置项接口.

export interface ITabConfigProps {
container?: string;
dataSource?: ITabDataSource[];
type?: ITabTypeEffect;
mouse?: ITabMouseEffect;
defaultActiveKey?: number;
tabBarGap?: number;
tabBarStyle?: ITabBarStyle;
tabBarLineStyle?: ITabBarLineStyle;
animated?: boolean;
onChange?: (activeKey: number | string) => void;
onTabClick?: () => void;
}
export interface ITabDataSource {
tabPaneTitle: {
icon?: string,
text?: string,
},
tabPaneContent: {
text?: string,
},
};
export interface ITabBarStyle {
'background-color'?: string;
color?: string;
'font-size'?: number;
'font-family'?: string;
backgroundColorActive?: string;
colorActive?: string;
}
export interface ITabBarLineStyle {
'background-color'?: string;
height?: number;
}
export type ITabTypeEffect = 'line' | 'card';
export type ITabMouseEffect = 'mouseenter' | 'click';

可配置项

PS: 下述表格中为所有的可配置项

Key

Value

Require

Description

container

HTMLElement

false

挂载容器

dataSource

IDataSource

false

源数据

type

line(card)

false

页签类型

mouse

mouseenter(click)

false

切换属性

defaultActiveKey

number

false

初始化选中面板key

tabBarGap

number

false

tabsBar之间的间隙

tabBarStyle

ITabBarStyle

false

tabBar样式对象

tabBarLineStyle

ITabBarLineStyle

false

线条样式

animated

boolean

false

是否开启动画

onTabClick

()=>void

false

tab被点击的回调

onChange

(activeKey)=>void

false

切换面板的回调