版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35812380/article/details/84565362
4.5 Tabs标签页
选项卡切换组件。
文章目录
一.Tabs组件
1.Tabs组件
-
引入Tabs:import { Tabs } from ‘antd’;
-
disabled设置页签不可点 -
<TabPane tab="Tab 2" disabled key="2">Tab 2</TabPane>
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
function callback(key) {
console.log(key);
}
ReactDOM.render(
<Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2" disabled>Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
</Tabs>,
mountNode);
二.基本实例
//src\pages\ui\tabs.js
import React from "react";
import "./ui.less";
import { Card, Tabs, message, Icon } from "antd";
const TabPane = Tabs.TabPane;
export default class Tabs1 extends React.Component {
handleCallback = key => {
// console.log(key)
message.info("Hi,您选择了页签: " + key);
};
render() {
return (
<div>
<Card title="Tabs页签" className="card-wrap" >
<Tabs defaultActiveKey="1" onChange={this.handleCallback}>
<TabPane tab="Tab 1" key="1">
欢迎学习React课程
</TabPane>
<TabPane tab="Tab 2" key="2">
欢迎学习React课程
</TabPane>
<TabPane tab="Tab 3" key="3">
React是一门非常受欢迎的MV*框架
</TabPane>
</Tabs>
</Card>
</div>
);
}
}
三. Tab带图标页签
注意:jsx 语法嵌套,要换成对象,这里用到引用 'Icon'的知识 这里指定图标要这样写
- {}中是根对象,用
<span></span>进行包裹,然后定义图标+文字.
<TabPane tab={<span><Icon type="apple" />Tab 1</span>} key="1"/>
//src\pages\ui\tabs.js
import React from "react";
import "./ui.less";
import { Card, Tabs, message, Icon } from "antd";
const TabPane = Tabs.TabPane;
export default class Tabs1 extends React.Component {
handleCallback = key => {
// console.log(key)
message.info("Hi,您选择了页签: " + key);
};
render() {
return (
<div>
<Card title="Tabs页签" className="card-wrap">
<Tabs defaultActiveKey="1" onChange={this.handleCallback}>
<TabPane tab="Tab 1" key="1">
欢迎学习React课程
</TabPane>
<TabPane tab="Tab 2" key="2">
欢迎学习React课程
</TabPane>
<TabPane tab="Tab 3" key="3">
React是一门非常受欢迎的MV*框架
</TabPane>
</Tabs>
</Card>
<Card title="Tab带图标页签" className="card-wrap">
<Tabs defaultActiveKey="1" onChange={this.handleCallback}>
<TabPane
tab={
<span>
<Icon type="plus" />
Tab 1
</span>
}
key="1"
>
创建属于你的React项目
</TabPane>
<TabPane
tab={
<span>
<Icon type="edit" />
Tab 2
</span>
}
key="2"
>
尝试如何使用React进行修改
</TabPane>
<TabPane
tab={
<span>
<Icon type="delete" />
Tab 3
</span>
}
key="3"
>
删除它，就这么简单
</TabPane>
</Tabs>
</Card>
</div>
);
}
}
四. Tab可关闭卡片式页签
既然是动态添加,就不能写死页签, 通过js变量循环的方式进行显示
-
定义生命周期方法
componentWillMount/componentDidMount -
声明数组存储数据
-
定义setState存储在 state里
-
type="editable-card"指定样式为可编辑的卡片样式 -
onChange设置页签改变时调用方法,设置激活的key -
onEdit -
add -
remove
//src\pages\ui\tabs.js
import React from "react";
import "./ui.less";
import { Card, Tabs, message, Icon } from "antd";
const TabPane = Tabs.TabPane;
export default class Tabs1 extends React.Component {
newTabIndex = 0;
componentWillMount() {
const panes = [
{
title: "Tab 1",
content: "Tab 1",
key: "1"
},
{
title: "Tab 2",
content: "Tab 2",
key: "2"
},
{
title: "Tab 3",
content: "Tab 3",
key: "3"
}
];
this.setState({
activeKey: panes[0].key,
// panes: panes
panes
});
}
add = () => {
const panes = this.state.panes;
const activeKey = `newTab${this.newTabIndex++}`;
panes.push({ title: activeKey, content: "New Tab Pane", key: activeKey });
this.setState({ panes, activeKey });
};
remove = targetKey => {
let activeKey = this.state.activeKey;
let lastIndex;
this.state.panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const panes = this.state.panes.filter(pane => pane.key !== targetKey);
if (lastIndex >= 0 && activeKey === targetKey) {
activeKey = panes[lastIndex].key;
}
this.setState({ panes, activeKey });
};
onChange = activeKey => {
this.setState({
activeKey
});
};
onEdit = (targetKey, action) => {
this[action](targetKey);
};
handleCallback = key => {
// console.log(key)
message.info("Hi,您选择了页签: " + key);
};
render() {
return (
<div>
<Card title="Tabs页签" className="card-wrap">
<Tabs defaultActiveKey="1" onChange={this.handleCallback}>
<TabPane tab="Tab 1" key="1">
欢迎学习React课程
</TabPane>
<TabPane tab="Tab 2" key="2" disabled>
欢迎学习React课程
</TabPane>
<TabPane tab="Tab 3" key="3">
React是一门非常受欢迎的MV*框架
</TabPane>
</Tabs>
</Card>
<Card title="Tab带图标页签" className="card-wrap">
<Tabs defaultActiveKey="1" onChange={this.handleCallback}>
<TabPane
tab={
<span>
<Icon type="plus" />
Tab 1
</span>
}
key="1"
>
创建属于你的React项目
</TabPane>
<TabPane
tab={
<span>
<Icon type="edit" />
Tab 2
</span>
}
key="2"
>
尝试如何使用React进行修改
</TabPane>
<TabPane
tab={
<span>
<Icon type="delete" />
Tab 3
</span>
}
key="3"
>
删除它，就这么简单
</TabPane>
</Tabs>
</Card>
<Card title="Tab可关闭卡片式页签" className="card-wrap">
<Tabs
onChange={this.onChange}
activeKey={this.state.activeKey}
onEdit={this.onEdit}
type="editable-card"
>
{this.state.panes.map(panel => (
<TabPane tab={panel.title} key={panel.key}>
{panel.content}
</TabPane>
))}
</Tabs>
</Card>
</div>
);
}
}
API#
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 |
| hideAdd | 是否隐藏加号图标，在 type="editable-card" 时有效 |
boolean | false |
| type | 页签的基本样式，可选 line、card editable-card 类型 |
string | ‘line’ |
| onChange | 切换面板的回调 | Function(activeKey) {} | 无 |
| onEdit | 新增和删除页签的回调，在 type="editable-card" 时有效 |
(targetKey, action): void | 无 |
| activeKey | 当前激活 tab 面板的 key | string | 无 |
Tabs.TabPane#
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
| key | 对应 activeKey,决定页签是否被激活 | string | 无 |
| tab | 选项卡头显示文字 | string|ReactNode | 无 |